/* laniaura.com — 컴포넌트. base.css 다음에 읽힌다. */

/* ── 마스트헤드 ───────────────────────────────────────────────────────────── */
.mast {
    position: sticky; top: 0; z-index: 50;
    background: var(--panel);
    border-bottom: 1px solid var(--ink);
    box-shadow: 0 1px 0 0 var(--edge);
}
.mast .wrap { max-width: var(--w-panel); }
.mast .wrap > * { margin-left: 0; max-width: none; }
.mast-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); height: var(--head-h); }

.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; flex-shrink: 0; }
.brand svg { width: 20px; height: 20px; }
.brand span {
    font-family: var(--f-title); font-weight: 700; font-size: 15px;
    letter-spacing: .2em; white-space: nowrap;
}

.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav a {
    font: 400 15px/1 var(--f-body); text-decoration: none; color: var(--ink);
    padding: var(--s-3) 0; white-space: nowrap;
}
.nav a:hover { color: var(--signal); }
.nav a[aria-current="page"] { font-weight: 600; box-shadow: inset 0 -2px 0 0 var(--signal); }

/* 우측 readout — 확인된 사실만. 「운영 중」 같은 자체 판정어는 쓰지 않는다. */
.readout { font-family: var(--f-data); font-size: 11px; letter-spacing: .06em; color: var(--ink-dim); white-space: nowrap; }

/* 햄버거 없음. 768 미만에서 2단으로 접는다 — 5항목이 13px 로 320px 폭에 들어간다. */
@media (max-width: 767px) {
    .mast-in { flex-direction: column; align-items: stretch; gap: 0; height: auto; }
    .brand { height: 44px; }
    .nav { gap: var(--s-4); height: 40px; overflow: visible; }
    .nav a { font-size: 13px; padding: var(--s-3) 0; }
    .readout { display: none; }
}

/* ── 눈금 레일 (시그니처) ─────────────────────────────────────────────────── */
/* 7.83Hz 가 8 눈금에 스냅되지 않는 것이 이 눈금이 진짜라는 유일한 증거다.
   JS 를 꺼도 정확하다 — 눈금·라벨·앵커는 정적 SVG 이고 JS 는 마커 위치 갱신만 한다. */
.rail {
    position: fixed; left: max(var(--s-6), calc((100vw - var(--w-panel)) / 2 + var(--s-6)));
    top: calc(var(--head-h) + var(--s-8));
    width: var(--rail); z-index: 10;
    pointer-events: none;
}
.rail svg { width: 100%; height: auto; }
@media (max-width: 899px) { .rail { display: none; } }

/* 홈 히어로에서 한 번 가로로 펼치는 버전 */
.rail-h { width: 100%; }
.rail-h svg { width: 100%; height: auto; }

/* ── 대장 표 ─────────────────────────────────────────────────────────────── */
.ledger { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ledger td { overflow-wrap: break-word; }
.ledger th, .ledger td { padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--hair); vertical-align: top; text-align: left; }
.ledger thead th { border-bottom: 1px solid var(--ink); padding-bottom: var(--s-2); }
.ledger .c-lamp { width: 20px; padding-right: 0; }
.ledger .c-name { width: 8.5em; }
.ledger .c-state { width: 8em; }
.ledger .c-act { width: 16em; }
.ledger .name { font-family: var(--f-title); font-weight: 700; font-size: 19px; }
.ledger .act a { color: var(--ink); text-decoration: none; box-shadow: inset 0 -1px 0 0 var(--ink); }
.ledger .act a:hover { color: var(--signal); box-shadow: inset 0 -1px 0 0 var(--signal); }
.ledger .act .sep { color: var(--ink-dim); margin: 0 var(--s-2); }
.ledger .dash { color: var(--ink-dim); }

/* 모바일: 가로 스크롤 대신 행 블록으로 스택. 카드로 보이는 순간 형식 규율이 깨지므로
   테두리·라운드·그림자 없이 헤어라인 구분만 쓴다. */
@media (max-width: 767px) {
    .ledger, .ledger tbody, .ledger tr, .ledger td { display: block; width: auto; }
    .ledger thead { display: none; }
    .ledger tr { border-bottom: 1px solid var(--hair); padding: var(--s-5) 0; }
    .ledger tr:last-child { border-bottom: 0; }
    .ledger td { border: 0; padding: 0; }
    .ledger td + td { margin-top: var(--s-2); }
    .ledger .c-lamp, .ledger .c-mark { display: none; }
    .ledger .c-name { display: flex; align-items: center; gap: var(--s-2); }
    .ledger .c-state { position: static; }
}

