@font-face{font-family:Pretendard;font-weight:500;font-display:swap;src:url(fonts/pretendard-500.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:700;font-display:swap;src:url(fonts/pretendard-700.woff2) format("woff2")}
@font-face{font-family:Pretendard;font-weight:800;font-display:swap;src:url(fonts/pretendard-800.woff2) format("woff2")}
@font-face{font-family:Jua;font-weight:400;font-display:swap;src:url(fonts/jua-sub.woff2) format("woff2")}
:root{
  --ink-line:#060E3E;--ink:#141C4A;--sub:#48536E;--mute:#54637F;
  --apron:#2A4672;--blue:#2A62A6;--hood:#3E82BE;--shade:#A6C2DA;--blue-bg:#E4EFF9;--blue-bg2:#F1F6FB;
  --orange:#FA7632;--orange-ink:#A8480F;--warm-bg:#FFF3EA;--warm-line:#F6C9A8;--blush:#FEAEAA;
  --bg:#FEFEFE;--card:#FFFFFF;--line:#D5E1EE;--mark-chip:#D92A26;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--ink);font:500 17px/1.75 Pretendard,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3{margin:0;color:var(--ink);letter-spacing:-.02em;font-weight:800}
h1{font-size:30px;line-height:1.3}
h2{font-size:23px;line-height:1.35}
h3{font-size:19px;line-height:1.4;font-weight:700}
p{margin:0 0 12px}
ul,ol{margin:0;padding:0;list-style:none}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue)}
b{font-weight:700}
a:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.skip{position:absolute;left:8px;top:-64px;z-index:20;background:var(--apron);color:#fff;padding:12px 16px;border-radius:10px;font-weight:700}
.skip:focus{top:6px}

.hdr{position:sticky;top:0;z-index:10;background:#fff;border-bottom:1.5px solid var(--line)}
.hdr-in{height:60px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.logo{display:flex;align-items:center;gap:8px;color:var(--ink-line);text-decoration:none;min-height:48px;font:400 18px/1.2 Jua,Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;white-space:nowrap}
.logo img{width:40px;height:40px;border-radius:50%;background:#fff;border:1.5px solid var(--ink-line);flex:none}
.logo i{font-style:normal;box-shadow:inset 0 -3px 0 var(--orange)}
.nav{display:flex;align-items:center;min-height:48px;padding:0 4px;font-size:16px;font-weight:700;color:var(--apron);text-decoration:none;white-space:nowrap}
.nav:active{color:var(--ink-line)}

.ftr{background:var(--blue-bg2);border-top:1.5px solid var(--line);padding:32px 0;font-size:16px;line-height:1.65;color:var(--sub)}
.ftr p{margin:0}
.ftr-n{font-weight:700;color:var(--ink);margin-bottom:4px!important}

.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:14px 20px;border-radius:10px;background:var(--apron);border:1.5px solid var(--apron);color:#fff;font-size:17px;font-weight:700;line-height:1.3;text-decoration:none}
.btn:hover,.btn:active{background:var(--ink-line);border-color:var(--ink-line)}
.btn-2{background:#fff;color:var(--apron)}
.btn-2:hover{background:#fff;border-color:var(--ink-line);color:var(--ink-line)}
.btn-2:active{background:var(--blue-bg);border-color:var(--apron);color:var(--apron)}
.label{display:inline-block;background:var(--apron);color:#fff;font-size:16px;font-weight:800;line-height:1.4;padding:4px 8px;border-radius:6px}

.hero{background:var(--blue-bg2);border-bottom:1.5px solid var(--line);padding:24px 0 32px}
.hero h1{margin:12px 0}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 68%,var(--blush) 68%)}
.hero-sub{color:var(--sub);margin-bottom:16px}
.checks{margin-top:16px}
.checks li{display:flex;gap:8px;align-items:flex-start;font-size:16px;font-weight:700;line-height:1.4;padding:4px 0}
.ck{flex:none}
.hero-pose{width:240px;margin:24px auto 0}

.sec{padding:48px 0}
.sec-lead{color:var(--sub);margin:4px 0 16px}
.sec-how{background:#fff;padding-top:0}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.card{display:flex;flex-direction:column;background:var(--card);border:1.5px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--apron)}
.card:active{background:var(--blue-bg2)}
.card-h{position:relative;height:132px;background:var(--blue-bg)}
.card-h span{position:absolute;left:16px;top:12px;font-size:16px;font-weight:800;color:var(--blue);line-height:1.4}
.card-h img{position:absolute;right:12px;bottom:0;width:auto;height:120px;max-width:120px;object-fit:contain;object-position:right bottom}
.card-b{display:flex;flex-direction:column;flex:1;padding:16px}
.card-b h3{font-size:20px;font-weight:800;margin-bottom:8px}
.card-b p{font-size:16px;line-height:1.65}
.card-b b{font-weight:800}
.chips{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.chips li{background:var(--blue-bg2);color:var(--ink);font-size:16px;font-weight:700;line-height:1.4;padding:4px 8px;border-radius:6px}
.pick{font-size:17px!important;font-weight:800;color:var(--apron);margin-bottom:6px}
.fit{color:var(--sub);margin-bottom:12px}
.lic{margin-top:16px;font-size:16px;color:var(--sub);line-height:1.65}
.gloss{margin-top:16px}
.gloss dl{margin:0}
.gloss dl div{padding:6px 0}
.gloss dt{font-weight:800;color:var(--ink)}
.gloss dd{margin:0}
.sec table{margin-bottom:24px}
.go{margin-top:auto;font-weight:700;color:var(--apron);font-size:16px;line-height:1.4}
.card.small .card-h{height:96px}
.card.small .card-h img{height:88px;max-width:96px}
.card.small h3{font-size:19px}
.cards-s{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px}

.how{display:flex;align-items:center;gap:16px;margin:16px 0}
.how>img{width:112px;flex:none}
.how-l{flex:1;min-width:0}
.how-l li{display:flex;gap:8px;align-items:flex-start;font-size:16px;line-height:1.65;padding:6px 0}
.num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--apron);color:#fff;font-size:16px;font-weight:800;line-height:28px;text-align:center}
.legend{display:flex;flex-direction:column;gap:8px;margin:16px 0;font-size:16px;font-weight:700;line-height:1.4}
.legend p{display:flex;align-items:center;gap:8px;margin:0}
.legend .head{width:28px;height:28px}
.head{flex:none;border-radius:50%;background:#fff;border:1.5px solid var(--shade)}

.cover{background:var(--blue-bg2);padding:32px 0}
.cover h1{font-size:28px;margin:12px 0 8px}
.cover-sub{color:var(--sub);margin-bottom:12px}
.hook{background:#fff;border-left:4px solid var(--orange);padding:12px 14px;margin-bottom:16px}
.hook b{font-weight:800}
.cover-f{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.meta{margin:0;font-size:16px;line-height:1.5;color:var(--mute);min-width:0}
.cover-pose{width:96px;flex:none}

.toc-m{margin:16px 0 0;border:1.5px solid var(--line);border-radius:12px;background:#fff}
.toc-m summary{min-height:48px;display:flex;align-items:center;padding:0 16px;font-size:16px;font-weight:700;color:var(--apron);cursor:pointer}
.toc-m ul{border-top:1px solid var(--line);padding:4px 0}
.toc-m a,.toc a{display:flex;align-items:center;min-height:48px;padding:6px 16px;font-size:16px;line-height:1.4;color:var(--ink);text-decoration:none}
.toc-m a:active,.toc a:active{background:var(--blue-bg)}
.toc{display:none}

.part{margin-top:48px;scroll-margin-top:72px}
.tag{display:block;font-size:16px;font-weight:700;line-height:1.4;color:var(--blue);margin-bottom:4px}
.part>h2{margin-bottom:12px}
.quote{background:var(--blue-bg2);border-left:4px solid var(--apron);padding:12px 14px;margin:12px 0;font-size:16px;line-height:1.65;font-weight:700}
.src{font-size:16px;color:var(--mute);line-height:1.5;margin-top:8px}
.note{background:#fff;border:1.5px dashed var(--shade);border-radius:12px;padding:12px 16px;font-size:16px;line-height:1.65;margin-top:16px}
.order-t{margin:16px 0 8px}
.order a{display:flex;gap:8px;align-items:center;min-height:48px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:16px;line-height:1.4}
.order b{color:var(--blue);font-weight:800;flex:none}
.order a:active{background:var(--blue-bg2)}
.plain{padding-left:20px;margin:8px 0;list-style:disc}
.plain li{margin:6px 0}
.part>p+table,table{margin-top:8px}

table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;font-size:16px;line-height:1.65}
th,td{padding:12px;text-align:left;vertical-align:top;border-top:1px solid var(--line);font-weight:500}
tbody th{width:46%;background:var(--blue-bg2);font-weight:700}
thead th{background:var(--apron);color:#fff;font-weight:700;border-top:0}
thead th:first-child{width:46%}
th,td{padding:12px 10px}
.nw{white-space:nowrap}

.unit{margin-top:48px;scroll-margin-top:72px}
.uh{background:var(--blue-bg);padding:14px 16px;border-radius:12px}
.uno{display:block;font-size:16px;font-weight:800;color:var(--blue);line-height:1.4}
.lead{margin:12px 0 16px}
.step{background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:16px;margin-top:16px}
.step:first-of-type{margin-top:0}
.sh{display:flex;align-items:flex-start;gap:8px;margin-bottom:12px}
.badge{flex:none;background:var(--apron);color:#fff;font-size:16px;font-weight:800;line-height:1.4;padding:4px 8px;border-radius:6px}
.sh h3{padding-top:2px}
.shot{display:block;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;margin:12px 0}
.step .shot{margin-top:0}
.shot:hover{border-color:var(--apron)}
.shot:active{border-color:var(--ink-line)}
.caps li{display:flex;gap:8px;align-items:flex-start;font-size:16px;line-height:1.65;margin-top:8px}
.n{flex:none;width:28px;height:28px;border-radius:50%;background:var(--mark-chip);color:#fff;font-size:16px;font-weight:800;line-height:28px;text-align:center}
.step .plain{font-size:16px;line-height:1.65;margin-bottom:0}
.warn{background:var(--blue-bg);border-left:4px solid var(--hood);border-radius:0 12px 12px 0;padding:14px 16px;margin-top:12px;font-size:16px;line-height:1.65}
.warn-h{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--blue);font-weight:800;line-height:1.4}
.warn-h .head{width:40px;height:40px}
.warn p{margin:0}

.say{display:flex;align-items:flex-end;gap:12px;margin:16px 0}
.say-a{flex-direction:row-reverse}
.ava{width:72px;flex:none}
.bubble{position:relative;max-width:520px;min-width:0;border-radius:12px;padding:12px 14px;font-size:16px;line-height:1.65;border:1.5px solid}
.bubble p{margin:0}
.who{display:block;font-size:16px;font-weight:800;line-height:1.4}
.bubble::before{content:"";position:absolute;bottom:18px;width:10px;height:10px;transform:rotate(45deg);border:solid;border-width:0}
.say-n .bubble{background:var(--warm-bg);border-color:var(--warm-line)}
.say-n .who{color:var(--orange-ink)}
.say-n .bubble::before{left:-6.5px;background:var(--warm-bg);border-color:var(--warm-line);border-width:0 0 1.5px 1.5px}
.say-a .bubble{background:var(--blue-bg);border-color:var(--shade)}
.say-a .who{color:var(--blue)}
.say-a .bubble::before{right:-6.5px;background:var(--blue-bg);border-color:var(--shade);border-width:1.5px 1.5px 0 0}

.closing{margin-top:48px;text-align:center}
.closing img{width:200px;margin:16px auto 0}
.next{margin:48px 0}
.nf{text-align:center}
.nf img{width:160px;margin:0 auto 16px}
.nf h1{font-size:28px;margin-bottom:8px}
.nf .btn{max-width:320px;margin:16px auto 0}

@media(min-width:900px){
  .wrap{padding:0 24px}
  h1{font-size:44px}
  h2{font-size:28px}
  h3{font-size:20px}
  .logo{font-size:20px}
  .sec{padding:72px 0}
  .sec-how{padding-top:0}
  .btn{width:auto;display:inline-flex}
  .hero{padding:72px 0}
  .hero-in{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
  .hero-pose{width:400px;margin:0 auto}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards-s{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how{gap:24px}
  .how>img{width:140px}
  .cover h1{font-size:38px}
  .cover-pose{width:160px}
  .toc-m{display:none}
  .gl{display:grid;grid-template-columns:232px minmax(0,720px);gap:40px;justify-content:center;align-items:start}
  tbody th,thead th:first-child{width:32%}
  th,td{padding:12px}
  .cover-f{align-items:flex-end}
  .toc{display:block;position:sticky;top:84px;margin-top:48px;max-height:calc(100vh - 100px);overflow-y:auto;border-left:2px solid var(--line)}
  .toc a{padding:4px 12px}
  .toc a:hover{color:var(--blue)}
  .step{padding:20px}
  .ava{width:96px}
}

@media print{
  @page{size:A4}
  html,body{background:#fff;font-size:11pt;line-height:1.65}
  .hdr,.ftr,.skip,.toc-m,.toc,.pdfbtn,.next{display:none!important}
  .wrap{max-width:none;padding:0}
  .gl{display:block}
  .cover{padding:12mm 8mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cover h1{font-size:26pt}
  .cover-pose{width:110px}
  .part,.unit{margin-top:8mm}
  .unit{break-before:page}
  .uh,.sh,h2,h3{break-after:avoid}
  .step{break-inside:avoid;margin-top:5mm}
  .say,.warn,.quote,.note,tr,.closing,.gloss dl div{break-inside:avoid}
  .gloss{break-inside:auto}
  .shot{display:block;text-align:center;border-radius:4px}
  .shot img{display:inline-block;width:auto;max-width:100%;max-height:135mm}
  .step .shot{margin-bottom:3mm}
  .part .shot img{max-height:90mm}
  .ava{width:56px}
}

/* 게재 예시 · 카드 · 간격 */
.cover-big{font-size:clamp(30px,5vw,46px);font-weight:800;line-height:1.3;color:var(--ink);margin:0 0 28px;word-break:keep-all}
.example{margin:0 0 32px;max-width:560px}
.example figcaption{font-size:18px;font-weight:800;color:var(--blue);margin-bottom:10px}
.example .shot{margin:0;background:#fff}
.example img{display:block;width:100%;height:auto}
.card-type{display:block;font-size:16px;font-weight:800;color:var(--blue);margin-bottom:6px}
.card-b h3{word-break:keep-all;margin-bottom:16px}
.card-ex{aspect-ratio:4/3;border:1.5px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;margin-bottom:16px}
.card-ex img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.card-ex.place-search img{object-position:top}
.card-ex.digital-ooh{background:#141c26}
.card-ex.digital-ooh img{object-fit:contain}
.card .go{margin-top:auto}
@media screen{
  .sec{padding:80px 0}
  .cover{padding:56px 0}
  .part,.unit{margin-top:96px}
  .step{margin-top:32px;padding:24px}
  .step:first-of-type{margin-top:24px}
  .say{margin-top:28px;margin-bottom:28px}
  .part h2,.unit h2{margin-bottom:20px}
  .doc table,.doc .plain,.doc .note{margin-top:20px}
  .closing,.next{margin-top:96px}
  .cards{gap:24px}
}
@media print{.example{max-width:380px}}

/* 메인 1번 자료 크게 (1 / 2·3·4) */
.card.feature{border-color:var(--apron)}
.card.feature .card-h{height:220px}
.card.feature .card-h img{left:50%;right:auto;bottom:12px;transform:translateX(-50%);height:auto;width:230px;max-width:none}
.card.feature .card-b h3{font-size:24px;line-height:1.35}
.card.feature .card-ex{aspect-ratio:4/3}
.card.feature .card-ex img{object-fit:contain;object-position:center top}
@media screen and (min-width:900px){
  .cards .card.feature{grid-column:1/-1;display:grid;grid-template-columns:280px minmax(0,1fr)}
  .card.feature .card-h{height:auto;min-height:100%}
  .card.feature .card-h span{left:24px;top:24px;font-size:18px}
  .card.feature .card-h span{z-index:1}
  .card.feature .card-h img{left:50%;right:auto;top:54%;bottom:auto;transform:translate(-50%,-50%);width:calc(100% - 24px);max-width:none;height:auto}
  .card.feature .card-b{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-rows:auto 1fr auto;column-gap:40px;padding:32px}
  .card.feature .card-type{grid-column:1;font-size:18px;margin-bottom:8px}
  .card.feature .card-b h3{grid-column:1;font-size:32px;margin-bottom:16px}
  .card.feature .card-ex{grid-column:2;grid-row:1/4;margin-bottom:0}
  .card.feature .go{grid-column:1;font-size:18px}
}