/* 케이디 덴티스트리 교육센터 — 공통 스타일
   브랜드: 블랙 & 골드 / 모바일 우선 */

:root{
  --ink:#131211;
  --ink-soft:#3B3733;
  --paper:#FBFAF7;
  --surface:#FFFFFF;
  --surface-2:#F3F0EA;
  --line:#E2DDD3;
  --muted:#6F6960;
  --gold:#9C7A33;
  --gold-bright:#C9A253;
  --gold-wash:#F6EFE0;
  --alert:#A8362A;
  --alert-wash:#FAECE8;
  --done:#2C5B87;
  --done-wash:#EAF0F6;
  --shadow:0 1px 2px rgba(19,18,17,.05), 0 8px 24px -16px rgba(19,18,17,.35);
  --maxw:44rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F2EFE9;
    --ink-soft:#CFC8BD;
    --paper:#121110;
    --surface:#1B1918;
    --surface-2:#232120;
    --line:#332F2B;
    --muted:#9A938A;
    --gold:#D4B26A;
    --gold-bright:#E6CA8D;
    --gold-wash:#241F16;
    --alert:#EB8877;
    --alert-wash:#2B1A16;
    --done:#7FB0DB;
    --done-wash:#161F29;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ink:#F2EFE9;
  --ink-soft:#CFC8BD;
  --paper:#121110;
  --surface:#1B1918;
  --surface-2:#232120;
  --line:#332F2B;
  --muted:#9A938A;
  --gold:#D4B26A;
  --gold-bright:#E6CA8D;
  --gold-wash:#241F16;
  --alert:#EB8877;
  --alert-wash:#2B1A16;
  --done:#7FB0DB;
  --done-wash:#161F29;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-text-size-adjust:100%;
  word-break:keep-all;
  overflow-wrap:anywhere;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{
  font-family:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;
  font-weight:600;
  line-height:1.4;
  text-wrap:balance;
  margin:0;
  letter-spacing:-.01em;
}
p{margin:0}

/* ── 레이아웃 ───────────────────────────── */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
main{display:block}
section{padding-block:clamp(2.75rem,8vw,4.5rem)}
section + section{border-top:1px solid var(--line)}
.stack{display:flex;flex-direction:column;gap:1.25rem}
.stack-lg{display:flex;flex-direction:column;gap:2.5rem}

.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:0;
}
.lede{font-size:1.06rem;color:var(--ink-soft)}
.muted{color:var(--muted);font-size:.9rem}

/* ── 헤더 ───────────────────────────────── */
.site-header{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw);margin-inline:auto;padding:.7rem 20px;
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
}
.brand{display:flex;align-items:center;color:var(--ink);text-decoration:none}
.brand svg{height:26px;width:auto}
.nav{
  display:flex;gap:.15rem;overflow-x:auto;scrollbar-width:none;
  padding:0 12px .6rem;border-bottom:0;
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  flex:0 0 auto;text-decoration:none;font-size:.86rem;font-weight:500;
  color:var(--muted);padding:.3rem .62rem;border-radius:999px;white-space:nowrap;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);background:var(--gold-wash);font-weight:700}

