/* ============================================================
   components/wiki.css
   koremi.com — 지역 위키
   ============================================================ */

.wiki-page { padding: var(--space-lg) 0 var(--space-2xl); }

.wiki-sr {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 경로 ────────────────────────────────────────────── */
.wiki-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin-bottom: var(--space-md);
    font-size: .85rem; color: var(--color-text-muted);
}
.wiki-breadcrumb a { color: var(--color-navy); text-decoration: none; }
.wiki-breadcrumb a:hover { text-decoration: underline; }

/* ── 히어로 ──────────────────────────────────────────── */
.wiki-hero {
    padding: var(--space-xl) var(--space-lg);
    margin-bottom: var(--space-xl);
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 100%);
    border-radius: var(--radius-lg);
    color: #fff; text-align: center;
}
.wiki-hero--region {
    background: linear-gradient(135deg, var(--region-color, var(--color-navy)) 0%, var(--color-navy-dark) 130%);
    text-align: left;
}
.wiki-hero__title { margin: 0 0 var(--space-sm); font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 700; }
.wiki-hero__lead { margin: 0 auto; max-width: 640px; font-size: 1rem; line-height: 1.7; opacity: .94; }
.wiki-hero__cities { margin: 0; font-size: .88rem; opacity: .85; }
.wiki-hero__actions { margin-top: var(--space-lg); display: flex; gap: var(--space-sm); justify-content: center; }
.wiki-hero--region .wiki-hero__actions { justify-content: flex-start; }

/* ── 버튼 ────────────────────────────────────────────── */
.wiki-btn {
    display: inline-block; padding: 9px 20px;
    font-family: var(--font-sans); font-size: .9rem; font-weight: 500;
    border-radius: var(--radius-md); cursor: pointer;
    text-decoration: none; transition: var(--transition); border: 1px solid transparent;
}
.wiki-btn--primary { color: #fff; background: var(--color-navy); border-color: var(--color-navy); }
.wiki-btn--primary:hover { background: var(--color-navy-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.wiki-btn--ghost {
    color: var(--color-navy); background: var(--color-bg-white); border-color: var(--color-border-dark);
}
.wiki-hero .wiki-btn--ghost { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }
.wiki-btn--ghost:hover { background: var(--color-navy-dim); }
.wiki-hero .wiki-btn--ghost:hover { background: rgba(255,255,255,.24); }
.wiki-inline-form { display: inline; }

/* ── 섹션 ────────────────────────────────────────────── */
.wiki-section { margin-bottom: var(--space-xl); }
.wiki-note {
    margin: var(--space-md) 0 0; font-size: .86rem; color: var(--color-text-muted);
}
.wiki-note a { color: var(--color-navy); }
.wiki-empty {
    padding: var(--space-lg); text-align: center;
    color: var(--color-text-faint); font-size: .9rem;
}
.wiki-two-col {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl);
}

/* ── 지역 카드 ───────────────────────────────────────── */
.wiki-region-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
}
.wiki-region-card {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: var(--space-lg) var(--space-md);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--region-color, var(--color-navy));
    border-radius: var(--radius-md);
    text-decoration: none; color: var(--color-text);
    transition: var(--transition);
}
.wiki-region-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.wiki-region-card--closed { opacity: .5; cursor: not-allowed; border-top-color: var(--color-border-dark); }
.wiki-region-card--closed:hover { transform: none; box-shadow: none; }
.wiki-region-card__icon  { font-size: 1.9rem; }
.wiki-region-card__label { font-weight: 500; text-align: center; }
.wiki-region-card__stat  { font-size: .8rem; color: var(--color-text-muted); }

/* ── 카테고리 카드 ───────────────────────────────────── */
.wiki-cat-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--space-md);
}
.wiki-cat-card {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none; color: var(--color-text);
    transition: var(--transition);
}
.wiki-cat-card:hover { border-color: var(--color-navy); box-shadow: var(--shadow-sm); }
.wiki-cat-card__icon  { font-size: 1.6rem; flex: 0 0 auto; }
.wiki-cat-card__label { font-weight: 500; flex: 1 1 auto; }
.wiki-cat-card__count { display: block; font-size: .78rem; color: var(--color-text-muted); }
.wiki-cat-card__count--empty { color: var(--color-gold); }

/* ── 목록 행 ─────────────────────────────────────────── */
.wiki-list-row {
    display: flex; align-items: flex-start; gap: var(--space-sm);
    padding: 11px var(--space-sm);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none; color: var(--color-text);
    transition: var(--transition);
}
.wiki-list-row:hover { background: var(--color-navy-dim); }
.wiki-list-row__icon { font-size: 1.1rem; }
.wiki-list-row__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wiki-list-row__body strong { font-size: .93rem; font-weight: 500; }
.wiki-list-row__meta { font-size: .78rem; color: var(--color-text-muted); }

