/* K-컬처 방한 연령 분석 — 쉬운 발표 덱
   색·글꼴은 팀 기존 자료(pptx 남색·마젠타, 맑은 고딕) 계열을 이어받되, 발표용으로 대비를 키움 */

:root{
  --bg:        #FbFbFd;
  --slide:     #ffffff;
  --panel:     #F1F2F8;
  --panel-2:   #E7E9F3;
  --ink:       #1B1F3B;
  --ink-soft:  #4A4F78;
  --ink-mute:  #7C81A6;
  --line:      #D8DBE8;

  --navy:      #2E3565;   /* 주 강조 */
  --sky:       #4C74B8;   /* 차트 계열 1 */
  --coral:     #E14B46;   /* 핵심 숫자·하이라이트 */
  --gold:      #DE9A2E;   /* 차트 계열 2 */
  --mint:      #2E9E6B;   /* 확인됨·긍정 */

  --shadow:    0 1px 2px rgba(27,31,59,.06), 0 8px 30px rgba(27,31,59,.08);

  --c-a: var(--sky);
  --c-b: var(--ink-mute);
  --grid: #E6E8F2;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111327; --slide:#191c34; --panel:#20243f; --panel-2:#272c4c;
    --ink:#EEF0F8; --ink-soft:#B9BEDD; --ink-mute:#888DB4; --line:#333962;
    --navy:#9AA3E4; --sky:#7BA2DE; --coral:#FF7A74; --gold:#F0B65C; --mint:#5FC79B;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 34px rgba(0,0,0,.34);
    --c-a:var(--sky); --c-b:var(--ink-mute); --grid:#2C3358;
  }
}
:root[data-theme="dark"]{
  --bg:#111327; --slide:#191c34; --panel:#20243f; --panel-2:#272c4c;
  --ink:#EEF0F8; --ink-soft:#B9BEDD; --ink-mute:#888DB4; --line:#333962;
  --navy:#9AA3E4; --sky:#7BA2DE; --coral:#FF7A74; --gold:#F0B65C; --mint:#5FC79B;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 34px rgba(0,0,0,.34);
  --c-a:var(--sky); --c-b:var(--ink-mute); --grid:#2C3358;
}

*{box-sizing:border-box;}
html{color-scheme:light dark;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Gowun Dodum","Malgun Gothic","맑은 고딕","Apple SD Gothic Neo",system-ui,sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
h1,h2,h3,.h{
  font-family:"Nanum Gothic","Gowun Dodum","Malgun Gothic","맑은 고딕",sans-serif;
  font-weight:800; letter-spacing:-.02em; line-height:1.28; text-wrap:balance; margin:0;
}
.mono{font-family:"IBM Plex Mono",ui-monospace,"Consolas",monospace;}
.num{font-variant-numeric:tabular-nums;}

/* ============ 덱 셸 ============ */
#deck{position:fixed; inset:0;}
.slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:safe center;
  padding:clamp(28px,5vw,72px) clamp(24px,7vw,110px);
  background:var(--bg);
  overflow-y:auto;
}
.slide[hidden]{display:none;}
.slide-inner{width:100%; max-width:1060px; margin:0 auto;}

/* 슬라이드 진입 애니메이션 — 보이는 상태에서 시작 */
@media (prefers-reduced-motion:no-preference){
  .slide:not([hidden]) .anim{animation:rise .5s cubic-bezier(.2,.7,.3,1) both;}
  .slide:not([hidden]) .anim:nth-child(2){animation-delay:.05s;}
  .slide:not([hidden]) .anim:nth-child(3){animation-delay:.10s;}
  .slide:not([hidden]) .anim:nth-child(4){animation-delay:.15s;}
  .slide:not([hidden]) .anim:nth-child(5){animation-delay:.20s;}
  @keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
}

/* 공통 요소 */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Nanum Gothic",sans-serif; font-weight:800;
  font-size:clamp(11px,1.4vw,13px); letter-spacing:.14em; color:var(--navy);
  text-transform:uppercase; margin-bottom:18px;
}
.eyebrow::before{content:""; width:22px; height:3px; background:var(--coral);}
.slide h2{font-size:clamp(24px,4vw,40px); margin-bottom:10px;}
.slide h1{font-size:clamp(30px,6vw,58px);}
.oneline{
  font-size:clamp(14px,1.9vw,18px); color:var(--ink-soft); margin:6px 0 0; max-width:52ch;
}
.oneline b{color:var(--coral); font-weight:inherit;}

