/* home-a.css — 메인(/) 전용. 다른 세션의 07-new/hero-a.html 에 있던 <style> 을 그대로 옮겼다(2026-10-06).
   공용 editorial.css 뒤(pageCss 슬롯)에 붙는다. 머리·바닥은 공용 조각(siteHeader/siteFooter)을 쓰고 맨 아래에서 메인 결로 덮는다.
   hero-a 의 자체 머리·바닥 규칙(header/.logo/.hlink/footer)만 뺐고 나머지는 원본과 같다. */
:root{--ink:#0f1a2b;--ink2:#3b4658;--mute:#7c8799;--line:#d5dbe6;--soft:#f3f5f9;--blue:#1f5eff;--blue2:#dbe5ff;--yellow:#f5c342;--red:#e5484d;--bg:#fff;--w:1200px;--hdr:0px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all;line-height:1.5}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
svg{display:block;overflow:visible}
svg text{font-family:inherit}


.wrap{width:min(var(--w),100% - 48px);margin-inline:auto;position:relative;z-index:1}
.s{position:relative;min-height:100svh;display:grid;align-items:center;padding:calc(var(--hdr) + 40px) 0 72px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:center}
.row .fig{position:relative}
.row.rev .txt{order:2}.row.rev .fig{order:1}
h1{font-size:clamp(48px,6.6vw,104px);font-weight:800;letter-spacing:-.035em;line-height:1.06}
h2{font-size:clamp(30px,3.6vw,54px);font-weight:800;letter-spacing:-.025em;line-height:1.22}
h3{font-size:clamp(24px,2.4vw,34px);font-weight:800;letter-spacing:-.02em;line-height:1.25}
.btn{display:inline-flex;align-items:center;gap:10px;height:60px;padding:0 30px;border-radius:14px;background:var(--ink);color:#fff;font-weight:700;font-size:18px;transition:transform .2s,background .2s;border:0;cursor:pointer;font-family:inherit}
.btn:hover{transform:translateY(-2px);background:var(--blue)}
.center{text-align:center}
.ln{display:block;overflow:visible;padding:.06em 0 .1em;margin:-.06em 0 -.1em}.ln.clip{overflow:hidden}.ln .in{display:inline-block;will-change:transform}
[data-fx]{visibility:hidden}[data-fx].ready{visibility:visible}
h1,h2{color:var(--ink)}
h2{font-size:clamp(32px,3.4vw,52px);line-height:1.3;letter-spacing:-.02em;font-weight:800}
.kw{display:inline-block;background:var(--blue2);color:var(--blue);padding:.02em .22em;margin:0 .02em;border-radius:.22em;line-height:1.22;vertical-align:baseline;transform-origin:50% 60%}
.kw .ch{display:inline-block;white-space:pre}
[data-var="sweep"] .kw,[data-var="load"] .kw,[data-var="rise"] .kw{background:linear-gradient(var(--blue2),var(--blue2)) no-repeat;background-size:100% 100%}
[data-var="type"] .kw::after{content:"";display:inline-block;width:.08em;height:.9em;background:currentColor;margin-left:.08em;vertical-align:-.1em;animation:blink 1s steps(2,start) infinite}
.s-hero .kw{background:#fff;box-shadow:0 4px 18px rgba(20,24,39,.08)}
.s-cta .kw{background:#fff;color:var(--navy)}
.kw{color:inherit}

/* 1 히어로 */
.s-hero{overflow:hidden}
.s-hero .txt .btn{margin-top:40px}
.s-hero .fig .vid{max-width:720px;margin-inline:auto}
.lineart{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.lineart path{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round}
#heroLine,#retDots{display:none}
.dots{stroke-dasharray:0 13}

/* 영상 */
.vid{position:relative;aspect-ratio:3/2;width:100%;background:transparent}
.vid video{display:block;width:100%;height:100%;object-fit:cover;background:#fff;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.row .fig .vid{max-width:720px;margin-inline:auto}
.vid.tall{aspect-ratio:2/3;max-width:min(100%,460px)}
.row .fig .still{width:min(100%,440px);margin-inline:auto}
.art{width:100%}

/* 4 전환 */
.s-turn{min-height:100svh;padding:0;overflow:hidden}
.s-turn svg{position:absolute;inset:0;width:100%;height:100%}

/* 5 세로축 */
.s-axis{padding:0;min-height:100svh;overflow:hidden}
.stage{position:relative;height:100svh;width:100%}
.axis{position:absolute;left:50%;top:0;bottom:0;width:3px;background:var(--ink);transform:translateX(-50%)}
.goals{position:absolute;left:50%;top:0;transform:translateX(-50%);display:flex;gap:12px;z-index:1;pointer-events:none}
.goal{padding:10px 20px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;font-size:18px;opacity:0;white-space:nowrap}
.goal.y{background:var(--yellow);color:var(--ink)}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vh,34px);padding:calc(var(--hdr) + 72px) 24px 32px;visibility:hidden;opacity:0}
.scene h2{text-align:center;background:var(--bg);padding:6px 20px;position:relative;z-index:2}
.scene .art{width:min(760px,100%);height:min(46svh,420px);background:var(--bg);display:grid;place-items:center}
.scene .art .vid{height:100%;width:auto;aspect-ratio:3/2;max-width:100%}

/* 6 되돌아옴 */
.s-return{overflow:hidden}
.ret{position:relative;width:min(900px,100%);margin-inline:auto}
.ret .vid{position:relative;z-index:1}
.ret .lineart{z-index:0}
.ret .tag{position:absolute;left:50%;top:21%;z-index:2;font-size:13px;font-weight:800;color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:4px;padding:2px 7px;transform:rotate(-14deg);opacity:0;white-space:nowrap}

/* 7 사례: 썸네일 3장 한 줄, 글 없음 */
.s-cases{min-height:0;padding:clamp(60px,10vh,120px) 0}
.s-cases{display:block}
.pf-title{margin-bottom:clamp(28px,5vh,56px)}
.pf-title .num{color:var(--blue);font-variant-numeric:tabular-nums}
.pf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
/* 카드 자체에 transform 전환을 두면 GSAP 등장 효과(y:40→0)와 충돌해 40px 내려간 채 멈춘다(2026-10-08 확인). 올리기 대신 그림 확대로 */
.pf-item{display:block;border-radius:28px;overflow:hidden;box-shadow:0 20px 60px rgba(15,26,43,.10);border:1px solid rgba(15,26,43,.05);transition:box-shadow .25s}
.pf-item:hover{box-shadow:0 28px 70px rgba(15,26,43,.16)}
.pf-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .35s}
.pf-item:hover img{transform:scale(1.03)}
.pf-more{margin-top:clamp(28px,4vh,44px)}
/* 8 숫자 */
.s-count .stack{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(8px,2vh,24px)}
.s-count .stack .vid{width:min(720px,100%)}
.s-count h2{font-size:clamp(30px,3.6vw,54px)}
.certs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:min(900px,100%);margin-top:clamp(16px,3vh,32px)}
.cert{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 24px;display:grid;justify-items:center;gap:10px;text-align:center}
.cert img{height:40px;width:auto;image-rendering:auto}
.cert b{font-size:clamp(17px,1.3vw,20px);font-weight:800}
.cert p{font-size:15px;color:var(--mute);line-height:1.5}
.regs{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;width:min(1000px,100%);margin-top:6px}
.regs li{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:var(--soft);font-size:15px;font-weight:700;color:var(--ink2)}
.regs li small{font-size:13px;font-weight:500;color:var(--mute)}
@media (max-width:860px){.certs{grid-template-columns:1fr}}
.s-count .num{font-variant-numeric:tabular-nums;color:var(--blue)}

/* 9 문의 */
.s-cta{padding-bottom:120px}
.s-cta .wrap{display:flex;flex-direction:column;align-items:center;gap:40px}
.s-cta h2{background:var(--bg);padding:10px 24px;font-size:clamp(34px,4.4vw,66px)}
.cta-line{position:absolute;left:50%;top:0;width:3px;height:0;background:var(--blue);transform:translateX(-50%);z-index:0}
.cta-dot{position:absolute;left:50%;width:14px;height:14px;border-radius:50%;background:var(--blue);transform:translate(-50%,-50%) scale(0);z-index:2}
.ask{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:28px;width:min(720px,100%)}
.field{position:relative;width:100%;height:76px;background:#fff;border:2px solid var(--ink);border-radius:18px;display:flex;align-items:center;padding:0 26px}
.field input{flex:1;height:100%;border:0;outline:0;font:inherit;font-size:21px;padding-left:8px;font-weight:500;color:var(--ink);background:transparent;min-width:0}
.field input::placeholder{color:#a8b0bf}
.field .caret{position:absolute;left:26px;top:22px;width:2px;height:32px;background:var(--ink);animation:blink 1s steps(2,start) infinite}
.field.on .caret{display:none}
@keyframes blink{to{visibility:hidden}}
.ask .btn{font-size:20px;height:66px;padding:0 36px}


@media (max-width:860px){
  .row{grid-template-columns:1fr;gap:36px}
  .row .txt{order:1}.row .fig{order:2}
  .pf{grid-template-columns:1fr;gap:16px}
  .s{padding:calc(var(--hdr) + 24px) 0 56px}
  h1{font-size:clamp(44px,13vw,72px)}
  .scene{padding-top:calc(var(--hdr) + 60px)}
  .scene .art{height:38svh}
  .goal{font-size:15px;padding:8px 14px}
  .field{height:64px}.field input{font-size:18px}.field .caret{top:16px;height:28px}
}
/* ===== v10c 톤 ===== */
:root{--ink:#141827;--ink2:#3b4050;--mute:#7b8090;--line:#e4e6ee;--soft:#f5f6fa;--blue:#2e5bff;--blue2:#dfe6ff;--yellow:#f5b400;--red:#e63e3a;--bg:#fff;--navy:#1b1f3a}
.btn{border-radius:999px;background:var(--navy);padding:0 28px}.btn:hover{background:var(--blue)}
.s-hero{background:#fff}
.s-hero::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:url(https://d36g2rk6qhlg3p.cloudfront.net/hrmsoft/static/hero-a/img/bg-photo-soft.png) center center/cover no-repeat}
.s-hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(255,255,255,.96) 0,rgba(255,255,255,.7) 60%,rgba(255,255,255,.15) 100%)}
.s-hero .lineart{z-index:1}.s-hero .wrap{z-index:2}
.s-hero h1{text-shadow:0 2px 0 #fff,0 0 28px #fff}
.goal{background:var(--navy)}.goal.y{background:var(--yellow);color:var(--ink)}
.axis{background:var(--navy)}
.case .who{color:var(--blue);font-weight:800;letter-spacing:.02em}
.s-count .num{color:var(--blue)}
.ret .tag{border-color:var(--navy);color:var(--navy)}
.field{border-color:var(--navy);border-radius:999px;padding:0 30px}.field .caret{left:30px}
.ask .btn{background:var(--blue)}.ask .btn:hover{background:var(--navy)}
.cta-dot{background:var(--blue)}
@media (max-width:899px){.s-hero::after{background-size:auto 70%;background-position:center bottom}}

/* ===== 섹션 구분·고도화 ===== */
.s{padding:calc(var(--hdr) + 56px) 0 88px}
.row .fig{position:relative;isolation:isolate}
.row .fig::before{content:"";position:absolute;inset:8% 4%;border-radius:40px;background:radial-gradient(ellipse at 50% 55%,var(--glow,#eef2fb) 0,rgba(255,255,255,0) 70%);z-index:-1}
.s-era{--glow:#fff3cc}
.s-gap{--glow:#dfe7ff;background:linear-gradient(180deg,#fff 0,#f5f7fb 12%,#f5f7fb 88%,#fff 100%)}
.s-axis{background:#fff}
.scene .art{position:relative;isolation:isolate}
.scene .art::before{content:"";position:absolute;inset:6% 10%;border-radius:40px;background:radial-gradient(ellipse at 50% 60%,#eef2fb 0,rgba(255,255,255,0) 70%);z-index:-1}
.sdots{position:absolute;right:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);display:grid;gap:10px;z-index:6}
.sdots i{display:block;width:8px;height:8px;border-radius:999px;background:var(--line);transition:all .3s}
.sdots i.on{height:28px;background:var(--navy)}
.s-cases{background:linear-gradient(180deg,#fff 0,#f3f5f9 10%,#f3f5f9 90%,#fff 100%)}
.s-count .stack .vid{position:relative;isolation:isolate}
.s-count .stack .vid::before{content:"";position:absolute;inset:8% 4%;border-radius:40px;background:radial-gradient(ellipse at 50% 55%,#eef2fb 0,rgba(255,255,255,0) 70%);z-index:-1}
.cert{padding:22px 24px;gap:12px}
.cert b{font-size:clamp(16px,1.2vw,19px);color:var(--ink2);font-variant-numeric:tabular-nums}
.s-cta{background:linear-gradient(180deg,#fff 0,#fff 40px,var(--navy) 40px);color:#fff;padding-top:calc(var(--hdr) + 96px)}
.s-cta::before{content:"";position:absolute;left:0;right:0;top:0;height:40px;background:var(--navy);border-radius:0 0 40px 40px;transform:translateY(0);display:none}
.s-cta h2{color:#fff}.s-cta .kw{color:var(--yellow)}
/* 문의 CTA(2026-10-08): 입력창 대신 설명 한 줄 + 버튼 둘 */
.s-cta .lead{margin-top:-12px;font-size:clamp(16px,1.4vw,19px);line-height:1.6;color:rgba(255,255,255,.78);text-align:center;max-width:36em}
.s-cta .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.s-cta .btn{background:var(--blue);height:60px;font-size:18px}.s-cta .btn:hover{background:#fff;color:var(--navy)}
.s-cta .btn.tel{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}.s-cta .btn.tel:hover{background:#fff;color:var(--navy)}
.field{border:2px solid rgba(255,255,255,.25);background:#fff}
.ask .btn{background:var(--blue);color:#fff}.ask .btn:hover{background:#fff;color:var(--navy)}
@media (max-width:860px){.sdots{right:10px}}

/* 큰 화면 최대값: 섹션 높이·내용 폭 상한 */
.s{min-height:min(100svh,920px)}
.s-hero{min-height:min(calc(100svh - 66px),980px)}
.s-count,.s-cta{min-height:0}
.wrap{width:min(var(--w),100% - 48px)}
@media (min-width:1900px){:root{--w:1320px}.row .fig .vid{max-width:760px}}
.s-cta h2{background:transparent}
.s-cta .kw{background:#fff;color:var(--navy)}

/* ===== 색 운용: 섹션마다 한 가지 주조색, 칩은 보색 ===== */
.s-era{background:var(--blue);color:#fff;--glow:transparent}
.s-era h2{color:#fff}.s-era .kw{background:var(--yellow);color:var(--navy)}
.s-gap{background:var(--yellow);color:var(--ink);--glow:transparent}
.s-gap h2{color:var(--ink)}.s-gap .kw{background:var(--navy);color:#fff}
.s-era .row .fig::before,.s-gap .row .fig::before{display:none}
.s-era .vid,.s-gap .vid{background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(20,24,39,.22)}
.s-era .vid video,.s-gap .vid video{-webkit-mask-image:none;mask-image:none}
.scene[data-i="0"] .kw{background:var(--blue2);color:var(--blue)}
.scene[data-i="1"] .kw{background:#fff1c2;color:#8a5a00}
.scene[data-i="2"] .kw{background:var(--navy);color:#fff}
.scene[data-i="3"] .kw{background:#ffe3e1;color:var(--red)}
.scene[data-i="4"] .kw{background:var(--blue);color:#fff}
.sdots i.on{background:var(--blue)}
.s-cases{background:linear-gradient(180deg,#fff 0,#eef2fb 10%,#eef2fb 90%,#fff 100%)}
.s-count .kw{background:var(--navy);color:#fff}
.cert{border-color:#e4e6ee;background:#fafbfe}
.regs li{background:#eef2fb;color:var(--navy)}
.s-cta .kw{background:var(--yellow);color:var(--navy)}
.ask .btn{background:var(--yellow);color:var(--navy)}.ask .btn:hover{background:#fff;color:var(--navy)}
.field{border-color:transparent}
.btn{background:var(--navy)}
/* A: 흰 바탕 + 부드러운 빛 */
.s-hero::after{background:radial-gradient(60% 70% at 78% 40%,#dfe7ff 0,rgba(223,231,255,0) 70%),radial-gradient(40% 50% at 12% 85%,#fff1c2 0,rgba(255,241,194,0) 70%),#fff}
.s-hero::before{display:none}.s-hero h1{text-shadow:none}.s-hero .kw{background:var(--blue2);color:var(--blue);box-shadow:none}

/* ===== 공용 .wrap 은 96px 안쪽 여백이 있다. 메인은 원본대로 1200 상자 그대로 쓴다 ===== */
.wrap{padding:0}

/* ===== 공용 머리 — 메인 결(반투명 흰 바탕, 남색 알약 문의하기, 밑줄 없는 메뉴) ===== */
.home-a .site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(20,24,39,.06)}
.home-a .site-header .wrap{height:66px;z-index:auto}
/* 로고 글자(18px), 로고 그림(28px), 메뉴 글자 크기는 공용 머리(theme-a, editorial) 값을 따름(2026-10-14 사장님 'GNB 크기가 페이지마다 조금씩 다르다' —
   메인만 로고 28px·글자 18px, 휴대폰 메뉴 15px 로 덮어써 다른 페이지(로고 30px·글자 17px, 휴대폰 메뉴 14px)와 달랐음) */
/* 위쪽 메뉴에만 적용 — 예전에는 '.home-a .gnb a' 라 하위 메뉴 항목(.sub a)의 여백 10px 14px 까지 0 으로 지워 메인에서만 하위 메뉴가 좁게 붙어 나왔음(2026-10-14 사장님 '메인에서 GNB 호버 시 제대로 안 나온다') */
.home-a .gnb > a,.home-a .gnb > .has-sub > a{font-weight:600;color:var(--ink2);padding:0;border-bottom:0}
.home-a .gnb a:hover,.home-a .gnb a.on,.home-a .gnb a[href$="/about"]:hover,.home-a .gnb a[href$="/services"]:hover,.home-a .gnb a[href$="/cases"]:hover,.home-a .gnb a[href$="/article"]:hover{color:var(--blue);border-bottom-color:transparent}
.home-a .header-cta{border:0;border-radius:999px;background:var(--navy);color:#fff;padding:10px 18px;font-size:14px;font-weight:700;letter-spacing:0}
.home-a .header-cta:hover{background:var(--blue);color:#fff}
.home-a .axis{display:block;padding:0;margin:0;border:0}

/* ===== 공용 바닥 — 남색, 문의 면과 이어짐 ===== */
.home-a .site-footer{background:var(--navy);border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.6);font-size:12.5px;line-height:1.9;padding:72px 0 40px}
.home-a .site-footer .wrap{z-index:auto}
.home-a .site-footer .brand b{color:#fff}
.home-a .foot-tag{color:#fff}
.home-a .foot-contact,.home-a .foot-contact a{color:rgba(255,255,255,.6)}
.home-a .foot-contact a:hover{color:#fff}
.home-a .foot-contact i{color:rgba(255,255,255,.3)}
.home-a .foot-menu a{color:#fff}
.home-a .foot-menu a:hover{color:var(--yellow)}
.home-a .foot-menu a.cta{color:var(--yellow)}
.home-a .foot-legal{border-top-color:rgba(255,255,255,.12)}
.home-a .foot-legal .foot-legal-links a,.home-a .foot-legal-links a{color:rgba(255,255,255,.5)}
.home-a .foot-legal-links a:hover{color:#fff}
@media (max-width:599px){.home-a .site-header .wrap{height:auto}}

/* ── 메인 문의 섹션(2026-10-08 사장님): 남색 푸터와 붙어 한 덩어리로 보이므로 밝은 바탕으로. 서비스 품목 페이지 문의 띠(.sc-cta)와 같은 색 */
.s-cta{background:var(--soft);color:var(--ink);border-top:1px solid var(--line);padding-top:112px;padding-bottom:112px}
.s-cta h2{color:var(--ink)}.s-cta .kw{background:var(--yellow);color:var(--navy)}
.s-cta .lead{color:var(--sub)}
.s-cta .btn{background:var(--navy);color:#fff}.s-cta .btn:hover{background:var(--blue);color:#fff}
.s-cta .btn.tel{background:#fff;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}.s-cta .btn.tel:hover{background:var(--navy);color:#fff}
@media (max-width:768px){.s-cta{padding-top:72px;padding-bottom:72px}}

/* ── 첫 제목 CSS 등장(2026-10-14 라이트하우스) ── GSAP 을 기다리지 않고 첫 화면에서 바로 줄마다 아래에서 올라오고 칩이 튀어나옴.
   이전 GSAP 판과 같은 값: 줄 105% 상승 .9초(power4.out ≈ cubic-bezier(.23,1,.32,1)), 줄 간격 .14초, 칩 크기 .86 → 1 */
.s-hero h1.fx-css .ln{display:block;overflow:hidden}
.s-hero h1.fx-css .ln .in{display:inline-block;animation:heroUp .9s cubic-bezier(.23,1,.32,1) .15s both}
.s-hero h1.fx-css .ln + .ln .in{animation-delay:.29s}
.s-hero h1.fx-css .kw{animation:kwPop .4s cubic-bezier(.34,1.8,.64,1) .8s both}
@keyframes heroUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes kwPop{from{transform:scale(.86);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.s-hero h1.fx-css .ln .in,.s-hero h1.fx-css .kw{animation:none}}

/* 휴대폰 세로축 장면 영상(2026-10-14 사장님 '메인 모바일에서 제대로 나오는 거 맞아?') — 영상 판 높이를 38svh 로 고정하고 너비를 비율로 계산해
   481px 로 그려져 화면(342px) 밖으로 삐져나가던 문제. 휴대폰에서는 너비를 화면 폭에 맞추고 높이는 3:2 비율로 */
@media (max-width:860px){
  .scene .art{height:auto}
  .scene .art .vid{width:100%;height:auto;max-width:100%;aspect-ratio:3/2}
}

/* 8-2 자주 묻는 질문(2026-10-14) — 메인 결: 가운데 큰 제목 + 칩(rise), 아래 펼침 목록(폭 880), 질문 20px, 답 17px, 답 아래 관련 아티클 알약 */
.s-faq{min-height:0;display:block;padding:clamp(72px,12vh,120px) 0;background:#fff}
.s-faq h2{text-align:center;margin-bottom:clamp(28px,5vh,48px)}
.s-faq .kw{background:var(--blue2);color:var(--blue)}
.faq-list{width:min(880px,100%);margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4px;cursor:pointer;list-style:none;font-size:20px;line-height:1.45;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .q::before{content:"Q";display:inline-block;width:1.5em;color:var(--blue);font-weight:800}
.faq-item summary i{flex:none;position:relative;width:28px;height:28px;border-radius:50%;background:var(--soft);transition:background .2s,transform .3s}
.faq-item summary i::before,.faq-item summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:1px;background:var(--ink);transform:translate(-50%,-50%)}
.faq-item summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
.faq-item[open] summary i{background:var(--blue)}
.faq-item[open] summary i::before,.faq-item[open] summary i::after{background:#fff}
.faq-item[open] summary i::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-item summary:hover .q{color:var(--blue)}
.faq-a{padding:0 4px 26px 1.5em;margin-left:4px}
.faq-a p{margin:0;font-size:17px;line-height:1.75;color:var(--ink2);word-break:keep-all}
.faq-more{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 16px 8px 8px;border-radius:999px;background:var(--soft);font-size:15px;font-weight:600;color:var(--ink);transition:background .15s}
.faq-more em{font-style:normal;font-size:12px;font-weight:800;color:#fff;background:var(--navy);border-radius:999px;padding:3px 9px}
.faq-more::after{content:"";width:7px;height:7px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg);margin-left:2px}
.faq-more:hover{background:var(--blue2)}
@media (max-width:860px){
  .faq-item summary{font-size:17px;padding:20px 2px}
  .faq-a{padding:0 2px 22px 1.5em}
  .faq-a p{font-size:15.5px}
  .faq-more{font-size:13.5px}
}

/* 8-1 아티클 길(2026-10-15 사장님 '메인에 아티클도 추가') — 단계별 가이드 일곱 편을 남색 선 위 번호로. 넓은 화면은 가로 일곱 칸(그림, 번호, 제목, 편수),
   900 이하는 세로 선 + 한 줄씩(번호, 제목, 그림). 선은 .road-line 하나라 스크립트가 한 번에 그음 */
.s-read{min-height:0;display:block;padding:clamp(72px,12vh,128px) 0}
.s-read h2{text-align:center}
.road-wrap{margin-top:clamp(40px,7vh,72px)}
.road{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative;z-index:1}
.road-line{position:absolute;z-index:0;left:calc(100% / 14);right:calc(100% / 14);top:161.5px;height:3px;border-radius:2px;background:var(--navy);transform-origin:0 50%}
.rd{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px;color:var(--ink)}
.rd-pic{height:120px;width:100%;display:flex;align-items:flex-end;justify-content:center;margin-bottom:20px}
.rd-pic img{display:block;max-width:86%;max-height:120px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 14px 14px rgba(20,24,39,.18));transition:transform .3s}
.rd-no{flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;border:3px solid var(--navy);font-size:15px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums;transition:background .2s,color .2s,border-color .2s}
.rd-tx{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:18px}
.rd-t{font-size:16px;font-weight:700;line-height:1.42;letter-spacing:-.02em;max-width:10em;transition:color .2s}
.rd-cn{font-size:14px;font-weight:600;color:var(--mute)}
.rd:hover .rd-no{background:var(--blue);border-color:var(--blue);color:#fff}
.rd:hover .rd-t{color:var(--blue)}
.rd:hover .rd-pic img{transform:translateY(-6px)}
.rd-more{margin-top:clamp(36px,6vh,56px)}
@media (max-width:1100px){.rd-t{font-size:15px}}
@media (max-width:900px){
  .road{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .road-wrap{max-width:560px}
  .road-line{left:21.5px;right:auto;width:3px;height:auto;top:48px;bottom:48px;transform-origin:50% 0}
  .rd{display:grid;grid-template-columns:46px minmax(0,1fr) 84px;align-items:center;gap:16px;height:96px;padding:0;text-align:left}
  .rd-no{grid-column:1;grid-row:1}
  .rd-tx{grid-column:2;grid-row:1;align-items:flex-start;margin:0;gap:4px}
  .rd-t{max-width:none;font-size:16px}
  .rd-cn{font-size:13px}
  .rd-pic{grid-column:3;grid-row:1;height:72px;margin:0;align-items:center}
  .rd-pic img{max-height:72px;max-width:100%}
  .rd:hover .rd-pic img{transform:none}
}