/* ── 문서 헤더 ───────────────────────────────────────── */
.wiki-doc-header {
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--region-color, var(--color-navy));
    border-radius: var(--radius-md);
}
.wiki-doc-header__title { margin: 0 0 var(--space-sm); font-size: clamp(1.35rem, 3.4vw, 1.8rem); }
.wiki-doc-header__meta {
    display: flex; flex-wrap: wrap; gap: var(--space-md);
    font-size: .82rem; color: var(--color-text-muted);
}
.wiki-doc-header__actions {
    display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md);
}

/* ── 문서 레이아웃 ───────────────────────────────────── */
.wiki-doc-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    gap: var(--space-xl); align-items: start;
}

/* ── 항목 ────────────────────────────────────────────── */
.wiki-items__count {
    display: inline-block; margin-left: 6px; padding: 1px 9px;
    font-size: .78rem; color: #fff; background: var(--color-navy);
    border-radius: 999px; vertical-align: middle;
}
/* ── 항목 즉시 검색 ──────────────────────────────────── */
.wiki-filter {
    display: flex; align-items: center; gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.wiki-filter__input {
    flex: 1 1 auto; padding: 9px 14px;
    font-family: var(--font-sans); font-size: .92rem; color: var(--color-text);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-dark);
    border-radius: 999px;
}
.wiki-filter__input:focus {
    outline: 2px solid var(--color-navy-light); outline-offset: -1px;
    border-color: var(--color-navy);
}
.wiki-filter__stat {
    flex: 0 0 auto; font-size: .82rem; color: var(--color-text-muted);
    min-width: 68px; text-align: right;
}