/* 요약 배지 ("이 슬라이드 한 줄") */
.tag1{
  display:inline-block; margin-top:22px; padding:7px 14px;
  background:var(--panel); border-left:3px solid var(--navy);
  font-size:clamp(12px,1.6vw,15px); color:var(--ink-soft);
}
.tag1 b{color:var(--ink); font-weight:800; font-family:"Nanum Gothic",sans-serif;}

/* KPI 타일 */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,2vw,22px); margin-top:30px;}
.kpi{background:var(--slide); border:1px solid var(--line); border-radius:14px; padding:clamp(16px,2.4vw,26px); box-shadow:var(--shadow);}
.kpi .v{font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:clamp(26px,5vw,44px); color:var(--coral); line-height:1;}
.kpi .k{margin-top:10px; font-size:clamp(12px,1.6vw,15px); color:var(--ink-soft);}
.kpi.navy .v{color:var(--navy);} .kpi.mint .v{color:var(--mint);}

/* 카드 리스트 (단계·항목) */
.cards{display:grid; gap:clamp(10px,1.6vw,16px); margin-top:26px;}
.cards.c2{grid-template-columns:1fr 1fr;}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.card{
  background:var(--slide); border:1px solid var(--line); border-radius:12px;
  padding:clamp(14px,2vw,20px); box-shadow:var(--shadow); display:flex; gap:14px;
}
.card .no{
  flex:none; width:30px; height:30px; border-radius:8px; background:var(--navy); color:#fff;
  font-family:"IBM Plex Mono",monospace; font-weight:700; display:grid; place-items:center; font-size:15px;
}
.card .ct{font-family:"Nanum Gothic",sans-serif; font-weight:800; font-size:clamp(14px,1.9vw,17px); margin-bottom:3px;}
.card .cb{font-size:clamp(12.5px,1.6vw,15px); color:var(--ink-soft); line-height:1.55;}

/* 쉬운 말 사전 */
.gloss{margin-top:22px; display:grid; grid-template-columns:repeat(2,1fr); gap:8px 22px;}
.gloss div{font-size:clamp(12px,1.5vw,14px); color:var(--ink-soft);}
.gloss b{color:var(--navy); font-family:"Nanum Gothic",sans-serif; font-weight:800;}

/* 주의 / 확인 배너 */
.note{margin-top:20px; padding:12px 16px; border-radius:10px; font-size:clamp(12.5px,1.6vw,15px);}
.note.warn{background:color-mix(in srgb,var(--coral) 12%,transparent); color:var(--coral);}
.note.ok{background:color-mix(in srgb,var(--mint) 14%,transparent); color:var(--mint);}
.note b{font-family:"Nanum Gothic",sans-serif; font-weight:800;}

/* 차트 액자 */
.figure{margin-top:24px; background:var(--slide); border:1px solid var(--line); border-radius:14px; padding:clamp(14px,2vw,22px); box-shadow:var(--shadow);}
.figure figcaption{font-size:clamp(11px,1.4vw,13px); color:var(--ink-mute); margin-bottom:12px; font-family:"Nanum Gothic",sans-serif; font-weight:800; letter-spacing:.02em;}
.figure svg{display:block; width:100%; height:auto; overflow:visible;}
.legend{display:flex; gap:18px; flex-wrap:wrap; margin-top:12px; font-size:clamp(11px,1.4vw,13px); color:var(--ink-soft);}
.legend span{display:inline-flex; align-items:center; gap:7px;}
.legend i{width:12px; height:12px; border-radius:3px; display:inline-block;}
.sw-a{background:var(--sky);} .sw-b{background:var(--ink-mute);}
.sw-coral{background:var(--coral);} .sw-gold{background:var(--gold);}

