/* ══════════════════════════════════════════
   도움닫기 — 1:1 방문·화상 과외 데모 (2026-09-25 · 2판)
   Alchemy Tuition(alchemytuition.com.au) 을 **실측값으로** 옮겼다. 1판은 장치만 가져와서 원본 느낌이 약했다 —
   2판은 원본의 계산된 스타일을 playwright 로 재서 그 숫자를 쓴다 (사진·문구·로고·상호는 여전히 안 가져온다).
     본문 DM Sans 14/28 #333 · 제목 DM Serif Display 30/37.5 (하위 18/22.5 · 과목 24/30 · 첫 화면 45/60 굵게)
     폭 1200(내용 1160) · 섹션 위아래 80 · 주황 #FFA200 · 보라 #5B34EB · 요금 띠 #333 · 첫 화면·푸터 #141618
     버튼 = 모서리 0 · 12px · 12/30 여백 (첫 화면) · 큰 버튼 60 높이 18px 굵게 · 요금 카드 버튼 44 높이 11px 반지름 3
   한국어 제목은 Noto Serif KR 로 받는다 (DM Serif Display 는 한글이 없다).
   원본은 아이·선생님 얼굴 사진투성이다 — 여기선 **얼굴 0**. 손 · 뒷모습 · 책상.
   빌더 demos/build_doum.py — html 을 직접 고치지 말 것.
   ══════════════════════════════════════════ */
@font-face{font-family:'P';font-weight:400;font-display:swap;src:url('../../assets/fonts/Pretendard-Regular.woff2') format('woff2')}
@font-face{font-family:'P';font-weight:600;font-display:swap;src:url('../../assets/fonts/Pretendard-SemiBold.woff2') format('woff2')}

:root{
  --or:#FFA200; --or2:#FF8A00; --vio:#5B34EB; --ink:#151515; --txt:#333333; --dark:#141618; --char:#333333; --cream:#FFFBF1;
  --serif:'DM Serif Display','Noto Serif KR',serif; --sans:'DM Sans','P',sans-serif;
  --px:20px;
  --itge-acc:#3E4A2A; --itge-sig:#A8402A;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:#fff;color:var(--txt);word-break:keep-all;font-size:14px;line-height:28px;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--px);position:relative}
.or{color:var(--or)}
.ol{color:var(--or);font-weight:600}
.ol:hover{text-decoration:underline}
b,strong{font-weight:600}

/* 버튼 — 원본 그대로 모서리 0 */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 30px;font-size:12px;font-weight:600;background:var(--or);color:#fff;
  border:1px solid var(--or);white-space:nowrap;cursor:pointer;transition:filter .2s,background .2s}
