/* 올핏수학코칭 사이트 공통 스타일 — 마스터 팔레트(딥틸·카멜·골드·크림), 배곧은 블루 라인 */
:root{
  --bg:#ffffff; --band:#F5EDE0; --surface:#ffffff; --fg:#1E2A2A; --muted:#5F6E6C; --line:#E3D9C8;
  --ocean:#003B41; --ocean-deep:#0B5560; --amber:#C99A4E; --amber-ink:#8A6532; --camel:#CD9B6A;
  --kakao:#FEE500; --kakao-ink:#191919; --teal:#003B41; --paper:#FFFDF7; --paper-line:#E3D9C8; --pen:#1F3A3A; --red:#C8553D;
  --naver:#03C75A;
  --font-head:"Gothic A1","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-body:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-pen:"Nanum Pen Script","Noto Sans KR",cursive;
  --font-serif:"Gowun Batang","Noto Serif KR",serif;
}
/* 배곧 라인: 오션블루 · 앰버 · 스카이크림 */
.line-baegot{--band:#E2EEF3; --line:#CBDCE5; --ocean:#11587A; --ocean-deep:#0C3F58; --amber:#E9BC63; --amber-ink:#8A6A1E; --camel:#E9BC63; --teal:#11587A; --muted:#5A6B78; --fg:#14232E}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:16px;line-height:1.75;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--font-head);text-wrap:balance;margin:0;line-height:1.25}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band{background:var(--band)}
section{padding-block:clamp(48px,7vw,88px)}
.eyebrow{font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ocean);display:flex;align-items:center;gap:12px;margin-bottom:16px}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--amber)}
.h2{font-size:clamp(24px,3.2vw,36px);font-weight:900;letter-spacing:-.01em;margin-bottom:12px}
.h3{font-size:clamp(19px,2.2vw,24px);font-weight:900}
.lead{color:var(--muted);font-size:16.5px;max-width:38em}
.center{text-align:center}.center .eyebrow{justify-content:center}.center .eyebrow::before{display:none}.center .lead{margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-head);font-weight:800;font-size:15px;padding:14px 22px;border-radius:999px;text-decoration:none;border:1.5px solid transparent;transition:transform .15s ease,background .15s ease;cursor:pointer;line-height:1.2}
.btn:hover{transform:translateY(-1px)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.btn-primary{background:var(--ocean);color:#fff}
.btn-ghost{border-color:var(--line);color:var(--fg);background:var(--surface)}
.btn-amber{background:var(--amber);color:#2B1E05}
.btn-kakao{background:var(--kakao);color:var(--kakao-ink);border-color:var(--kakao)}
.btn-kakao::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--kakao-ink);-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.7 6.7L5.6 21l4.3-2.6c.7.1 1.4.2 2.1.2 5.5 0 10-3.6 10-8S17.5 3 12 3z"/></svg>') center/contain no-repeat;mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.7 6.7L5.6 21l4.3-2.6c.7.1 1.4.2 2.1.2 5.5 0 10-3.6 10-8S17.5 3 12 3z"/></svg>') center/contain no-repeat}
.btn-naver{background:var(--naver);color:#fff}
.btn-lg{padding:17px 28px;font-size:17px}
.btn-sm{padding:10px 16px;font-size:14px}
.more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:800;font-size:14px;color:var(--ocean);text-decoration:none;border-bottom:2px solid var(--amber);padding-bottom:2px}
.more:hover{border-color:var(--ocean)}

/* header */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.logo img{height:30px;width:auto}
.gnb{display:flex;gap:4px;margin:0;padding:0}
.gnb>li{position:relative}
.gnb>li>a{display:block;padding:10px 14px;font-family:var(--font-head);font-weight:800;font-size:14.5px;text-decoration:none;color:var(--fg);border-radius:8px}
.gnb>li>a:hover,.gnb>li>a.on{color:var(--ocean);background:var(--band)}
.gnb .sub{position:absolute;left:0;top:100%;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 16px 40px -20px rgba(0,59,65,.35);display:none;z-index:60}
.gnb>li:hover .sub,.gnb>li:focus-within .sub{display:block}
.gnb .sub a{display:block;padding:9px 12px;font-size:13.5px;text-decoration:none;color:var(--fg);border-radius:8px;white-space:nowrap}
.gnb .sub a:hover{background:var(--band);color:var(--ocean)}
.util{display:flex;align-items:center;gap:8px}
.util .btn{padding:10px 16px;font-size:14px}
.burger{display:none;border:1px solid var(--line);background:var(--surface);border-radius:10px;width:42px;height:40px;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.burger span{display:block;width:18px;height:2px;background:var(--fg)}
@media (max-width:960px){.gnb{display:none}.burger{display:flex}.util .btn-kakao{display:none}}
.mnav{display:none;position:fixed;inset:0;z-index:70;background:rgba(0,30,34,.45)}
.mnav.on{display:block}
.mnav .panel{position:absolute;top:0;right:0;bottom:0;width:min(84vw,340px);background:var(--surface);padding:18px 18px calc(24px + env(safe-area-inset-bottom,0px));overflow:auto;display:flex;flex-direction:column;gap:6px}
.mnav .panel .close{align-self:flex-end;border:0;background:var(--band);border-radius:999px;width:36px;height:36px;font-size:18px;cursor:pointer;margin-bottom:8px}
.mnav .grp{border-top:1px solid var(--line);padding:10px 0 4px}
.mnav .grp>a{display:block;font-family:var(--font-head);font-weight:900;font-size:17px;text-decoration:none;padding:8px 4px}
.mnav .grp .sub a{display:block;padding:7px 4px 7px 14px;font-size:14.5px;color:var(--muted);text-decoration:none}
.mnav .ctas{display:grid;gap:8px;margin-top:auto;padding-top:16px}
.mnav .ctas .btn{width:100%}

/* hero slider */
.slider{position:relative;overflow:hidden;background:var(--teal)}
.slides{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.slide{flex:0 0 100%;min-width:0;position:relative;min-height:clamp(420px,52vw,560px);display:flex;align-items:center;color:#fff;background-size:cover;background-position:center}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,40,45,.9) 0%,rgba(0,40,45,.72) 45%,rgba(0,40,45,.25) 100%)}
.slide.blue::before{background:linear-gradient(90deg,rgba(8,56,80,.92) 0%,rgba(8,56,80,.72) 45%,rgba(8,56,80,.25) 100%)}
.slide.cream{color:var(--fg)}
.slide.cream::before{background:linear-gradient(90deg,rgba(245,237,224,.96) 0%,rgba(245,237,224,.86) 50%,rgba(245,237,224,.35) 100%)}
.slide .wrap{position:relative;width:100%;padding-block:48px}
.slide .tag{display:inline-block;font-family:var(--font-head);font-weight:800;font-size:12.5px;letter-spacing:.1em;padding:6px 12px;border-radius:999px;background:var(--amber);color:#2B1E05;margin-bottom:16px}
.slide h2{font-size:clamp(28px,4.6vw,52px);font-weight:900;letter-spacing:-.02em;line-height:1.15;max-width:14em}
.slide p{margin-top:14px;font-size:clamp(15px,1.6vw,18px);max-width:30em;opacity:.95}
.slide .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.slide .facts span{font-family:var(--font-head);font-weight:700;font-size:13px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35)}
.slide.cream .facts span{background:rgba(0,59,65,.08);border-color:rgba(0,59,65,.25)}
.slide .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.slide .cta .btn-ghost{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}
.slide.cream .cta .btn-ghost{border-color:var(--line);color:var(--fg);background:var(--surface)}
.dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px;z-index:2}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.dots button.on{background:var(--amber);width:26px;border-radius:999px}
.arrows button{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.25);color:#fff;font-size:20px;cursor:pointer}
.arrows .prev{left:12px}.arrows .next{right:12px}
@media (max-width:700px){.arrows{display:none}}

/* quick menu */
.quick{padding-block:22px;border-bottom:1px solid var(--line)}
.quick ul{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media (max-width:860px){.quick ul{grid-template-columns:repeat(3,1fr)}}
.quick a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 6px;border-radius:14px;text-decoration:none;font-family:var(--font-head);font-weight:800;font-size:13px;color:var(--fg);text-align:center}
.quick a:hover{background:var(--band)}
.quick .ic{width:48px;height:48px;border-radius:14px;background:var(--band);display:grid;place-items:center;color:var(--ocean)}
.quick .ic svg{width:24px;height:24px}

/* campus cards */
.campus{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:860px){.campus{grid-template-columns:1fr}}
.camp{position:relative;border-radius:20px;overflow:hidden;min-height:300px;display:flex;align-items:flex-end;color:#fff;text-decoration:none;background-size:cover;background-position:center}
.camp::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,40,45,.92) 0%,rgba(0,40,45,.45) 55%,rgba(0,40,45,.1) 100%)}
.camp.blue::before{background:linear-gradient(to top,rgba(8,56,80,.94) 0%,rgba(8,56,80,.45) 55%,rgba(8,56,80,.1) 100%)}
.camp .in{position:relative;padding:26px}
.camp .k{font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.12em;color:var(--amber)}
.camp h3{font-size:26px;font-weight:900;margin:6px 0 8px}
.camp p{font-size:14.5px;opacity:.92;max-width:30em}
.camp .go{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-family:var(--font-head);font-weight:800;font-size:14px;border-bottom:2px solid var(--amber);padding-bottom:2px}
.camp:hover .go{border-color:#fff}

/* strengths with diagrams */
.str{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.str{grid-template-columns:1fr}}
.str .card{display:flex;flex-direction:column;gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;min-width:0}
.card h3{font-size:19px;font-weight:800}
.card p{color:var(--muted);font-size:15px}
.diag{background:var(--band);border-radius:12px;padding:16px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:96px}
.diag .n{font-family:var(--font-head);font-weight:900;font-size:13px;padding:8px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--fg);white-space:nowrap}
.diag .n.k{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.diag .n.a{background:var(--amber);color:#2B1E05;border-color:var(--amber)}
.diag .ar{color:var(--amber-ink);font-weight:900}
.diag .x{color:var(--red);font-family:var(--font-pen);font-size:26px;line-height:1}

/* video */
.vids{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:980px){.vids{grid-template-columns:repeat(2,1fr)}}
.vid{display:block;text-decoration:none;color:inherit;min-width:0}
.vid .th{position:relative;border-radius:14px;overflow:hidden;background:#111;aspect-ratio:16/9}
.vid.shorts .th{aspect-ratio:9/12}
.vid .th img{width:100%;height:100%;object-fit:cover}
.vid .th::after{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,.55) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M8 5v14l11-7z"/></svg>') center/26px no-repeat;border:2px solid rgba(255,255,255,.8)}
.vid .t{font-family:var(--font-head);font-weight:800;font-size:14.5px;margin-top:10px;line-height:1.4}
.vid .s{font-size:12.5px;color:var(--muted);margin-top:3px}
.vids-wide{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:14px;align-items:start}
@media (max-width:980px){.vids-wide{grid-template-columns:repeat(2,1fr)}}

/* review cards */
.rev-top{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.rev-top{grid-template-columns:1fr}}
.rev{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 22px 18px;min-width:0;display:flex;flex-direction:column;gap:12px;position:relative}
.rev .tagline{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:800;font-size:11.5px;letter-spacing:.08em;color:var(--ocean);background:var(--band);padding:4px 10px;border-radius:999px;align-self:flex-start}
.rev p{font-size:15.5px;line-height:1.8;color:var(--fg);flex:1}
.rev .meta{font-size:12.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:10px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.rev .meta b{font-family:var(--font-head);color:var(--fg);font-weight:700}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
@media (max-width:980px){.rev-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.rev-grid{grid-template-columns:1fr}}
.rev-grid .rev{padding:20px 20px 16px}
.rev-grid .rev p{font-size:14.5px;line-height:1.7}
.rev-kw{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.rev-kw span{font-family:var(--font-head);font-weight:800;font-size:13px;color:var(--ocean);background:var(--band);border:1px solid var(--line);padding:7px 12px;border-radius:999px}
.rev-kw span b{color:var(--amber-ink);margin-left:6px;font-variant-numeric:tabular-nums}
.rev-src{margin-top:14px;font-size:12.5px;color:var(--muted)}

/* news */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){.news{grid-template-columns:1fr}}
.news a{display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--surface);text-decoration:none;color:inherit;min-width:0}
.news a:hover{border-color:var(--ocean)}
.news .k{font-family:var(--font-head);font-weight:800;font-size:11.5px;letter-spacing:.1em;color:var(--amber-ink)}
.news h3{font-size:17px;font-weight:800}
.news p{font-size:14px;color:var(--muted)}
.news time{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:auto}

/* contact center */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:860px){.contact{grid-template-columns:1fr}}
.contact .card{display:flex;flex-direction:column;gap:10px}
.contact .card h3{display:flex;align-items:center;gap:8px}
.contact .pill{font-family:var(--font-head);font-weight:800;font-size:11.5px;letter-spacing:.08em;padding:4px 10px;border-radius:999px;background:var(--ocean);color:#fff}
.contact .card.blue .pill{background:#11587A}
.contact .tel{font-family:var(--font-head);font-weight:900;font-size:26px;letter-spacing:-.01em;color:var(--ocean);font-variant-numeric:tabular-nums;user-select:all}
.contact .card.blue .tel{color:#11587A}
.contact .row{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.contact small{color:var(--muted);font-size:13px}

/* sns */
.sns{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:860px){.sns{grid-template-columns:repeat(2,1fr)}}
.sns a{display:flex;align-items:center;gap:12px;padding:16px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:inherit;background:var(--surface);min-width:0}
.sns a:hover{border-color:var(--ocean)}
.sns .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-family:var(--font-head);font-weight:900;font-size:13px;flex:none}
.sns b{font-family:var(--font-head);font-size:14px;display:block}
.sns small{color:var(--muted);font-size:12.5px}

/* page hero (subpages) */
.phero{background:var(--teal);color:#F5EDE0;padding-block:clamp(40px,6vw,72px)}
.line-baegot .phero{background:#11587A}
.phero .eyebrow{color:var(--amber)}
.phero h1{font-size:clamp(30px,4.4vw,48px);font-weight:900;letter-spacing:-.02em;line-height:1.15}
.phero p{margin-top:14px;max-width:36em;opacity:.92;font-size:clamp(15px,1.5vw,17px)}
.phero .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.phero .btn-ghost{background:transparent;border-color:rgba(245,237,224,.5);color:#F5EDE0}
.subnav{position:sticky;top:66px;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.subnav ul{display:flex;gap:4px;overflow-x:auto;padding-block:8px;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block;padding:8px 12px;font-family:var(--font-head);font-weight:800;font-size:13.5px;white-space:nowrap;text-decoration:none;color:var(--muted);border-radius:999px}
.subnav a:hover{background:var(--band);color:var(--ocean)}

/* ---- online campus content (from v1) ---- */
.glance{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
@media (max-width:980px){.glance{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.glance{grid-template-columns:1fr}}
.glance .g{padding:18px 20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.glance .g:nth-child(4n){border-right:0}
.glance .g:nth-child(n+5){border-bottom:0}
@media (max-width:980px){.glance .g:nth-child(4n){border-right:1px solid var(--line)}.glance .g:nth-child(2n){border-right:0}.glance .g:nth-child(n+5){border-bottom:1px solid var(--line)}.glance .g:nth-child(n+7){border-bottom:0}}
@media (max-width:520px){.glance .g{border-right:0!important;border-bottom:1px solid var(--line)!important}.glance .g:last-child{border-bottom:0!important}}
.glance b{display:block;font-family:var(--font-head);font-size:12px;letter-spacing:.1em;color:var(--amber-ink);margin-bottom:4px}
.glance span{font-size:14px;line-height:1.55;color:var(--fg)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (max-width:860px){.grid3,.grid2{grid-template-columns:1fr}}
.quote{font-family:var(--font-pen);font-size:26px;line-height:1.3;color:var(--ocean);margin-bottom:10px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:30px}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
.step{padding:26px 22px 28px;border-right:1px solid var(--line);min-width:0}
.step:last-child{border-right:0}
@media (max-width:860px){.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}}
.step .n{font-family:var(--font-head);font-weight:900;font-size:13px;color:var(--amber-ink);letter-spacing:.1em}
.step h3{font-size:21px;font-weight:900;margin:8px 0 10px}
.step p{color:var(--muted);font-size:15px}
.live{margin-top:30px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:860px){.live{grid-template-columns:1fr}}
.live .card h3{font-size:17px;margin-bottom:8px}
.live ul{padding-left:18px;color:var(--muted);font-size:15px;list-style:disc}
.live li{margin-bottom:6px}
.gallery{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;grid-template-rows:240px 240px;gap:12px;margin-top:30px}
.gallery figure{margin:0;min-width:0;border-radius:14px;overflow:hidden;position:relative;background:var(--band)}
.gallery figure:first-child{grid-row:span 2}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;font-family:var(--font-head);font-weight:800;font-size:13px;color:#fff;background:linear-gradient(to top,rgba(0,30,34,.78),transparent)}
.gallery figure.wide{grid-column:span 2}
@media (max-width:900px){.gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto}.gallery figure{aspect-ratio:4/3}.gallery figure:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}.gallery figure.wide{grid-column:span 1}}
.gallery-note,.phones-note{margin-top:12px;font-size:12.5px;color:var(--muted)}
.tl{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:32px;align-items:start}
@media (max-width:900px){.tl{grid-template-columns:1fr}}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media (max-width:520px){.shots{grid-template-columns:1fr}}
.shot{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0;box-shadow:0 14px 40px -24px rgba(12,63,88,.35)}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{font-family:var(--font-head);font-size:12.5px;font-weight:700;color:var(--muted);padding:10px 12px;border-top:1px solid var(--line)}
.shot figcaption b{color:var(--ocean)}
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;background:var(--line)}
.timeline li{position:relative;padding:0 0 24px 40px}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:4px;top:6px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--ocean)}
.timeline li.win::before{background:var(--amber);border-color:var(--amber)}
.timeline .t{font-family:var(--font-head);font-weight:900;font-size:20px;color:var(--ocean);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.timeline .t small{font-size:12px;font-weight:800;color:var(--amber-ink);margin-left:8px;letter-spacing:.06em}
.timeline h3{font-size:17px;font-weight:800;margin:4px 0 6px}
.timeline p{color:var(--muted);font-size:15px}
.timeline .pen-quote{font-family:var(--font-pen);font-size:24px;line-height:1.25;color:var(--red);margin-top:6px}
.rule{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){.rule{grid-template-columns:1fr}}
.rule .card{padding:20px 22px}.rule .card h3{font-size:16px}
.rule .no{font-family:var(--font-head);font-weight:900;font-size:12px;letter-spacing:.1em;color:var(--red);margin-bottom:6px}
.rule .yes{font-family:var(--font-head);font-weight:900;font-size:12px;letter-spacing:.1em;color:var(--ocean);margin-bottom:6px}
.sys{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:860px){.sys{grid-template-columns:1fr}}
.sys .item{padding:20px 0 0;border-top:2px solid var(--line);min-width:0}
.sys .item.key{border-top-color:var(--amber)}
.sys h3{font-size:17px;font-weight:800;margin-bottom:8px}
.sys p{color:var(--muted);font-size:15px}
.tw{overflow-x:auto;max-width:100%;margin-top:22px;border:1px solid var(--line);border-radius:14px}
table.cmp{width:100%;min-width:720px;border-collapse:collapse;font-size:14px;background:var(--surface)}
table.cmp th,table.cmp td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
table.cmp thead th{font-family:var(--font-head);font-size:12.5px;letter-spacing:.04em;color:var(--muted);background:var(--band)}
table.cmp tbody th{font-family:var(--font-head);font-weight:800;font-size:13.5px;width:22%;color:var(--fg)}
table.cmp td{color:var(--muted)}
table.cmp .us{background:rgba(0,59,65,.07);color:var(--fg);font-weight:500}
table.cmp thead th.us{color:var(--ocean);background:rgba(0,59,65,.12)}
table.cmp tr:last-child th,table.cmp tr:last-child td{border-bottom:0}
.boards{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
@media (max-width:860px){.boards{grid-template-columns:1fr}}
.board-shot{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-width:0;box-shadow:0 14px 40px -24px rgba(12,63,88,.35)}
.board-shot img{width:100%;height:auto;display:block}
.board-shot figcaption{font-size:14px;line-height:1.6;color:var(--muted);padding:12px 14px;border-top:1px solid var(--line)}
.board-shot figcaption b{font-family:var(--font-head);color:var(--ocean);margin-right:6px}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px;align-items:start}
@media (max-width:900px){.phones{grid-template-columns:1fr;max-width:420px}}
.phone{margin:0;min-width:0}
.phone .frame{position:relative;aspect-ratio:430/760;max-width:100%;border-radius:26px;border:1px solid var(--line);background:#F5EDE0;overflow:hidden;box-shadow:0 22px 50px -28px rgba(12,63,88,.45)}
.phone .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.phone .frame.bottom img{object-position:bottom}
.phone .frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(to bottom,transparent,rgba(245,237,224,.95))}
.phone .frame.bottom::after{top:0;bottom:auto;background:linear-gradient(to top,transparent,rgba(245,237,224,.95))}
.phone figcaption{margin-top:14px}
.phone figcaption b{display:block;font-family:var(--font-head);font-weight:800;font-size:16px;margin-bottom:4px}
.phone figcaption span{color:var(--muted);font-size:14.5px;line-height:1.6}
.results{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:980px){.results{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.results{grid-template-columns:1fr}}
.res{padding:22px 0 0;border-top:2px solid var(--amber);min-width:0}
.res .big{font-family:var(--font-head);font-weight:900;font-size:30px;letter-spacing:-.02em;line-height:1.1;color:var(--ocean);font-variant-numeric:tabular-nums}
.res .big small{font-size:16px;color:var(--muted);font-weight:700;margin:0 4px}
.res p{margin-top:8px;color:var(--muted);font-size:14.5px}
.start{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
@media (max-width:980px){.start{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.start{grid-template-columns:1fr}}
.start .card{counter-increment:s;position:relative;padding-top:30px}
.start .card::before{content:counter(s,decimal-leading-zero);position:absolute;top:-14px;left:20px;background:var(--amber);color:#2B1E05;font-family:var(--font-head);font-weight:900;font-size:13px;padding:4px 10px;border-radius:999px}
.start .card h3{font-size:17px}
.faq{display:grid;gap:10px;max-width:800px}
.faqgrp{margin-top:30px}
.faqgrp h3{font-size:18px;font-weight:900;margin-bottom:12px;color:var(--ocean)}
details{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:0 20px}
summary{cursor:pointer;list-style:none;font-family:var(--font-head);font-weight:800;font-size:16px;padding:16px 0;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--ocean);font-weight:500;font-size:22px;flex:none}
details[open] summary::after{content:"–"}
details p{padding:0 0 18px;color:var(--muted);font-size:15px}
.note{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px 22px 18px;box-shadow:0 18px 50px -24px rgba(12,63,88,.35);position:relative;max-width:100%;min-width:0}
.note .tag{position:absolute;top:-12px;left:22px;background:var(--amber);color:#2B1E05;font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.08em;padding:4px 10px;border-radius:999px}
.note .head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-head);font-size:13px;font-weight:700;color:var(--muted);border-bottom:1px dashed var(--paper-line);padding-bottom:10px;margin-bottom:12px}
.note .lines{background:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,var(--paper-line) 31px,var(--paper-line) 32px);padding:4px 6px 0}
.note .pen{font-family:var(--font-pen);font-size:25px;line-height:32px;color:var(--pen);margin:0}
.note .pen .fix{color:var(--red);text-decoration:line-through;text-decoration-thickness:2px}
.note .pen .ok{color:var(--red)}
.note .stamps{display:grid;gap:8px;margin-top:16px}
.stamp{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13.5px;line-height:1.5;padding:9px 12px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.stamp b{font-family:var(--font-head);font-size:11px;letter-spacing:.06em;color:#fff;background:var(--ocean);padding:3px 8px;border-radius:6px;white-space:nowrap;margin-top:2px}
.stamp.second b{background:var(--camel);color:#2B1E05}

/* curriculum 4 steps */
.curri{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:30px;position:relative}
@media (max-width:900px){.curri{grid-template-columns:repeat(2,1fr)}}
.cstep{position:relative;padding:22px 20px;border-radius:16px;background:var(--surface);border:1px solid var(--line);min-width:0}
.cstep .n{font-family:var(--font-head);font-weight:900;font-size:12px;letter-spacing:.12em;color:var(--amber-ink)}
.cstep h3{font-size:22px;font-weight:900;margin:6px 0 8px;color:var(--ocean)}
.cstep p{font-size:14px;color:var(--muted)}
.cstep.k{background:var(--ocean);border-color:var(--ocean)}
.cstep.k h3{color:#fff}.cstep.k p{color:rgba(255,255,255,.85)}.cstep.k .n{color:var(--amber)}
.cstep:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--amber);color:#2B1E05;font-weight:900;font-size:14px;display:grid;place-items:center;z-index:1}
@media (max-width:900px){.cstep:nth-child(2)::after{display:none}}

/* 길안내 */
.flowline{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:8px;margin-top:26px}
.flowline .f{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-family:var(--font-head);font-weight:900;font-size:15px;min-width:150px}
.flowline .f small{font-weight:500;font-size:12px;color:var(--muted);font-family:var(--font-body)}
.flowline .f.k{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.flowline .f.k small{color:rgba(255,255,255,.85)}
.flowline .ar{align-self:center;color:var(--amber-ink);font-weight:900;font-size:20px}
.guide{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px}
@media (max-width:1000px){.guide{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.guide{grid-template-columns:1fr}}
.gcard{display:flex;flex-direction:column;gap:10px;padding:22px 20px;border-radius:16px;background:var(--surface);border:1.5px solid var(--line);min-width:0;border-top:5px solid var(--ocean)}
.gcard.blue{border-top-color:#11587A}
.gcard.cream{border-top-color:var(--camel)}
.gcard .gk{font-family:var(--font-head);font-weight:900;font-size:12px;letter-spacing:.1em;color:var(--amber-ink)}
.gcard h3{font-size:19px;font-weight:900}
.gcard ul{display:grid;gap:5px;padding-left:16px;list-style:disc;font-size:14px;color:var(--muted);flex:1}
.gcard .gb{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-top:6px}
.gcard .gb .btn{width:100%}
/* 채널 지도 */
.chan{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
@media (max-width:860px){.chan{grid-template-columns:1fr}}
.chan a{display:grid;grid-template-columns:1fr auto 1.1fr;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:inherit;min-width:0}
.chan a:hover{border-color:var(--ocean)}
.chan .w{font-size:14.5px;color:var(--muted);grid-column:1;grid-row:1}
.chan a::after{content:"→";grid-column:2;grid-row:1;color:var(--amber-ink);font-weight:900;font-size:18px}
.chan .to{grid-column:3;grid-row:1;min-width:0}
.chan .to b{display:block;font-family:var(--font-head);font-size:14.5px;color:var(--ocean)}
.chan .to small{font-size:12px;color:var(--muted)}
@media (max-width:560px){.chan a{grid-template-columns:1fr;gap:4px}.chan a::after{display:none}.chan .to{grid-column:1;grid-row:2}}
/* 다음 단계 */
.nextstep{background:var(--teal);color:#F5EDE0;padding-block:clamp(40px,6vw,64px)}
.line-baegot .nextstep{background:#11587A}
.nextstep .eyebrow{color:var(--amber)}
.nextstep .lead{color:rgba(245,237,224,.85)}
.nextstep .nx{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
@media (max-width:860px){.nextstep .nx{grid-template-columns:1fr}}
.nextstep .nxb{display:flex;flex-direction:column;gap:10px}
.nextstep .nxb .btn{width:100%}
.nextstep .btn-ghost{background:transparent;border-color:rgba(245,237,224,.5);color:#F5EDE0}
.nextstep .btn-primary{background:var(--amber);color:#2B1E05}
.contact .tel{text-decoration:none;display:block}

/* about */
.about-hero{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(24px,5vw,56px);align-items:center}
@media (max-width:900px){.about-hero{grid-template-columns:1fr}}
.about-hero .photo{border-radius:20px;overflow:hidden;aspect-ratio:2/3;max-width:440px;background:#EAE3D6;box-shadow:0 30px 60px -30px rgba(0,59,65,.5)}
.about-hero .photo img{width:100%;height:100%;object-fit:cover}
.greet{font-family:var(--font-serif);font-size:clamp(18px,2vw,21px);line-height:1.9;color:var(--fg)}
.greet p+p{margin-top:14px}
.sign{margin-top:20px;font-family:var(--font-pen);font-size:30px;color:var(--ocean)}
.career{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.career{grid-template-columns:repeat(2,1fr)}}
.career .c{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.career .c b{display:block;font-family:var(--font-head);font-size:12px;letter-spacing:.1em;color:var(--amber-ink);margin-bottom:6px}
.career .c span{font-size:14.5px;line-height:1.6}
.domains{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:26px}
@media (max-width:900px){.domains{grid-template-columns:repeat(2,1fr)}}
.dom{padding:18px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--line);min-width:0}
.dom .n{font-family:var(--font-head);font-weight:900;font-size:12px;letter-spacing:.12em;color:var(--amber-ink)}
.dom h3{font-size:16px;font-weight:900;margin:4px 0 6px}
.dom p{font-size:13.5px;color:var(--muted)}
.dom.k{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.dom.k .n{color:var(--amber)}.dom.k p{color:rgba(255,255,255,.85)}
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.flow .f{font-family:var(--font-head);font-weight:900;font-size:14px;padding:12px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.flow .f.k{background:var(--ocean);color:#fff;border-color:var(--ocean)}
.flow .ar{color:var(--amber-ink);font-weight:900;font-size:18px}

/* baegot */
.info{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){.info{grid-template-columns:repeat(2,1fr)}}
.info .i{padding:20px;border-radius:14px;background:var(--surface);border:1px solid var(--line);min-width:0}
.info .i b{display:block;font-family:var(--font-head);font-size:12px;letter-spacing:.1em;color:var(--amber-ink);margin-bottom:6px}
.info .i span{font-size:14.5px;line-height:1.6}
.info .i .big{font-family:var(--font-head);font-weight:900;font-size:22px;color:var(--ocean);font-variant-numeric:tabular-nums;user-select:all}
.prog{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.prog{grid-template-columns:1fr}}
.prog .card{display:flex;flex-direction:column;gap:10px}
.prog .k{font-family:var(--font-head);font-weight:800;font-size:11.5px;letter-spacing:.1em;color:var(--amber-ink)}
.prog h3{font-size:21px;font-weight:900}
.prog .spec{display:grid;gap:6px;font-size:14px;margin-top:4px}
.prog .spec div{display:grid;grid-template-columns:64px 1fr;gap:8px}
.prog .spec b{font-family:var(--font-head);font-weight:800;font-size:12.5px;color:var(--muted)}
.prog .card.hi{border:2px solid var(--amber)}
.pgal{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:12px}
@media (max-width:860px){.pgal{grid-template-columns:1fr 1fr}.pgal figure:first-child{grid-column:span 2}}
.pgal figure{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/3;position:relative;min-width:0}
.pgal figure:first-child{aspect-ratio:16/10}
.pgal img{width:100%;height:100%;object-fit:cover}
.pgal figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 12px;font-family:var(--font-head);font-weight:800;font-size:13px;color:#fff;background:linear-gradient(to top,rgba(8,56,80,.8),transparent)}
.map{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:start}
@media (max-width:860px){.map{grid-template-columns:1fr}}
.map .addr{font-family:var(--font-head);font-weight:900;font-size:22px;line-height:1.35}
.map ul{display:grid;gap:8px;margin-top:14px;font-size:15px;color:var(--muted)}
.map ul li{display:grid;grid-template-columns:70px 1fr;gap:8px}
.map ul li b{font-family:var(--font-head);font-weight:800;font-size:13px;color:var(--fg)}

/* final cta + sticky bar + footer */
.final{padding-block:clamp(48px,7vw,88px)}
.final .how{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
@media (max-width:700px){.final .how{grid-template-columns:1fr}}
.final .how .card h3{font-size:17px;margin-bottom:6px}
.final .how .card p{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.final .how .btn{width:100%}
.ctabar{position:fixed;z-index:45;left:0;right:0;bottom:0;display:flex;gap:10px;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line)}
.ctabar .btn{flex:1;padding:14px 10px;font-size:15px}
@media (min-width:900px){.ctabar{left:auto;right:24px;bottom:24px;border:1px solid var(--line);border-radius:999px;padding:8px;box-shadow:0 18px 40px -20px rgba(0,59,65,.5)}.ctabar .btn{flex:none;padding:13px 20px}}
@media (max-width:899px){body{padding-bottom:82px}}
footer.site{background:#003B41;color:#F5EDE0;padding-block:44px 36px;font-size:13.5px}
footer.site .top{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.1fr;gap:28px;padding-bottom:28px;border-bottom:1px solid rgba(245,237,224,.18)}
@media (max-width:900px){footer.site .top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer.site .top{grid-template-columns:1fr}}
footer.site .flogo img{height:34px;width:auto;margin-bottom:14px}
footer.site h4{font-family:var(--font-head);font-size:12px;letter-spacing:.1em;color:#CD9B6A;margin:0 0 10px}
footer.site ul{display:grid;gap:6px}
footer.site a{color:#F5EDE0;text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site a.btn-kakao{color:var(--kakao-ink)}footer.site a.btn{text-decoration:none}
footer.site .fbtns{display:grid;gap:8px;margin-bottom:10px}
footer.site .fbtns .btn{padding:12px 16px;font-size:14px}
footer.site .legal{padding-top:18px;display:flex;flex-wrap:wrap;gap:6px 18px;opacity:.75;font-size:12.5px}
.sel{user-select:all}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}