/* ── 프리셋 카드 ─────────────────────────────────────────────────────────── */
.presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
@media (max-width: 1023px) { .presets { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .presets { grid-template-columns: 1fr; } }

.preset { border: 1px solid var(--hair); border-radius: var(--r-0); padding: var(--s-5); background: var(--panel); }
.band .preset { background: var(--recess); }
.preset .no { display: block; margin-bottom: var(--s-4); }
.preset .val { display: flex; align-items: baseline; gap: var(--s-2); }
.preset .val .u { font-family: var(--f-data); font-size: 14px; color: var(--ink-dim); }
.preset .nm { font-family: var(--f-title); font-weight: 700; font-size: 22px; margin-top: var(--s-1); }
.preset .spark { margin-top: var(--s-4); }
.preset .spark svg { width: 100%; height: auto; }

/* ── 기록 로그 ───────────────────────────────────────────────────────────── */
.log { width: 100%; border-collapse: collapse; font-size: 15px; table-layout: fixed; }
.log td { overflow-wrap: break-word; }
.log td { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.log tr:last-child td { border-bottom: 0; }
.log .date { font-family: var(--f-data); font-size: 13px; color: var(--ink-dim); white-space: nowrap; width: 8.5em; }
.log .who { width: 7em; }
.log .who span { font-family: var(--f-title); font-weight: 700; font-size: 11px; letter-spacing: .1em; color: var(--ink-dim); }
@media (max-width: 767px) {
    .log, .log tbody, .log tr, .log td { display: block; }
    .log tr { border-bottom: 1px solid var(--hair); padding: var(--s-3) 0; }
    .log td { border: 0; padding: 0; }
    .log .date, .log .who { width: auto; display: inline-block; margin-right: var(--s-3); }
}

/* ── 원칙 번호 목록 ──────────────────────────────────────────────────────── */
.rules { list-style: none; }
.rules li { display: flex; gap: var(--s-4); padding: var(--s-4) 0; border-bottom: 1px solid var(--hair); }
.rules li:last-child { border-bottom: 0; }
.rules .n { font-family: var(--f-data); font-weight: 500; font-size: 13px; color: var(--ink-dim); flex-shrink: 0; padding-top: 3px; }

/* ── 2열 사양 표 ─────────────────────────────────────────────────────────── */
.spec { width: 100%; border-collapse: collapse; table-layout: fixed; }
.spec td, .spec th { overflow-wrap: break-word; }
.spec th { width: 12em; font-weight: 400; color: var(--ink-dim); }
.spec th, .spec td { text-align: left; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
@media (max-width: 599px) { .spec th { width: 8.5em; } }

/* ── 2단 배치 ────────────────────────────────────────────────────────────── */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
.two.wide-l { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 899px) { .two, .two.wide-l { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ── 푸터 ────────────────────────────────────────────────────────────────── */
.foot { flex-shrink: 0; border-top: 1px solid var(--ink); background: var(--recess); }
.foot .wrap > * { margin-left: 0; max-width: none; }

.dir { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); padding: var(--s-8) 0 var(--s-7); }
@media (max-width: 899px) { .dir { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.dir h3 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--s-4); }
.dir ul { list-style: none; }
.dir li { margin-bottom: var(--s-2); }
.dir li.sub { padding-left: var(--s-3); }
.dir a { font-size: 15px; text-decoration: none; color: var(--ink); }
.dir a:hover { color: var(--signal); }
.dir a.mark { font-weight: 600; }   /* 개인정보 처리방침 — 작성지침이 시각적 구분을 요구한다 */
.dir .off { font-size: 15px; color: var(--ink-dim); }
.dir .st { font-family: var(--f-data); font-size: 11px; color: var(--ink-dim); margin-left: var(--s-2); }

.biz { border-top: 1px solid var(--hair); padding: var(--s-5) 0; font-family: var(--f-data); font-size: 12px; line-height: 2; color: var(--ink-dim); }
.biz .row { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
.biz a { color: var(--ink-dim); }
.biz .todo { color: var(--ink); background: var(--panel); padding: 0 4px; }
@media (max-width: 599px) { .biz .row { flex-direction: column; gap: 0; } }

.colophon { border-top: 1px solid var(--hair); padding: var(--s-5) 0 var(--s-8); font-size: 13px; line-height: 1.8; color: var(--ink-dim); max-width: 72ch; }
.colophon p + p { margin-top: var(--s-3); }
.colophon strong { color: var(--ink); }