/* SVG 안 텍스트 */
.c-tick{fill:var(--ink-mute); font-size:12px;}
.c-lbl{fill:var(--ink-soft); font-size:13px; font-family:"Nanum Gothic",sans-serif; font-weight:800;}
.c-val{fill:var(--ink); font-size:13px; font-weight:700; font-family:"IBM Plex Mono",monospace;}
.c-val.a{fill:var(--sky);} .c-val.b{fill:var(--ink-mute);}
.c-grid{stroke:var(--grid); stroke-width:1;}
.c-axis{stroke:var(--line); stroke-width:1.5;}
.d-line{stroke:var(--line); stroke-width:3;}
.d-a{fill:var(--sky);} .d-b{fill:var(--ink-mute);}
.bar-a{fill:var(--sky);} .bar-b{fill:var(--ink-mute);}
.slope-line{fill:none; stroke-width:2.5;}

/* 타이틀 슬라이드 */
.title-slide{background:linear-gradient(135deg,var(--navy) 0%,#1c2148 60%,#141833 100%); color:#fff;}
.title-slide .eyebrow{color:#B9C2FF;}
.title-slide .eyebrow::before{background:var(--coral);}
.title-slide h1{color:#fff; font-size:clamp(30px,6.4vw,60px);}
.title-slide .sub{color:#C7CCF2; font-size:clamp(14px,2vw,19px); margin-top:16px;}
.title-slide .kpis{margin-top:38px;}
.title-slide .kpi{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); box-shadow:none;}
.title-slide .kpi .v{color:#fff;}
.title-slide .kpi .k{color:#C7CCF2;}
.title-slide .foot{margin-top:38px; color:#9AA0CF; font-size:13px;}

/* 마지막 슬라이드 */
.end-slide{background:linear-gradient(135deg,var(--navy),#141833); color:#fff; text-align:center; align-items:center;}
.end-slide h1{color:#fff;}
.end-slide .kpis{max-width:820px;}

/* ============ 내비게이션 UI ============ */
.progress{position:fixed; top:0; left:0; height:4px; background:var(--coral); width:0; transition:width .3s ease; z-index:20;}
.hud{
  position:fixed; bottom:18px; right:22px; z-index:20;
  display:flex; align-items:center; gap:10px;
  font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink-mute);
}
.hud button{
  background:var(--slide); border:1px solid var(--line); color:var(--ink-soft);
  width:34px; height:34px; border-radius:9px; cursor:pointer; font-size:15px; line-height:1;
  display:grid; place-items:center;
}
.hud button:hover{border-color:var(--navy); color:var(--ink);}
.hud button:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}
.counter{min-width:62px; text-align:center;}
.theme-btn{position:fixed; top:16px; right:22px; z-index:20;
  background:var(--slide); border:1px solid var(--line); color:var(--ink-soft);
  padding:6px 11px; border-radius:9px; cursor:pointer; font:inherit; font-size:12px;}
.theme-btn:hover{border-color:var(--navy); color:var(--ink);}

.hint{position:fixed; bottom:18px; left:22px; z-index:20; font-size:12px; color:var(--ink-mute);}
@media (max-width:640px){ .hint{display:none;} }

/* 오버뷰 (모아보기) */
.overview{position:fixed; inset:0; z-index:30; background:var(--bg); padding:clamp(20px,4vw,48px); overflow:auto; display:none;}
.overview.on{display:block;}
.overview h2{margin-bottom:20px;}
.ov-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px;}
.ov-item{text-align:left; background:var(--slide); border:1px solid var(--line); border-radius:10px; padding:14px; cursor:pointer; font:inherit; color:var(--ink);}
.ov-item:hover{border-color:var(--navy);}
.ov-item .on-n{font-family:"IBM Plex Mono",monospace; color:var(--ink-mute); font-size:12px;}
.ov-item .on-t{font-family:"Nanum Gothic",sans-serif; font-weight:800; font-size:14px; margin-top:5px; line-height:1.35;}

/* ============ 인쇄 (PDF 내보내기) ============ */
@media print{
  @page{size:1280px 720px; margin:0;}
  body{overflow:visible;}
  .progress,.hud,.theme-btn,.hint,.overview{display:none !important;}
  #deck{position:static;}
  .slide{position:static; break-after:page; height:720px; width:1280px; display:flex;}
  .slide[hidden]{display:flex !important;}
  .slide .anim{animation:none !important;}
}

@media (max-width:720px){
  .kpis,.cards.c2,.cards.c3,.gloss{grid-template-columns:1fr;}
  .slide{padding:64px 22px;}
}