/* ============================================================
   지나간다 (here.or.kr) — Dawn Light 공용 디자인 시스템
   v2026.7  — 홈(index.php)과 동일 토큰. 전 페이지 공통 적용용.
   ============================================================ */
:root{
  --mist:#EAF1EE; --ivory:#FBF8F1; --paper:#FDFCF8;
  --ink:#2B332F; --ink-soft:#4C554F; --ink-mute:#7E8781;
  --amber:#D9A24B; --amber-deep:#B7802E; --sage:#6E9488; --sage-deep:#4F7167;
  --line:rgba(43,51,47,.10); --line-soft:rgba(43,51,47,.06);
  --card:#FFFFFF;
  --shadow:0 24px 60px -34px rgba(78,98,90,.45), 0 6px 18px -12px rgba(78,98,90,.28);
  --shadow-soft:0 18px 44px -30px rgba(78,98,90,.40);
  --radius:22px; --radius-lg:28px; --radius-pill:999px;
  --maxw:900px; --measure:640px;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic','Segoe UI',system-ui,sans-serif;
  --touch:44px; --focus-ring:0 0 0 3px rgba(217,162,75,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); color:var(--ink); line-height:1.75; word-break:keep-all;
  -webkit-font-smoothing:antialiased; letter-spacing:-.01em; min-height:100vh; overflow-x:hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(217,162,75,.10) 0%, rgba(217,162,75,0) 46%),
    linear-gradient(168deg, var(--mist) 0%, #F2F3EC 34%, var(--ivory) 100%);
  background-attachment:fixed;
}
::selection{background:rgba(217,162,75,.24); color:var(--ink)}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}

/* headings */
h1,h2,h3{font-weight:300; letter-spacing:-.028em; line-height:1.2; color:var(--ink); text-wrap:balance}
.eyebrow{
  font-size:12.5px; letter-spacing:.30em; text-transform:uppercase;
  color:var(--sage-deep); font-weight:600; display:inline-flex; align-items:center; gap:11px;
}
.eyebrow::before{content:""; width:26px; height:1px; background:currentColor; opacity:.6}

/* ---- top nav (matches home) ---- */
.dawn-nav{position:sticky; top:0; z-index:60}
.dawn-nav .inner{display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,40px); max-width:var(--maxw); margin-inline:auto}
.dawn-nav::before{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(253,252,248,.86), rgba(253,252,248,.60));
  backdrop-filter:blur(12px) saturate(1.1); -webkit-backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--line-soft)}
.brand{display:flex; align-items:center; gap:10px; font-weight:500; font-size:18px; letter-spacing:-.02em; color:var(--ink)}
.brand .dot{width:24px; height:24px; flex:none}
.nav-links{display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.nav-links a{font-size:14px; color:var(--ink-soft); padding:8px 13px; border-radius:var(--radius-pill);
  transition:background .2s, color .2s}
.nav-links a:hover{background:rgba(110,148,136,.12); color:var(--ink)}
.nav-links a.cta{color:var(--ink); border:1px solid var(--line); background:rgba(255,255,255,.5)}
.nav-links a.cta:hover{border-color:var(--amber); background:rgba(217,162,75,.10)}

/* ---- cards ---- */
.card{background:var(--card); border:1px solid var(--line-soft); border-radius:var(--radius);
  padding:clamp(24px,4vw,34px); box-shadow:var(--shadow-soft)}
.card + .card{margin-top:18px}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-size:15px; font-weight:500; padding:14px 26px; border-radius:var(--radius-pill);
  cursor:pointer; border:1px solid transparent; font-family:inherit; letter-spacing:-.01em;
  min-height:var(--touch); transition:transform .2s, box-shadow .25s, background .25s, border-color .25s}
.btn-primary{background:linear-gradient(160deg,#E4B063,var(--amber) 55%,var(--amber-deep));
  color:#3A2A0E; box-shadow:0 14px 30px -14px rgba(183,128,46,.65)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 38px -14px rgba(183,128,46,.7)}
.btn-ghost{background:rgba(255,255,255,.62); border-color:var(--line); color:var(--ink-soft)}
.btn-ghost:hover{transform:translateY(-2px); border-color:var(--sage); color:var(--ink); background:rgba(255,255,255,.85)}
.btn-block{width:100%}

/* quote / lead */
.lead-quote{border-left:3px solid var(--amber); padding-left:18px; color:var(--ink);
  font-family:var(--serif); font-style:italic; margin:20px 0}

/* ---- footer ---- */
.dawn-foot{border-top:1px solid var(--line-soft); background:rgba(253,252,248,.5);
  text-align:center; color:var(--ink-mute); font-size:13px; line-height:1.9; padding:34px 20px}
.dawn-foot a{color:var(--ink-mute); text-decoration:underline; text-underline-offset:3px}

/* ---- form controls (iOS 줌 방지 16px, 44px 터치) ---- */
label{display:block; font-size:13px; color:var(--ink-mute); margin:0 0 6px 4px; font-weight:600}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=search],input[type=date],textarea,select{
  width:100%; font-size:16px; min-height:var(--touch); padding:14px 16px; border-radius:14px;
  border:1px solid var(--line); background:#fff; color:var(--ink); font-family:inherit;
  box-sizing:border-box; transition:border-color .2s, box-shadow .2s}
textarea{min-height:120px; line-height:1.7; resize:vertical}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--sage-deep); box-shadow:var(--focus-ring)}

/* focus-visible (키보드만) */
a:focus-visible,button:focus-visible,[role=button]:focus-visible,[tabindex]:focus-visible{
  outline:none; box-shadow:var(--focus-ring); border-radius:8px}
button,[role=button]{min-height:var(--touch); font-family:inherit; cursor:pointer}

/* 에러/알림 박스 */
.notice{font-size:13.5px; text-align:center; padding:12px 14px; border-radius:12px; margin:0 0 16px}
.notice-err{color:#9a4a3c; background:#fbf1ec; border:1px solid #f0dccf}
.notice-ok{color:var(--sage-deep); background:rgba(110,148,136,.10); border:1px solid rgba(110,148,136,.25)}

/* 접근성: 시각 숨김(스크린리더용) */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
  body{background-attachment:scroll}
}