.btn:hover{filter:brightness(1.06)}
.btn.o{background:none}
.btn.o:hover{background:var(--or)}
.big{display:inline-flex;align-items:center;justify-content:center;min-height:60px;padding:18px 36px;font-size:18px;font-weight:600;letter-spacing:.01em;
  background:var(--or);color:#fff;white-space:nowrap;transition:filter .2s}
.big:hover{filter:brightness(1.06)}
.big.dk{background:var(--char)}
.call{margin-top:18px;font-weight:600;color:var(--txt);font-size:14px}
.call a{display:inline-block;padding:2px 0}

/* ══ 잇지 데모 바 ══ */
.itgebar{background:var(--itge-acc);color:#fff;position:relative;z-index:50;font-family:'P';line-height:1.5}
.itgebar .wrap{display:flex;align-items:center;gap:14px;height:40px;font-size:12.5px;max-width:none}
.itgebar .k{color:rgba(255,255,255,.62);font-size:10.5px;letter-spacing:.1em}
.itgebar .t{color:rgba(255,255,255,.9);font-weight:600}
.itgebar .sep{color:rgba(255,255,255,.3)}
.itgebar .back{margin-left:auto;background:var(--itge-sig);color:#fff;font-size:12px;font-weight:600;padding:6px 13px;border-radius:3px;white-space:nowrap}
@media(max-width:760px){.itgebar .t,.itgebar .sep{display:none}}

/* ══ 연락처 띠 + 헤더 — 첫 화면 위에 얹힌다 ══ */
.util{background:#2C2D30;color:#fff;font-size:12px;line-height:40px}
.util .wrap{display:flex;align-items:center;gap:22px;height:40px}
.util a{display:inline-flex;align-items:center;gap:7px}
.util svg{width:14px;height:14px;color:var(--or)}
.util .rate{margin-left:auto}
.util .rate b{letter-spacing:.12em;font-weight:400}
@media(max-width:700px){.util .mail{display:none}}
@media(max-width:440px){.util .rate span{display:none}}
.mast{position:relative}
header{position:absolute;left:0;right:0;top:100%;z-index:30;color:#fff;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(20,22,24,.35)}
header .wrap{display:flex;align-items:center;height:80px;gap:26px}
.logo{display:flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:600;font-size:21px;letter-spacing:-.04em;white-space:nowrap;line-height:1}
.logo svg{width:28px;height:22px;color:var(--or)}
header nav{margin-left:auto;display:flex;gap:26px}
header nav a{font-size:12.5px;font-weight:600;padding:8px 0;opacity:.92}
header nav a:hover,header nav a.on{color:var(--or);opacity:1}
header .btn{min-height:35px;padding:8px 20px;font-size:12px}
.nvt{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.navbtn{display:none}
@media(max-width:1000px){
  header nav{display:none;position:absolute;left:0;right:0;top:80px;margin:0;background:var(--dark);flex-direction:column;gap:0;padding:6px var(--px) 18px}
  header nav a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:14px}
  .nvt:checked~nav{display:flex}
  header .btn{margin-left:auto}
  .navbtn{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer}
  .navbtn i{display:block;width:22px;height:2px;background:#fff;margin-left:auto}
}

/* ══ 첫 화면 — 화면 한 장, 사진은 오른쪽에 또렷하게 ══ */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden;min-height:max(640px,calc(100vh - 80px));display:flex;align-items:center}
.hero>img{position:absolute;right:0;top:0;height:100%;width:64%;object-fit:cover;object-position:60% center}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 36%,rgba(20,22,24,.55) 54%,rgba(20,22,24,0) 76%)}
.hero .wrap{position:relative;z-index:1;width:100%;padding-top:80px}
.hero h1{font-family:var(--serif);font-weight:700;font-size:45px;line-height:60px;letter-spacing:-.01em;max-width:700px}
.hero .sub{font-family:var(--serif);font-weight:700;font-size:17px;line-height:28px;margin-top:14px}
.hero .bt{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
@media(max-width:760px){
  .hero{min-height:660px;align-items:flex-end}
  .hero>img{width:100%;opacity:.55}
  .hero::after{background:linear-gradient(0deg,var(--dark) 44%,rgba(20,22,24,.3))}
  .hero .wrap{padding-bottom:48px}
  .hero h1{font-size:30px;line-height:42px}
  .hero h1 br{display:none}
}

/* 믿을 이유 띠 — 원본은 언론사 로고 자리. 가짜 언론 로고는 못 만드니 자격을 로고처럼 */
.trust{background:var(--cream)}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:83px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}
.trust .lb{font-size:12px;font-weight:600;text-decoration:underline;text-underline-offset:4px;color:var(--ink);margin-left:28px}
.trust .mk{display:flex;align-items:center;gap:6px;color:#111;line-height:1.1}
.trust .mk svg{width:22px;height:22px;flex:none}
.trust .m1{font-family:var(--serif);font-size:17px}
.trust .m2{font-weight:600;font-size:15px;letter-spacing:-.03em}
.trust .m3{font-family:var(--serif);font-style:italic;font-size:15px}
.trust .m4{font-weight:600;font-size:13px;letter-spacing:.06em}
.trust .m5{font-size:12px;border-left:2px solid #111;padding-left:6px}
@media(max-width:900px){.trust .wrap{justify-content:center;gap:12px 24px}.trust .lb{margin:0;width:100%;text-align:center}}

/* ══ 섹션 공통 ══ */
.sec{padding:80px 0}
.h{font-family:var(--serif);font-weight:600;font-size:30px;line-height:37.5px;color:var(--ink);text-align:center;letter-spacing:-.01em}
.h+.s{text-align:center;font-family:var(--serif);font-weight:600;font-size:14px;margin-top:14px}
.lead{max-width:1160px;margin:34px auto 0;text-align:center}
.lead p+p{margin-top:19px}
.cta{text-align:center;margin-top:40px}

/* 후기 */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.revs>div{min-width:0;border:1px solid #EAEAEA;padding:22px 24px 20px;background:#fff}
.revs .st{color:var(--or);letter-spacing:.14em;font-size:15px;line-height:1}
.revs p{margin-top:12px;font-size:14px;line-height:26px}
.revs .who{margin-top:14px;font-size:12px;color:#777;display:flex;align-items:center;gap:8px;line-height:1.3}
.revs .who i{width:30px;height:30px;border-radius:50%;background:#F4F4F4;display:grid;place-items:center;font-style:normal;font-weight:600;color:var(--ink);font-size:11px}
@media(max-width:900px){.revs{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.revs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-right:-20px;padding-right:20px}.revs::-webkit-scrollbar{display:none}.revs>div{scroll-snap-align:start}}

/* ══ 주황 띠 — 흰 글씨 · 여섯 칸 ══ */
.orb{background:linear-gradient(180deg,#FFA200 0%,#FF8A00 100%);color:#fff}
.orb .h,.orb .h+.s{color:#fff}
.why{display:grid;grid-template-columns:1fr 1fr;gap:60px 120px;max-width:1000px;margin:70px auto 0}
.why>div{min-width:0;text-align:center;max-width:440px;margin:0 auto}
.why svg{width:84px;height:66px;margin:0 auto 14px}
.why h3{font-family:var(--serif);font-weight:600;font-size:18px;line-height:22.5px}
.why p{margin-top:18px;font-size:14px;line-height:28px}
.orb .call{color:var(--txt)}
@media(max-width:680px){.why{grid-template-columns:1fr;gap:44px}}

.checks{display:grid;grid-template-columns:repeat(3,1fr);color:#fff}
.checks div{display:flex;align-items:center;justify-content:center;gap:8px;min-height:102px;font-family:var(--serif);font-weight:600;font-size:18px}
.checks div:nth-child(1){background:#252830}.checks div:nth-child(2){background:#1F2229}.checks div:nth-child(3){background:#16181D}
.checks i{width:19px;height:19px;border-radius:3px;background:#3BB44A;display:grid;place-items:center;flex:none}
.checks i::before{content:'';width:9px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}
@media(max-width:560px){.checks div{font-size:14px;min-height:72px;gap:6px}}

/* ══ 사진 위 흰 카드 ══ */
.story{position:relative;padding:80px 0;overflow:hidden}
.story>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.story .card{position:relative;z-index:1;background:#fff;width:486px;max-width:100%;padding:44px 38px 40px;text-align:center}
.story .card h2{font-family:var(--serif);font-weight:600;color:var(--or);font-size:30px;line-height:37.5px}
.story .card .by{font-family:var(--serif);font-weight:600;font-size:18px;line-height:22.5px;margin-top:16px;color:var(--ink)}
.story .av{width:84px;height:84px;border-radius:50%;margin:22px auto 20px;background:var(--vio);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:30px}
.story .card p{font-size:14px;line-height:28px}
.story .card p+p{margin-top:19px}
.story .card p.b{font-weight:600;color:var(--ink)}
@media(max-width:760px){.story{padding:0}.story>img{position:relative;height:300px}.story .card{width:auto;padding:36px 22px}}

/* 선생님 — 정사각 셋이 붙어서 · 어두운 네모 화살표 */
.tut{position:relative;margin-top:36px}
.tut .trk{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% / 3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.tut .trk::-webkit-scrollbar{display:none}
.tut figure{scroll-snap-align:start;min-width:0;position:relative}
.tut img{width:100%;aspect-ratio:1;object-fit:cover}
.tut figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 18px 16px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.65),transparent);line-height:1.4}
.tut figcaption b{display:block;font-family:var(--serif);font-size:18px}
.tut figcaption span{font-size:12px;opacity:.9}
.tut .arr{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:84px;border:0;background:#1A1A1A;color:#fff;cursor:pointer;z-index:2}
.tut .arr.p{left:0}.tut .arr.n{right:0}
.tut .arr::before{content:'';display:block;width:8px;height:8px;margin:auto;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff}
.tut .arr.p::before{transform:translateX(2px) rotate(45deg)}.tut .arr.n::before{transform:translateX(-2px) rotate(-135deg)}
@media(max-width:760px){.tut .trk{grid-auto-columns:78%}}

/* ══ 보라 띠 — 아래가 둥글게 불룩 ══ */
.vio{background:var(--vio);color:#fff;text-align:center;padding:80px 20px 130px;border-radius:0 0 50% 50% / 0 0 90px 90px}
.vio .h{color:#fff}
.vio .h+.s{font-family:var(--sans);font-weight:400;font-size:13px;margin-top:10px;color:#fff}
.vio .frame{position:relative;max-width:620px;margin:40px auto 0;aspect-ratio:16/9;overflow:hidden;background:#4524C9}
.vio .frame img{width:100%;height:100%;object-fit:cover;opacity:.5}
.vio .frame i{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:12px;background:#FF0000;display:grid;place-items:center}
.vio .frame i::before{content:'';border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.vio .frame span{position:absolute;left:0;right:0;bottom:10px;font-size:11.5px;line-height:1.4;opacity:.85}
@media(max-width:600px){.vio{border-radius:0 0 50% 50% / 0 0 40px 40px}}

/* 과목 3단 */
.subj{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:60px auto 0;max-width:1160px}
.subj>div{min-width:0;text-align:center}
.subj img{width:100%;aspect-ratio:3/2;object-fit:cover}
.subj h3{font-family:var(--serif);font-weight:600;font-size:24px;line-height:30px;color:var(--ink);margin-top:40px}
.subj p{margin-top:19px;font-size:14px;line-height:28px}
.subj ul{list-style:none;margin-top:19px;display:grid;gap:5px}
.subj li a{color:var(--or);font-weight:600;display:inline-block;padding:2px 0}
@media(max-width:800px){.subj{grid-template-columns:1fr;gap:56px}}

/* ══ 요금 — #333 위 밝은 카드 둘 ══ */
.price{background:var(--char);color:#fff}
.price .h{color:#fff}
.price .h+.s{font-family:var(--sans);font-weight:400;font-size:13px;color:#fff}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1160px;margin:40px auto 0}
.plans>div{min-width:0;background:#F6F8F9;color:var(--txt);text-align:center}
.plans .hd{padding:22px 12px 18px;border-bottom:1px solid #E5E8EA}
.plans h3{font-family:var(--serif);font-weight:700;font-size:24px;line-height:30px;color:var(--ink)}
.plans .hd span{display:block;font-size:10px;color:#9A9A9A;letter-spacing:.04em;line-height:1.6;margin-top:2px}
.plans .am{padding:22px 12px 20px}
.plans .am b{font-weight:400;font-size:42px;line-height:1;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.plans .am b sup{font-size:16px;vertical-align:top;position:relative;top:-2px;margin-right:3px}
.plans .am small{display:block;font-size:10px;color:#9A9A9A;letter-spacing:.04em;margin:8px 0 20px;line-height:1.5}
.plans .pb{display:inline-flex;align-items:center;min-height:44px;padding:8px 12px;background:var(--ink);color:#fff;border-radius:3px;font-size:11px;font-weight:600}
.ticks{list-style:none;max-width:1160px;margin:40px auto 0;display:grid;gap:5px;text-align:center;font-size:13px}
.ticks li::before{content:'✓ '}
.faqs{max-width:1160px;margin:30px auto 0;display:grid;gap:19px;font-size:13px;text-align:center}
.faqs b.q{color:var(--or)}
@media(max-width:600px){.plans{grid-template-columns:1fr}}

/* 나눔 띠 — 사진 + 로고 둘 + 검은 상자 */
.give{position:relative;min-height:900px;padding:90px 20px;overflow:hidden;text-align:center;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:60px}
.give>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.give::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.28)}
.give .x{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.give .x .l1{font-family:var(--sans);font-weight:600;font-size:clamp(32px,4.4vw,58px);letter-spacing:-.05em;display:flex;align-items:center;gap:8px;line-height:1}
.give .x .l1 svg{width:1.1em;height:.9em;color:#fff}
.give .x .xx{font-family:var(--sans);font-weight:600;font-size:clamp(34px,4vw,56px);line-height:1}
.give .x .l2{font-family:var(--serif);font-size:clamp(20px,2.4vw,32px);line-height:1.15;text-align:left;border-left:3px solid #fff;padding-left:14px}
.give .box{position:relative;z-index:1;background:rgba(0,0,0,.86);max-width:834px;width:100%;margin:0 auto;padding:54px 30px 58px}
.give .box .mk{font-family:var(--serif);font-weight:600;font-size:30px;line-height:37.5px}
.give .box p{font-size:13px;margin-top:19px}
.give .btn{margin-top:30px;min-height:41px;padding:10px 24px;font-size:12px}
@media(max-width:760px){.give{min-height:0;padding:60px 16px}.give .box .mk{font-size:24px;line-height:32px}}

/* 지역 글 */
.local h2{font-family:var(--serif);font-weight:600;font-size:30px;line-height:57px;color:var(--ink)}
.local p{margin-top:32px;font-size:14px;line-height:28px;max-width:560px;color:#555}
@media(max-width:600px){.local h2{font-size:25px;line-height:44px}}

/* ══ 하위 페이지 ══ */
.phead{background:var(--dark);color:#fff;padding:170px 0 90px;position:relative;overflow:hidden}
.phead>img{position:absolute;right:0;top:0;height:100%;width:56%;object-fit:cover}
.phead::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--dark) 44%,rgba(20,22,24,.3) 70%,rgba(20,22,24,0))}
.phead .wrap{position:relative;z-index:1}
.phead h1{font-family:var(--serif);font-weight:700;font-size:45px;line-height:60px;max-width:700px}
.phead p{font-family:var(--serif);font-weight:600;font-size:17px;margin-top:12px;max-width:620px}
.crumb{font-size:12px;opacity:.75;margin-bottom:8px}
.crumb a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:760px){.phead{padding:140px 0 56px}.phead h1{font-size:30px;line-height:42px}.phead>img{width:100%;opacity:.35}}

.grades{display:grid;gap:70px}
.grades>article{display:grid;grid-template-columns:1fr 1.15fr;gap:50px;align-items:center}
.grades>article>*{min-width:0}
.grades>article:nth-child(even) img{order:2}
.grades img{width:100%;aspect-ratio:3/2;object-fit:cover}
.grades h2{font-family:var(--serif);font-weight:600;font-size:24px;line-height:30px;color:var(--ink)}
.grades p{margin-top:16px}
.grades .tags{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:14px}
.grades .tags span{color:var(--or);font-weight:600}
.grades .btn{margin-top:22px}
@media(max-width:760px){.grades>article{grid-template-columns:1fr;gap:22px}.grades>article:nth-child(even) img{order:0}}

.qa{max-width:900px;margin:40px auto 0}
.qa details{border-bottom:1px solid #E6E6E6}
.qa summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;min-height:58px;padding:12px 0;font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink)}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'+';margin-left:auto;color:var(--or);font-family:var(--sans);font-size:24px;line-height:1}
.qa details[open] summary::after{content:'–'}
.qa details p{padding:0 0 20px}

.bookw{display:grid;grid-template-columns:1.2fr 1fr;gap:50px;align-items:start}
.bookw>*{min-width:0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:3px solid var(--or);background:#F6F8F9;padding:30px}
.form>*{min-width:0}
.form label{display:grid;gap:6px;font-size:12px;font-weight:600;color:var(--ink);line-height:1.4}
.form .f{grid-column:1/-1}
.form input,.form select,.form textarea{width:100%;min-height:46px;border:1px solid #D5D8DB;border-radius:0;padding:8px 12px;font-size:15px;background:#fff;line-height:1.4}
.form textarea{min-height:100px;resize:vertical}
.form .chips{display:flex;flex-wrap:wrap;gap:8px}
.form .chips label{display:inline-flex;align-items:center;gap:6px;font-weight:400;border:1px solid #D5D8DB;background:#fff;padding:0 14px;min-height:42px;cursor:pointer}
.form .chips input{width:auto;min-height:0;accent-color:var(--or)}
.form .big{grid-column:1/-1;border:0;cursor:pointer}
.form .fine{grid-column:1/-1;font-size:12px;color:#777;text-align:center;line-height:1.5}
.side{background:var(--char);color:#fff;padding:34px 30px;text-align:center}
.side h3{font-family:var(--serif);font-weight:600;font-size:24px;line-height:30px}
.side ol{list-style:none;margin-top:22px;display:grid;gap:16px;font-size:13px}
.side ol b{display:block;color:var(--or);font-size:15px}
.side .tel{margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);font-size:13px}
.side .tel a{display:inline-block;color:var(--or);font-size:26px;padding:6px 0}
@media(max-width:860px){.bookw{grid-template-columns:1fr}}
@media(max-width:460px){.form{grid-template-columns:1fr;padding:22px 16px}}

/* ══ 연락 — 구름 사진 위 반투명 판 ══ */
.contact{position:relative;color:#fff;text-align:center;padding:80px 20px 0;overflow:hidden}
.contact>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.contact::after{content:'';position:absolute;inset:0;background:rgba(15,22,38,.45)}
.contact>*:not(img){position:relative;z-index:1}
.contact .t{font-family:var(--serif);font-weight:600;font-size:30px;line-height:37.5px}
.contact hr{width:30px;border:0;border-top:1px solid #fff;margin:18px auto}
.contact .t2{font-family:var(--serif);font-weight:600;font-size:18px}
.contact .panel{max-width:820px;margin:60px auto 0;background:rgba(20,26,38,.42);padding:44px 20px 60px}
.contact dt{color:var(--or);font-weight:600;font-size:20px;line-height:1.3;margin-top:36px}
.contact dt:first-child{margin-top:0}
.contact dd{font-size:14px;line-height:28px;margin-top:10px}
.contact dd a{display:inline-block}
.contact dd a.num{color:var(--or);font-size:24px;line-height:1.3}
.contact .soc{display:flex;justify-content:center;gap:14px;margin-top:60px}
.contact .soc a{width:44px;height:44px;border-radius:50%;background:var(--or);display:grid;place-items:center;color:#fff}
.contact .soc svg{width:18px;height:18px}
.contact .co{margin-top:40px;font-size:13px;line-height:28px}
.contact .co .ol{font-weight:400}
.contact .up{display:grid;place-items:center;width:40px;height:40px;background:#1A1C20;margin:50px auto 0}
.contact .up::before{content:'';width:8px;height:8px;border-left:1.5px solid #fff;border-top:1.5px solid #fff;transform:rotate(45deg) translate(2px,2px)}
footer{background:var(--dark);color:#8C8F94;padding:60px 0 30px;text-align:center}
footer .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px 20px}
footer .cols>div{min-width:0}
footer h4{color:#B9BBBF;font-weight:600;font-size:12.5px;margin-bottom:6px}
footer ul{list-style:none;font-size:11px;line-height:1.5}
footer li a{display:inline-block;padding:6px 0}
footer li a:hover{color:#fff}
footer .end{margin-top:60px;font-size:11px;line-height:1.9}
footer .end .logo{justify-content:center;color:#fff;margin-bottom:16px}
footer .end .pol{font-size:13px;font-weight:600;letter-spacing:.02em;color:#9A9DA2}
footer .end .pol a{display:inline-block;padding:4px 2px}
footer .end p{margin-top:10px}
footer .end b{color:#D8D9DB;font-weight:600}
@media(max-width:760px){footer .cols{grid-template-columns:1fr 1fr}}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);background:var(--ink);color:#fff;font-size:13.5px;line-height:1.5;
  padding:12px 20px;opacity:0;pointer-events:none;transition:.25s;z-index:60;max-width:calc(100% - 32px);border-left:3px solid var(--or)}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ══ 모바일 ══ */
@media(max-width:760px){
  .sec{padding:60px 0}
  .h{font-size:25px;line-height:34px}
  .big{font-size:16px;padding:16px 24px;white-space:normal;text-align:center}
  .itgebar .back{padding:9px 14px}
  footer li a{padding:10px 0}
  .subj li a{padding:9px 0}
  .call a{padding:9px 0}
  .util a{min-height:40px}
}

/* ══ 모바일 탭 타겟 40px (자동 삽입) ══ */
@media(max-width:820px){
  .itgebar .back{min-height:40px;display:inline-flex;align-items:center;padding:0 15px}
  .legal a,.disc a,.dfoot a,footer a{display:inline-block;padding:11px 0}
  .logo,header .logo{min-height:40px;display:inline-flex;align-items:center}
  .notice .hd a,.sechd a,.sec a.more{display:inline-block;padding:10px 0}
}