.wiki-item {
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.wiki-item:target { border-color: var(--color-gold-bright); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.wiki-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.wiki-item__name { margin: 0; font-size: 1.03rem; font-weight: 600; }
.wiki-item__name a { color: var(--color-navy); text-decoration: none; }
.wiki-item__name a:hover { text-decoration: underline; }
.wiki-item__badge {
    padding: 2px 9px; font-size: .74rem;
    color: var(--color-green); background: var(--color-green-light);
    border-radius: 999px;
}
.wiki-item__facts { margin: var(--space-sm) 0 0; font-size: .87rem; }
.wiki-item__facts > div { display: flex; gap: var(--space-sm); padding: 2px 0; }
.wiki-item__facts dt { flex: 0 0 62px; color: var(--color-text-faint); }
.wiki-item__facts dd { margin: 0; color: var(--color-text); }
.wiki-item__facts a { color: var(--color-navy); }
.wiki-item__note {
    margin: var(--space-sm) 0 0; padding: var(--space-sm) 11px;
    font-size: .87rem; line-height: 1.6;
    background: var(--color-bg); border-radius: var(--radius-sm);
}
.wiki-item__foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
    margin-top: var(--space-sm); padding-top: var(--space-sm);
    border-top: 1px dashed var(--color-border);
    font-size: .78rem; color: var(--color-text-faint);
}
.wiki-item__by { margin-right: auto; }
.wiki-item__helpful,
.wiki-item__del {
    font-family: var(--font-sans); font-size: .78rem;
    background: none; border: none; cursor: pointer; padding: 2px 4px;
    color: var(--color-text-muted);
}
.wiki-item__helpful:hover { color: var(--color-navy); }
.wiki-item__helpful.is-voted { color: var(--color-green); font-weight: 500; }
.wiki-item__del:hover { color: var(--color-red); }

.wiki-items__empty {
    padding: var(--space-xl) var(--space-lg); text-align: center;
    background: var(--color-bg-white);
    border: 1px dashed var(--color-border-dark);
    border-radius: var(--radius-md);
    color: var(--color-text-muted); font-size: .9rem; line-height: 1.7;
}
.wiki-items__empty-title {
    margin: 0 0 var(--space-sm); font-size: 1.02rem;
    font-weight: 500; color: var(--color-text);
}

/* ── 항목 추가 폼 ────────────────────────────────────── */
.wiki-add {
    margin: var(--space-xl) 0;
    padding: var(--space-lg);
    background: var(--color-navy-dim);
    border: 1px solid var(--color-navy-light);
    border-radius: var(--radius-lg);
}
.wiki-add__title { margin: 0 0 6px; font-size: 1.12rem; color: var(--color-navy); }
.wiki-add__lead  { margin: 0 0 var(--space-lg); font-size: .88rem; color: var(--color-text-muted); }
.wiki-add__form  { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.wiki-add__guest { text-align: center; display: flex; flex-direction: column; gap: var(--space-md); align-items: center; }
.wiki-add__guest p { margin: 0; font-size: .9rem; color: var(--color-text-muted); }

.wiki-field { display: flex; flex-direction: column; gap: 5px; }
.wiki-field--full { grid-column: 1 / -1; }
.wiki-field label { font-size: .84rem; font-weight: 500; color: var(--color-text); }
.wiki-field input[type=text],
.wiki-field input[type=tel],
.wiki-field input[type=url],
.wiki-field textarea {
    width: 100%; padding: 9px 12px;
    font-family: var(--font-sans); font-size: .92rem; color: var(--color-text);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
}
.wiki-field input:focus,
.wiki-field textarea:focus {
    outline: 2px solid var(--color-navy-light); outline-offset: -1px;
    border-color: var(--color-navy);
}
.wiki-field textarea { resize: vertical; }
.wiki-req  { color: var(--color-red); }
.wiki-hint { font-weight: 400; color: var(--color-text-faint); font-size: .78rem; }
.wiki-check { display: inline-flex; align-items: center; gap: 7px; font-weight: 400; cursor: pointer; }

/* ── 본문 ────────────────────────────────────────────── */
.wiki-body__content {
    padding: var(--space-lg);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: .95rem; line-height: 1.85;
}

/* ── 사이드바 ────────────────────────────────────────── */
.wiki-widget {
    margin-bottom: var(--space-md);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.wiki-widget__header {
    padding: 11px var(--space-md);
    font-size: .85rem; font-weight: 600; color: #fff;
    background: var(--color-navy);
}
.wiki-widget--tip .wiki-widget__header { background: var(--color-green); }
.wiki-widget__link {
    display: flex; align-items: center; gap: 7px;
    padding: 9px var(--space-md);
    font-size: .86rem; color: var(--color-text); text-decoration: none;
    border-bottom: 1px solid var(--color-border);
}
.wiki-widget__link:hover { background: var(--color-navy-dim); }
.wiki-widget__link--active { background: var(--color-navy-dim); font-weight: 600; }
.wiki-widget__n {
    margin-left: auto; padding: 0 7px;
    font-size: .74rem; color: var(--color-text-muted);
    background: var(--color-bg); border-radius: 999px;
}
.wiki-widget__rev {
    display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
    padding: 9px var(--space-md);
    font-size: .8rem; border-bottom: 1px solid var(--color-border);
}
.wiki-widget__rev-time { color: var(--color-text-faint); }
.wiki-widget__rev-note { flex: 1 1 100%; color: var(--color-text-muted); }
.wiki-widget__more {
    display: block; padding: 9px var(--space-md);
    font-size: .82rem; color: var(--color-navy); text-decoration: none;
}
.wiki-widget__more:hover { text-decoration: underline; }
.wiki-tip-list { margin: 0; padding: var(--space-md) var(--space-md) var(--space-md) 30px; font-size: .84rem; line-height: 1.75; }

/* ── 참여 안내 ───────────────────────────────────────── */
.wiki-cta {
    padding: var(--space-lg);
    background: var(--color-green-light);
    border-radius: var(--radius-lg);
}
.wiki-cta__title { margin: 0 0 var(--space-md); font-size: 1.08rem; color: var(--color-green); }
.wiki-cta__steps { margin: 0; padding-left: 22px; font-size: .92rem; line-height: 1.9; }
.wiki-cta__note  { margin: var(--space-md) 0 0; font-size: .86rem; color: var(--color-text-muted); }
.wiki-cta__note a { color: var(--color-navy); }

/* ── 편집 / 이력 ─────────────────────────────────────── */
.wiki-edit__title { margin: 0 0 var(--space-lg); font-size: clamp(1.3rem, 3.2vw, 1.7rem); }
.wiki-edit__guide {
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    background: var(--color-warm-light);
    border-left: 3px solid var(--color-warm);
    border-radius: var(--radius-sm);
    font-size: .87rem; line-height: 1.7;
}
.wiki-edit__guide ul { margin: 6px 0 0; padding-left: 20px; }
.wiki-edit__form { display: grid; gap: var(--space-md); }
.wiki-edit__actions { display: flex; gap: var(--space-sm); }

.wiki-hist { width: 100%; border-collapse: collapse; font-size: .87rem; }
.wiki-hist th, .wiki-hist td {
    padding: 10px var(--space-sm); text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.wiki-hist th { background: var(--color-bg); font-weight: 600; font-size: .82rem; }
.wiki-hist__reverted { opacity: .55; text-decoration: line-through; }
.wiki-hist__revert {
    font-family: var(--font-sans); font-size: .78rem;
    color: var(--color-red); background: none; border: none; cursor: pointer;
}
.wiki-hist__revert:hover { text-decoration: underline; }

.wiki-delta--plus  { color: var(--color-green); font-weight: 600; }
.wiki-delta--minus { color: var(--color-red);   font-weight: 600; }
.wiki-delta--zero  { color: var(--color-text-faint); }

/* ── 반응형 ──────────────────────────────────────────── */
@media (max-width: 900px) {
    .wiki-doc-layout { grid-template-columns: 1fr; }
    .wiki-two-col    { grid-template-columns: 1fr; gap: var(--space-lg); }
}
@media (max-width: 640px) {
    .wiki-add__form { grid-template-columns: 1fr; }
    .wiki-hero      { padding: var(--space-lg) var(--space-md); }
    .wiki-add       { padding: var(--space-md); }
    .wiki-hist      { display: block; overflow-x: auto; }
}
