/* laniaura.com — 우산 사이트 공용 스타일.
 *
 * 타이포와 셀프호스트 폰트는 AURA 웹앱과 같은 시스템을 쓴다(생태계 한 가족).
 * 팔레트만 다르다 — 루트는 어느 제품도 차지하지 않으므로 AURA 의 로즈(#e8547c)를
 * 쓰지 않고 자체 색을 갖는다.
 *
 * 외부 요청 0. 폰트는 전부 여기서 서빙하고, 스크립트도 분석 코드도 없다.
 * 이건 취향이 아니라 계약이다 — AURA 개인정보 방침이 "서드파티 요청 없음"을
 * 주장하고 있고, 우산 사이트가 그걸 깨면 그 주장이 거짓이 된다.
 */

/* Fraunces 에 한글 글리프가 없어 Gowun Batang 이 한글 제목을 받는다.
   Inter 에도 없어 Noto Sans KR 이 한글 본문을 받는다. AURA 와 동일한 처리. */
@font-face { font-family:'Inter'; font-weight:400; font-display:swap; src:url('fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:500; font-display:swap; src:url('fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-weight:600; font-display:swap; src:url('fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family:'Noto Sans KR'; font-weight:400; font-display:swap; src:url('fonts/notosanskr-400.woff2') format('woff2'); }
@font-face { font-family:'Noto Sans KR'; font-weight:500; font-display:swap; src:url('fonts/notosanskr-500.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-weight:300; font-display:swap; src:url('fonts/fraunces-300.woff2') format('woff2'); }
@font-face { font-family:'Fraunces'; font-weight:400; font-display:swap; src:url('fonts/fraunces-400.woff2') format('woff2'); }
@font-face { font-family:'Gowun Batang'; font-weight:400; font-display:swap; src:url('fonts/gowunbatang-400.woff2') format('woff2'); }

:root {
    --bg:      #08090d;   /* AURA 보다 한 단계 깊고 차갑다 — 새벽 직전의 하늘 */
    --bg-lift: #0d1016;
    --panel:   #11141c;
    --panel-2: #151924;
    --line:    #1d2230;
    --line-2:  #2a3143;
    --text:    #eceef3;
    --text-2:  #949cad;   /* 중립회색 아님 — 액센트 쪽으로 살짝 기울인 쿨그레이 */
    /* #626a7b 였으나 배경 대비 3.64:1 로 WCAG AA(4.5:1) 미달이었다. 5.33:1 로 올림.
       --text-2(7.17:1)와는 여전히 뚜렷이 구분되므로 위계는 그대로 남는다. */
    --text-3:  #7c8598;
    --accent:  #d8b779;   /* 별빛/여명. AURA 의 로즈와 겹치지 않는다 */
    --accent-soft: rgba(216,183,121,.13);
    --serif: 'Fraunces','Gowun Batang',Georgia,serif;
    --sans:  'Inter','Noto Sans KR',system-ui,sans-serif;
    --wrap: 680px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
    background: var(--bg);
    /* 위쪽이 아주 살짝 밝다. 하늘이 있다는 것만 알리고 그림은 그리지 않는다. */
    background-image: linear-gradient(180deg, var(--bg-lift) 0%, var(--bg) 46%);
    background-repeat: no-repeat;
    color: var(--text);
    font: 400 16px/1.75 var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
::selection { background: var(--accent-soft); color: var(--text); }

/* ---------- 레이아웃 ---------- */
.wrap { width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px; }
.page { display:flex; flex-direction:column; min-height:100vh; }
main   { flex:1 0 auto; }

/* ---------- 마스트헤드 ---------- */
.masthead { padding:44px 0 0; }
.masthead .wrap { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.brand {
    font-family:var(--serif); font-weight:400; font-size:19px; letter-spacing:.34em;
    color:var(--text); text-decoration:none; white-space:nowrap;
}
.brand:hover { color:var(--accent); }
.masthead nav { display:flex; gap:20px; }
.masthead nav a { font-size:13px; color:var(--text-3); text-decoration:none; }
.masthead nav a:hover { color:var(--text-2); }

/* ---------- 히어로 ---------- */
.hero { padding:76px 0 8px; }
.hero h1 {
    font-family:var(--serif); font-weight:300; font-size:clamp(30px,6.2vw,50px);
    line-height:1.2; letter-spacing:-.4px; color:var(--text); text-wrap:balance;
}
.hero h1 em { font-style:normal; color:var(--accent); }
.hero p { margin-top:20px; color:var(--text-2); max-width:33em; }

/* ---------- 섹션 ---------- */
.section { padding:56px 0 0; }
.eyebrow {
    font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
    color:var(--text-3); margin-bottom:18px;
}

/* ---------- 엔트리(제품 목록) ----------
 * 우산 사이트의 본체. 제품 하나 = 블록 하나이므로, 새 제품이 생기면 이 블록만 복제하면 된다.
 * status 를 숨기지 않는 것이 이 목록의 요점이다 — 생태계 절반이 아직 없고,
 * 없는 것을 없다고 적는 목록이 자라는 생태계의 정직한 모양이다. */
.entries { display:flex; flex-direction:column; gap:12px; list-style:none; }
.entry {
    display:block; text-decoration:none; color:inherit;
    background:var(--panel); border:1px solid var(--line); border-radius:13px;
    padding:22px 24px; transition:border-color .18s, background .18s;
}
a.entry:hover { border-color:var(--line-2); background:var(--panel-2); }
.entry-top { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.entry h2 { font-family:var(--serif); font-weight:400; font-size:21px; letter-spacing:.02em; }
.entry p  { color:var(--text-2); font-size:15px; margin-top:8px; }
.entry.soon { opacity:.62; }

.tag {
    font-size:11px; font-weight:500; letter-spacing:.08em; padding:3px 9px; border-radius:99px;
    border:1px solid var(--line-2); color:var(--text-3); white-space:nowrap;
}
.tag.live { color:var(--accent); border-color:rgba(216,183,121,.34); background:var(--accent-soft); }

/* ---------- 카드 / 본문 ---------- */
.card {
    background:var(--panel); border:1px solid var(--line); border-radius:13px;
    padding:22px 24px; margin-top:12px;
}
.card h3 { font-size:15px; font-weight:600; letter-spacing:.01em; margin-bottom:8px; }
.card p + p { margin-top:10px; }
.card p, .card li { color:var(--text-2); font-size:15px; }
.card ul { padding-left:19px; margin-top:8px; }
.card li { margin-bottom:7px; }
.card li b, .card p b { color:var(--text); font-weight:500; }
.card:first-of-type { margin-top:0; }

/* 주파수 프리셋 표 — 숫자가 열을 이루므로 tabular-nums */
.presets { width:100%; border-collapse:collapse; margin-top:6px; font-size:14.5px; }
.presets td { padding:7px 0; border-bottom:1px solid var(--line); color:var(--text-2); }
.presets tr:last-child td { border-bottom:0; }
.presets td:first-child { color:var(--text); width:7.5em; }
.presets td:last-child  { text-align:right; font-variant-numeric:tabular-nums; color:var(--text-3); }

/* ---------- 버튼 ---------- */
.btn {
    display:block; text-align:center; text-decoration:none;
    background:var(--accent); color:#191308; font-weight:600; font-size:16px;
    padding:16px 20px; border-radius:10px;
}
.btn:hover { filter:brightness(1.07); }
.btn small { display:block; font-weight:400; font-size:13px; opacity:.72; margin-top:3px; }
.btn-ghost {
    display:block; text-align:center; text-decoration:none;
    border:1px solid var(--line-2); color:var(--text); font-weight:500; font-size:15px;
    padding:14px 20px; border-radius:10px;
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }
/* 아직 받을 수 없을 때. 죽은 링크로 404 를 보여 주는 것보다 낫다. */
.pending {
    text-align:center; color:var(--text-2); font-size:15px;
    border:1px dashed var(--line-2); border-radius:10px; padding:16px 20px;
}

/* ---------- 고지 ----------
 * 의료 고지는 이 페이지에서 가장 흐린 글씨가 되면 안 된다. --text-3 이 아니라 --text-2 를 쓴다. */
.notice {
    border-left:2px solid var(--line-2); padding:2px 0 2px 16px;
    color:var(--text-2); font-size:14px; line-height:1.75; margin-top:26px;
}
.notice p + p { margin-top:8px; }

/* ---------- 푸터 ---------- */
.foot { flex-shrink:0; margin-top:72px; padding:26px 0 40px; border-top:1px solid var(--line); }
.foot .wrap { display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; }
.foot, .foot a { color:var(--text-3); font-size:13px; }
.foot a { text-decoration:none; }
.foot a:hover { color:var(--text-2); }
.foot nav { display:flex; gap:18px; }

/* ---------- 되돌아가기 ---------- */
.back { display:inline-block; font-size:13px; color:var(--text-3); text-decoration:none; margin-bottom:26px; }
.back:hover { color:var(--text-2); }

a { color:var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion: reduce) {
    * { transition:none !important; animation:none !important; }
}
@media (max-width:520px) {
    .masthead { padding-top:32px; }
    .masthead nav { gap:14px; }
    .hero { padding:52px 0 4px; }
    .entry, .card { padding:18px 19px; }
}