/* ── 히어로 ─────────────────────────────── */
.hero{
  background:#131211;color:#F2EFE9;
  padding-block:clamp(3rem,11vw,5.5rem);
  border-top:0;
  position:relative;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
}
.hero .eyebrow{color:var(--gold-bright)}
.hero h1{font-size:clamp(1.75rem,6.6vw,2.7rem);color:#FBFAF7}
.hero p{color:#CFC8BD}
.hero-mark{height:56px;width:auto;color:#F2EFE9;margin-bottom:.35rem}

/* ── 검은 구간 ──────────────────────────── */
.hero,.band{position:relative;overflow:hidden}
.hero > .wrap,.band > .wrap{position:relative;z-index:1}
.band{
  background:#131211;color:#F2EFE9;border-top:0;
  padding-block:clamp(3rem,9vw,4.75rem);
}
.band + section{border-top:0}
.band h1,.band h2,.band h3,.band h4{color:#FBFAF7}
.band p,.band li{color:#CFC8BD}
.band .eyebrow{color:var(--gold-bright)}
.band .muted{color:#8E877E}
.band .pull{color:#FBFAF7;border-left-color:var(--gold-bright)}
.band .facts,.band .facts div{border-color:#2E2A27}
.band .facts dt{color:#8E877E}
.band .facts dd{color:#F2EFE9}
.band .facts a,.band a:not(.btn){color:var(--gold-bright)}
.band ul.ticks li::before{background:var(--gold-bright)}
.band .btn{background:var(--gold-bright);border-color:var(--gold-bright);color:#131211}
.band .btn:hover{background:#F2EFE9;border-color:#F2EFE9}
.band .btn.ghost{background:transparent;color:#F2EFE9;border-color:#4A443E}
.band .btn.ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright)}

/* 배경 심볼 */
.wm{
  position:absolute;right:-26%;top:50%;transform:translateY(-50%);
  height:min(80%,300px);width:auto;color:#F2EFE9;opacity:.045;
  pointer-events:none;z-index:0;
}
@media(min-width:560px){.wm{right:-8%;height:min(88%,360px);opacity:.055}}
@media(min-width:900px){.wm{right:2%;height:min(92%,400px)}}

/* 검은 구간의 큰 인용 */
.band-quote{
  font-family:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;
  font-size:clamp(1.35rem,5.2vw,2rem);line-height:1.55;color:#FBFAF7;
  text-wrap:balance;letter-spacing:-.015em;
}
.band-quote em{font-style:normal;color:var(--gold-bright)}

/* ── 카드 / 목록 ────────────────────────── */
.cards{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:660px){.cards.two{grid-template-columns:1fr 1fr}}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  padding:1.35rem 1.35rem 1.5rem;display:flex;flex-direction:column;gap:.55rem;
  text-decoration:none;color:inherit;
}
a.card:hover{border-color:var(--gold);box-shadow:var(--shadow)}
.card h3{font-size:1.16rem}
.card .tag{
  align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  color:var(--gold);background:var(--gold-wash);padding:.2rem .5rem;border-radius:2px;
}
.card .go{font-size:.85rem;font-weight:700;color:var(--gold);margin-top:.35rem}

/* 정의형 목록 */
.facts{display:grid;gap:0;border-top:1px solid var(--line)}
.facts div{
  display:grid;grid-template-columns:7.5rem 1fr;gap:.6rem 1rem;
  padding:.8rem 0;border-bottom:1px solid var(--line);align-items:start;
}
.facts dt{font-size:.84rem;font-weight:700;color:var(--muted);margin:0}
.facts dd{margin:0;font-size:.95rem}
@media(max-width:420px){
  .facts div{grid-template-columns:1fr;gap:.15rem}
}

ul.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
ul.ticks li{padding-left:1.35rem;position:relative;font-size:.97rem}
ul.ticks li::before{
  content:"";position:absolute;left:.15rem;top:.72em;
  width:.42rem;height:.42rem;background:var(--gold);transform:rotate(45deg);
}

/* ── 자격 타이틀 카드 ───────────────────── */
section[id]{scroll-margin-top:5.5rem}
.cert-head{
  display:grid;grid-template-columns:auto 1fr;gap:1.15rem;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:4px;padding:1.1rem 1.3rem;
}
.cert-head.pending{border-left-color:var(--line);grid-template-columns:1fr}
.cert-abbr{
  font-family:"Noto Serif KR","Nanum Myeongjo",serif;font-weight:700;
  font-size:clamp(1.7rem,7vw,2.15rem);line-height:1;color:var(--gold);letter-spacing:.01em;
}
.cert-head h2{font-size:clamp(1.2rem,5vw,1.45rem)}
.cert-meta{
  display:flex;flex-wrap:wrap;gap:.25rem .8rem;margin-top:.35rem;
  font-size:.77rem;color:var(--muted);letter-spacing:.01em;
}
.cert-meta .reg{color:var(--gold);font-weight:700}

/* 자격 바로가기 */
.jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.3rem}
.jump a{
  display:inline-flex;align-items:baseline;gap:.4rem;text-decoration:none;
  font-size:.85rem;font-weight:500;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:999px;padding:.38rem .9rem;
  background:var(--surface);
}
.jump a:hover{border-color:var(--gold);color:var(--gold)}
.jump .ab{
  font-family:"Noto Serif KR",serif;font-weight:700;font-size:.82rem;color:var(--gold);
}

/* ── 커리큘럼 ───────────────────────────── */
.c-total{
  font-size:.86rem;color:var(--muted);letter-spacing:.02em;
}
.c-total strong{color:var(--gold);font-size:1rem}
ol.curriculum{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
ol.curriculum li{
  display:grid;grid-template-columns:2.1rem 1fr;gap:.9rem;
  padding:1rem 0;border-top:1px solid var(--line);
}
ol.curriculum li:last-child{border-bottom:1px solid var(--line)}
ol.curriculum .n{
  font-family:"Noto Serif KR",serif;font-size:1.05rem;font-weight:700;
  color:var(--gold);line-height:1.5;font-variant-numeric:tabular-nums;
}
.c-body{display:flex;flex-direction:column;gap:.35rem}
.c-body h4{font-size:1.02rem}
.c-body p{font-size:.93rem;color:var(--ink-soft)}
.c-subject{
  align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.03em;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  padding:.15rem .45rem;border-radius:2px;margin-top:.15rem;
}

/* ── 월별 일정 ──────────────────────────── */
.month{display:flex;flex-direction:column;gap:1rem;margin-top:1.8rem}
.month-title{
  font-size:1.05rem;display:flex;align-items:center;gap:.7rem;color:var(--ink);
}
.month-title::after{content:"";flex:1;height:1px;background:var(--line)}
/* 달력 */
.cal{
  display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;
}
.cal > *{
  background:var(--surface);min-height:3rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
  font-size:.85rem;color:var(--ink-soft);
}
.cal .wd{
  background:var(--surface-2);min-height:0;padding:.4rem 0;
  font-size:.72rem;font-weight:700;color:var(--muted);letter-spacing:.04em;
}
.cal .empty{background:var(--paper)}
.cal b{font-weight:500;font-variant-numeric:tabular-nums;line-height:1}
.cal a.has{
  text-decoration:none;background:var(--surface-2);color:var(--ink);
}
.cal a.has:has(.dot.open){background:var(--alert-wash)}
.cal a.has:has(.dot.closed){background:var(--done-wash)}
.cal a.has b{font-weight:700}
.cal a.has:hover{background:var(--gold);color:#131211}
.cal a.has:has(.dot.open):hover{background:var(--alert);color:#fff}
.cal a.has:has(.dot.closed):hover{background:var(--done);color:#fff}
.cal .dots{display:flex;gap:.16rem;height:.4rem;align-items:center}
.cal .dot{width:.36rem;height:.36rem;border-radius:50%;background:var(--muted);display:block}
.cal .dot.open{background:var(--alert)}
.cal .dot.closed{background:var(--done)}
.cal-legend{
  display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.78rem;color:var(--muted);
  align-items:center;
}
.cal-legend i{
  width:.36rem;height:.36rem;border-radius:50%;background:var(--muted);
  display:inline-block;margin-right:.3rem;vertical-align:.05rem;
}
.cal-legend i.open{background:var(--alert)}
.cal-legend i.closed{background:var(--done)}

.standing{
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;
  background:var(--surface);padding:.95rem 1.1rem;
}
.k.std{color:var(--gold);border-color:var(--gold);background:var(--gold-wash)}

ul.sched{list-style:none;margin:0;padding:0}
ul.sched li{scroll-margin-top:6rem}
ul.sched li:target{background:var(--gold-wash);border-radius:3px}
ul.sched li{
  display:grid;grid-template-columns:4.9rem 1fr;gap:.9rem;
  padding:.95rem 0;border-top:1px solid var(--line);
}
ul.sched li:last-child{border-bottom:1px solid var(--line)}
ul.sched .sd{
  font-weight:700;font-size:.9rem;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;padding-top:.1rem;
}
.si{display:flex;flex-direction:column;gap:.28rem;align-items:flex-start}
.si h4{font-size:1rem;line-height:1.5}
.si .sm{font-size:.85rem;color:var(--muted)}
.k{
  display:inline-block;white-space:nowrap;font-size:.73rem;font-weight:700;
  padding:.15rem .5rem;border-radius:2px;border:1px solid var(--line);
  color:var(--muted);background:var(--surface-2);
}
.k.open{color:var(--alert);border-color:var(--alert);background:var(--alert-wash)}
.k.closed{color:var(--done);border-color:var(--done);background:var(--done-wash)}

/* ── 약력 ───────────────────────────────── */
ul.career{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
ul.career li{
  display:grid;grid-template-columns:2.6rem 1fr;gap:.9rem;align-items:baseline;
  padding:.65rem 0;border-bottom:1px solid var(--line);font-size:.97rem;
}
ul.career .mark{
  font-size:.72rem;font-weight:700;letter-spacing:.04em;text-align:center;
  color:var(--muted);border:1px solid var(--line);border-radius:2px;padding:.1rem 0;
}
ul.career .mark.now{color:var(--gold);border-color:var(--gold);background:var(--gold-wash)}

/* ── 강조 인용 ──────────────────────────── */
.pull{
  border-left:3px solid var(--gold);padding:.15rem 0 .15rem 1.1rem;
  font-family:"Noto Serif KR","Nanum Myeongjo","AppleMyungjo","Batang",serif;font-size:1.1rem;line-height:1.7;color:var(--ink);
}

/* ── 인물 ───────────────────────────────── */
.portrait{
  border-radius:3px;border:1px solid var(--line);
  width:100%;object-fit:cover;background:var(--surface-2);
}
.person{display:grid;gap:1.4rem;grid-template-columns:1fr}
@media(min-width:640px){
  .person{grid-template-columns:minmax(0,15rem) 1fr;align-items:start;gap:1.8rem}
}

/* ── 표 ─────────────────────────────────── */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:min(30rem,100%);font-size:.9rem}
caption{text-wrap:pretty}
caption{text-align:left;font-size:.82rem;color:var(--muted);padding:.6rem .9rem 0}
th,td{padding:.7rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);
  overflow-wrap:normal;word-break:keep-all}
.table-scroll.wide table{min-width:36rem}
thead th{background:var(--surface-2);font-size:.8rem;letter-spacing:.03em;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td .num{font-variant-numeric:tabular-nums}

/* ── 채울 자리 ──────────────────────────── */
.todo{
  border:1px dashed var(--gold);background:var(--gold-wash);
  border-radius:4px;padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.4rem;
}
.todo b{
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  font-family:"Noto Sans KR",sans-serif;
}
.todo p{font-size:.92rem;color:var(--ink-soft)}
.soon{
  border:1px solid var(--line);background:var(--surface-2);
  border-radius:4px;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;
}
.soon .tag{
  align-self:flex-start;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  color:var(--muted);border:1px solid var(--line);background:var(--surface);
  padding:.2rem .5rem;border-radius:2px;
}

/* ── 버튼 ───────────────────────────────── */
.btn{
  display:inline-block;text-decoration:none;font-weight:700;font-size:.95rem;
  padding:.7rem 1.4rem;border-radius:3px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);
}
.btn:hover{background:var(--gold);border-color:var(--gold);color:#131211}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.hero .btn{background:var(--gold-bright);border-color:var(--gold-bright);color:#131211}
.hero .btn:hover{background:#F2EFE9;border-color:#F2EFE9}
.hero .btn.ghost{background:transparent;color:#F2EFE9;border-color:#4A443E}
.hero .btn.ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem}

/* ── 푸터 ───────────────────────────────── */
.site-footer{
  background:var(--surface-2);border-top:1px solid var(--line);
  padding-block:2.5rem 3rem;margin-top:0;
}
.site-footer .wrap{display:flex;flex-direction:column;gap:1.4rem}
.footer-mark{height:52px;width:auto;color:var(--ink)}
.footer-nav{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
.footer-nav a{font-size:.88rem;color:var(--muted);text-decoration:none}
.footer-nav a:hover{color:var(--gold)}
.legal{
  font-size:.79rem;line-height:1.7;color:var(--muted);
  border-top:1px solid var(--line);padding-top:1.2rem;
}
.legal strong{color:var(--ink-soft);font-weight:700}
.legal ul{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.15rem}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}