/* =====================================================================
   태산솔루션 — 공통 스타일 (멀티페이지 전환 08-17)
   index.html 인라인 <style> 에서 추출. 모든 페이지가 이 한 벌을 공유한다.
   색·치수는 tokens.css 변수만 참조한다.
   ===================================================================== */
/* =====================================================================
   BLOCK STYLES (puckdetail 3분리 中 ③)
   블록별로 구획. 색/치수는 tokens.css 변수만 참조.
   ===================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo",sans-serif;
     background:var(--surface);color:var(--ink);line-height:1.6;letter-spacing:-.02em;-webkit-text-size-adjust:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
section{padding:var(--sec-pad) 0}
h2{font-size:var(--f-h2);font-weight:800;line-height:1.35;text-align:center}
.sec-sub{text-align:center;color:var(--ink-2);font-size:var(--f-body);margin-top:16px}
svg{display:block}

/* ── block: nav ── */
.nav{position:absolute;top:0;left:0;right:0;z-index:50}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:40px;height:44px;background:linear-gradient(160deg,#173c58,#0b1f3d);background-color:#122f57;
      border:1.5px solid var(--gold);clip-path:polygon(50% 0,100% 12%,100% 68%,50% 100%,0 68%,0 12%);
      display:flex;align-items:center;justify-content:center;font-family:"Songti SC","Noto Serif KR",serif;
      font-size:13px;font-weight:900;color:#e8c877;line-height:1.02;text-align:center;flex:none}
.brand-txt{color:var(--text);font-size:19px;font-weight:800;letter-spacing:-.03em}
.brand-txt small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.22em;color:rgba(255,255,255,.72);margin-top:3px}
.menu{display:flex;gap:38px;font-size:15.5px;font-weight:600}
.menu a{color:rgba(255,255,255,.92);text-decoration:none}
.menu a:hover{color:var(--text)}

/* ── block: hero ── */
.hero{position:relative;height:760px;display:flex;align-items:center;text-align:center;overflow:hidden;
      background:linear-gradient(160deg,var(--surface-2) 0%,var(--text) 55%,var(--navy-900) 100%);background-color:var(--text)}
.glass{position:absolute;inset:0;overflow:hidden}
.glass i{position:absolute;display:block;
         background:linear-gradient(180deg,rgba(120,175,235,.30),rgba(20,60,110,.05));
         background-color:rgba(90,150,215,.14);border-right:1px solid rgba(160,205,245,.18)}
.g1{width:290px;height:118%;left:-3%;top:-9%;transform:skewX(9deg) skewY(-4deg)}
.g2{width:180px;height:105%;left:16%;top:-3%;transform:skewX(-6deg);opacity:.75}
.g3{width:340px;height:120%;right:-4%;top:-10%;transform:skewX(-11deg) skewY(4deg)}
.g4{width:150px;height:96%;right:22%;top:2%;transform:skewX(7deg);opacity:.6}
.lines{position:absolute;inset:0;background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.055) 0 1px,transparent 1px 26px)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,20,38,.62),rgba(6,20,38,.78))}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-en{color:var(--text);font-size:15px;font-weight:700;opacity:.95}
.hero-rule{width:230px;height:1px;background:rgba(255,255,255,.5);margin:14px auto 26px}
h1{color:var(--text);font-size:var(--f-h1);font-weight:800;line-height:1.34;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.hero-sub{margin-top:26px;color:rgba(255,255,255,.9);font-size:20px;line-height:1.7}
.hero-sub b{display:block;color:var(--text);font-weight:800}

/* [피드백 ①] 히어로 하단 문구 박스 */
.hero-notice{max-width:720px;margin:38px auto 0;background:rgba(9,26,48,.55);
  border:1px solid rgba(201,215,232,.28);border-radius:var(--r-md);padding:24px 30px;backdrop-filter:blur(3px)}
.hn-lead{color:var(--text);font-size:19px;font-weight:800;margin-bottom:10px}
.hn-body{color:rgba(255,255,255,.82);font-size:15.5px;line-height:1.75;white-space:pre-line}

/* ── block: stats + duo ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.stat{background:var(--pale-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:44px 20px;text-align:center}
.stat h3{font-size:21px;font-weight:800}
.stat .basis{font-size:var(--f-xs);color:var(--ink-3);margin:8px 0 18px}
.stat .v{font-size:var(--f-stat);font-weight:800;letter-spacing:-.045em}
/* [피드백 ③] 대형 2버튼 = 이미지형 카드 */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--gap);margin-top:58px}
.duo a{position:relative;display:flex;align-items:center;gap:24px;padding:38px 34px;border-radius:var(--r-lg);
       text-decoration:none;color:var(--text);overflow:hidden;min-height:172px}
.duo .b1{background:linear-gradient(115deg,#14406f 0%,#0f3059 60%,var(--text) 100%);background-color:#103a6b}
.duo .b2{background:linear-gradient(115deg,#0f2a4d 0%,#0a1f3c 60%,#071729 100%);background-color:#0a1f3c}
.duo-art{position:absolute;right:-10px;top:0;bottom:0;width:52%;opacity:.9}
.duo-art svg{width:100%;height:100%}
.duo-txt{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px}
.duo-txt b{font-size:27px;font-weight:800;letter-spacing:-.03em}
.duo-txt em{font-style:normal;font-size:15px;font-weight:600;color:rgba(255,255,255,.72)}
.duo-go{position:relative;z-index:2;margin-left:auto;width:52px;height:52px;border-radius:50%;flex:none;
        background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
        display:flex;align-items:center;justify-content:center;color:var(--text)}

/* ── block: fields ── */
.fields{background:var(--navy-800);padding:96px 0}
.fields h2{color:var(--text)}
.pills{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:52px}
.pill{position:relative;background:var(--surface);border-radius:var(--r-md);padding:26px 10px;
      text-align:center;font-size:17px;font-weight:700;overflow:hidden}
.pill::after{content:"TS";position:absolute;right:12px;bottom:-4px;font-family:Georgia,"Times New Roman",serif;
             font-size:44px;font-weight:700;color:rgba(10,37,71,.07);line-height:1;letter-spacing:-2px}

/* ── block: process ── */
.steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:60px;position:relative}
.steps::before{content:"";position:absolute;top:52px;left:10%;right:10%;height:2px;
               background:linear-gradient(90deg,transparent,var(--blue-100) 12%,var(--blue-100) 88%,transparent);
               background-color:var(--blue-100)}
.step{text-align:center;padding:0 12px;position:relative}
/* [피드백 ④] 절차 단계에 그래픽 추가 */
.step .art{position:relative;width:104px;height:104px;margin:0 auto 20px;z-index:1}
.step .art svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 10px rgba(16,40,80,.10))}
.step .art .n{position:absolute;right:-4px;bottom:-4px;width:38px;height:38px;border-radius:50%;
         background:var(--navy-600);color:var(--text);display:flex;align-items:center;justify-content:center;
         font-size:14px;font-weight:800;border:3px solid #fff}
.step h3{font-size:18px;font-weight:800;margin-bottom:9px}
.step p{font-size:14.5px;color:var(--ink-2);white-space:pre-line;line-height:1.65}

/* ── block: qa ── */
.qa{background:var(--pale)}
.qa-box{background:var(--surface);border-radius:var(--r-lg);padding:56px 60px;margin-top:52px}
.qa-row{padding:34px 0}
.qa-row+.qa-row{border-top:1px solid var(--line)}
.bl{display:flex;align-items:flex-start;gap:14px}
.bl.a{justify-content:flex-end;margin-top:20px}
.av{width:56px;height:56px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
    font-size:21px;font-weight:800}
.av-q{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.av-a{background:var(--accent-2);color:#fff}
.bub{max-width:640px;padding:17px 24px;border-radius:var(--r-md);font-size:var(--f-body);font-weight:600;line-height:1.6;white-space:pre-line}
.bub-q{background:var(--surface-2);color:var(--text);border-top-left-radius:4px}
.bub-a{background:var(--accent-soft);color:var(--text);border:1px solid var(--line);border-top-right-radius:4px;font-weight:700}

/* ── block: quick form ── */
.quick{background:var(--gray);padding:92px 0}
.quick h2{font-size:34px}
.qform{display:grid;grid-template-columns:1fr 1fr 250px;gap:14px;margin-top:36px}
.qform input{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
             padding:22px;font-size:16px;font-family:inherit;width:100%}
.qform button{background:var(--accent-2);color:#fff;border:none;border-radius:var(--r-sm);
              font-size:18px;font-weight:800;font-family:inherit;cursor:pointer}
.agree{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:14px;
       font-size:var(--f-xs);font-weight:700;color:#404652}
.agree .box{width:17px;height:17px;border:1.5px solid #b6bdc9;border-radius:4px;background:var(--surface)}
.agree a{color:var(--ink-3);text-decoration:none;font-weight:500;margin-left:6px}

/* ── block: cases (실서류형 카드) ── */
.brush{display:inline-block;position:relative;color:var(--blue-500);font-size:var(--f-h2);font-weight:800;
       margin-top:16px;padding:0 14px;z-index:0}
.brush::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:16px;
              background:rgba(120,160,215,.38);border-radius:40% 60% 55% 45%;z-index:-1}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:56px;text-align:left}
.case{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:20px;box-shadow:var(--sh-card)}
/* [dead] v6에서 .talk 로 교체됨. 되살릴 때를 위해 남긴다 */
.paper{background:#fdfdfc;border:1px solid var(--line);border-radius:6px;height:250px;padding:24px 22px;
       position:relative;overflow:hidden}
.paper .ph{height:9px;width:44%;margin:0 auto 18px;background:#3a4150;border-radius:2px}
.paper .rule{height:1px;background:#dfe3ea;margin:0 0 16px}
.paper .ln{height:6px;background:#e7eaf0;border-radius:3px;margin-bottom:9px}
.paper .ln.a{width:92%}.paper .ln.b{width:78%}.paper .ln.c{width:86%}.paper .ln.d{width:64%}
.paper .mask{height:7px;background:#2c313c;border-radius:2px;margin-bottom:9px;opacity:.82}
.paper .mask.m1{width:30%}.paper .mask.m2{width:22%}
.paper .stamp{position:absolute;right:20px;bottom:22px;width:78px;height:78px;border:3px solid var(--stamp);
              border-radius:50%;color:var(--stamp);display:flex;align-items:center;justify-content:center;
              font-size:21px;font-weight:900;letter-spacing:.06em;transform:rotate(-13deg);
              background:rgba(255,255,255,.55);opacity:.9}
.case-meta{display:flex;align-items:center;gap:10px;margin-top:16px}
.case-tag{background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:800;padding:5px 11px;border-radius:var(--r-sm);flex:none}
.case-meta p{font-size:var(--f-sm);font-weight:700;color:var(--text)}

/* ── block: reviews ── */
.rev{background:var(--pale-2)}
.rev-list{margin-top:52px;display:flex;flex-direction:column;gap:20px}
.rev-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:32px 34px}
.rev-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.rev-head .tag{background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:var(--r-sm)}
.rev-head h3{font-size:19px;font-weight:800}
.rev-head .who{margin-left:auto;font-size:var(--f-xs);color:var(--ink-3);font-weight:600}
.rev-item .body{color:var(--ink-2);font-size:15.5px;line-height:1.85}
.stars{color:#e3b341;font-size:13px;letter-spacing:2px;margin-bottom:10px}

/* ── block: cta ── */
.cta{background:var(--navy-800);padding:96px 0;text-align:center}
.cta h2{color:var(--text);font-size:34px}
.cta-btns{display:flex;gap:22px;justify-content:center;margin-top:44px;flex-wrap:wrap}
.cta-btns a{display:flex;align-items:center;gap:14px;min-width:330px;justify-content:center;padding:26px 34px;
            border-radius:var(--r-md);font-size:20px;font-weight:800;text-decoration:none}
.c-kakao{background:var(--kakao);color:#181600}
.c-call{background:var(--light-surface);color:var(--light-text)}

/* ── block: about ── */
.about-in{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;margin-top:56px}
.about-in h3{font-size:var(--f-h3);font-weight:800;line-height:1.45;margin-bottom:22px}
.about-in h3 span{color:var(--blue-500)}
.about-in p{color:var(--ink-2);font-size:16.5px;line-height:1.9;margin-bottom:14px}
.prin{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.prin div{background:var(--pale-2);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.prin b{display:block;font-size:15.5px;font-weight:800;margin-bottom:5px}
.prin span{font-size:13.5px;color:var(--ink-2)}
.emblem{background:linear-gradient(165deg,#1B2E4D,#0A1524);background-color:#0F1B2D;border-radius:var(--r-lg);
        height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
        position:relative;overflow:hidden}
.emblem .lines{opacity:.6}
.emblem-logo{position:relative;z-index:2;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.emblem .cap{position:relative;z-index:2;text-align:center;color:rgba(255,255,255,.9)}
.emblem .cap b{display:block;font-size:20px;font-weight:800;color:#fff;margin-bottom:6px}
.emblem .cap span{font-size:14px;letter-spacing:-.01em;color:rgba(255,255,255,.68);font-weight:600}

/* ── block: slogan ── */
.slogan{position:relative;padding:130px 0;text-align:center;overflow:hidden;
        background:linear-gradient(160deg,var(--surface-2),var(--text));background-color:var(--text)}
.slogan .wrap{position:relative;z-index:2}
.slogan h2{color:var(--text);font-size:36px}
.slogan .en{color:rgba(255,255,255,.62);font-size:15px;font-weight:700;letter-spacing:.05em;margin-top:20px}
.slogan .strip{display:inline-block;margin-top:34px;background:var(--navy-600);color:var(--text);
               font-size:15.5px;font-weight:700;padding:15px 34px;border-radius:var(--r-sm)}

/* ── block: location ── */
.loc-in{display:grid;grid-template-columns:1.25fr .75fr;gap:36px;margin-top:52px;align-items:stretch}
/* [dead] 오시는 길 섹션은 고객 지시로 ORDER 제외 상태 */
.map{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);min-height:340px;background:#f0efe8}
.map .road{position:absolute;background:#fefefe;box-shadow:0 0 0 1px #dcdccf}
.map .blk{position:absolute;background:#e2e4d6;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.03)}
.map .park{position:absolute;background:#d8e6cd;border-radius:6px}
.map .water{position:absolute;background:#cfe0ee}
.map .pin{position:absolute;left:50%;top:47%;transform:translate(-50%,-100%);z-index:3;
          display:flex;flex-direction:column;align-items:center}
.map .pin .bub{background:var(--navy-800);color:var(--text);font-size:13px;font-weight:800;padding:8px 14px;
               border-radius:8px;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.2);max-width:none}
.map .pin .tip{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;
               border-top:9px solid var(--navy-800)}
.map .pin .dot{width:14px;height:14px;border-radius:50%;background:var(--stamp);border:3px solid #fff;
               box-shadow:0 2px 6px rgba(0,0,0,.3);margin-top:2px}
.loc-info{background:var(--pale-2);border:1px solid var(--line);border-radius:var(--r-md);padding:34px 32px}
.loc-info .row{display:flex;gap:14px;padding:16px 0}
.loc-info .row+.row{border-top:1px dashed var(--line)}
.loc-info .k{font-size:var(--f-sm);font-weight:800;color:var(--navy-800);min-width:74px;flex:none}
.loc-info .v{font-size:var(--f-sm);color:var(--ink-2)}

/* ── block: live ── [피드백 ⑪] 실시간 애니메이션 */
.live-badge{display:flex;align-items:center;gap:9px;justify-content:center;margin-top:22px;
            font-size:14px;font-weight:800;color:var(--blue-500)}
.live-badge .blip{width:9px;height:9px;border-radius:50%;background:#e0483d;position:relative}
.live-badge .blip::after{content:"";position:absolute;inset:-5px;border-radius:50%;
            border:2px solid rgba(224,72,61,.55);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
.live{margin-top:26px;border-top:2px solid var(--navy-800)}
.live-row{display:grid;grid-template-columns:110px 1fr 140px;align-items:center;gap:18px;
          padding:19px 22px;border-bottom:1px solid var(--line);font-size:15.5px;
          opacity:0;animation:rowIn .5s ease-out forwards}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.live-row .tx{display:flex;align-items:center;gap:8px}
.live-row .new{font-style:normal;background:#C8362B;color:#fff;font-size:10.5px;font-weight:900;
               width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.live-row .st{background:var(--pale);color:var(--blue-500);font-size:12.5px;font-weight:800;
              padding:6px 0;border-radius:6px;text-align:center}
.live-row .dt{color:var(--ink-3);font-size:14px;text-align:right}

/* ── block: footer ── */
.footer{background:#0a1728;padding:52px 0 130px;color:rgba(255,255,255,.5);font-size:var(--f-xs)}
.f-top{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.f-top b{color:var(--text);font-size:16px}
.footer p{margin:5px 0;line-height:1.8}

/* ── block: float ── */
/* ── 협력 변호사 (08-04 신설) ── */
.lawyer{background:var(--light-bg)}
.lw-card{margin:38px auto 0;max-width:620px;display:flex;align-items:center;gap:26px;
  background:var(--light-surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 34px;
  box-shadow:0 10px 30px rgba(0,0,0,.32)}
.lw-mark{flex:none;width:66px;height:66px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent)}
.lw-txt{display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:left}
.lw-txt em{font-style:normal;font-size:15px;font-weight:600;color:var(--text-2)}
.lw-fields{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.lw-fields span{font-size:13px;font-weight:600;color:var(--accent);background:var(--accent-soft);
  border-radius:999px;padding:5px 12px}
.lw-note{margin-top:22px;text-align:center;font-size:13.5px;line-height:1.7;color:var(--text-3)}
@media(max-width:820px){
  .lw-card{flex-direction:column;text-align:center;gap:18px;padding:28px 22px}
  .lw-txt{align-items:center;text-align:center}
  .lw-fields{justify-content:center}
}

.ts-logo{color:#C8D2DE;display:block}
.side{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:60;background:var(--surface);
      border-radius:16px;box-shadow:var(--sh-float);overflow:hidden;width:96px}
.side a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:18px 6px;text-decoration:none;
        color:var(--text);font-size:12.5px;font-weight:700;text-align:center;line-height:1.35;white-space:pre-line}
.side a+a{border-top:1px solid var(--line)}
.side .ic{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.i-kakao{background:var(--kakao)}
.i-form{background:var(--navy-800)}
.i-map{background:var(--pale);color:var(--navy-800)}

/* ── 모바일 (50% 글랜스 통과 기준으로 본문 크기 유지) ── */
@media(max-width:900px){
  :root{--sec-pad:64px;--f-h2:26px;--f-h3:21px;--f-stat:38px}
  h1{font-size:30px}
  .nav-in{height:70px}.menu{display:none}
  .hero{height:600px}
  .hero-en{font-size:12.5px}.hero-sub{font-size:16px;margin-top:20px}
  .duo,.cases,.about-in,.loc-in,.prin{grid-template-columns:1fr}
  .pills{grid-template-columns:repeat(2,1fr)}
  /* [피드백 3차 08-14] "업무사례/해결후기/상담건수는 세로말고 가로로 잘보이게 줄이기"
     + "모바일이 너무 길다" → 1열(세로 3단) 폐기, 3열 가로 유지하고 높이를 압축한다. */
  .stats{grid-template-columns:repeat(3,1fr);gap:10px}
  .stat{padding:18px 6px;border-radius:var(--r-md)}
  .stat h3{font-size:13px;letter-spacing:-.03em}
  .stat .basis{font-size:10.5px;margin-top:3px}
  .stat .v{font-size:26px;margin-top:8px}
  /* 모바일 길이 압축 (고객 요청) */
  section{padding:66px 0}
  .fields{padding:66px 0}
  .quick{padding:60px 0}
  .slogan{padding:74px 0}
  .steps{gap:12px}
  .rev-list,.rev-page{gap:14px}
  .rev-item{padding:24px 20px}
  .qa-row{padding:18px 0}

  .pills{grid-template-columns:1fr 1fr}
  .duo a{padding:26px 22px;min-height:132px;gap:14px}
  .duo-txt b{font-size:20px}.duo-txt em{font-size:13px}
  .duo-art{width:46%;right:-14px;opacity:.55}
  .duo-go{width:42px;height:42px}
  .hero-notice{margin-top:24px;padding:18px 20px}
  .hn-lead{font-size:16px}.hn-body{font-size:13.5px}
  .step .art{width:84px;height:84px}
  .steps{grid-template-columns:1fr;gap:28px}.steps::before{display:none}
  .qa-box{padding:28px 20px}
  .bub{max-width:78%;font-size:15px}.av{width:44px;height:44px;font-size:17px}
  .qform{grid-template-columns:1fr}.qform input{padding:17px}.qform button{padding:19px}
  .brush{font-size:24px}
  .cta-btns a{min-width:100%;font-size:17px;padding:20px}
  .emblem{height:300px}.emblem-logo svg{width:110px;height:110px}
  .slogan{padding:80px 0}.slogan h2{font-size:25px}
  .live-row{grid-template-columns:84px 1fr;font-size:14px;padding:15px 12px}
  .live-row .dt{grid-column:2;text-align:left;font-size:12.5px}
  .side{width:64px;right:10px}.side a{font-size:10.5px;padding:12px 4px}.side .ic{width:30px;height:30px}
  .paper{height:210px;padding:18px 16px}
  .footer{padding:40px 0 100px}
}

/* =====================================================================
   v6 — 2차 피드백(08-04) 반영분. 기존 규칙 뒤에 두어 override 한다.
   "신결이랑 너무 똑같음" 지적 4곳(업무분야·절차·업무사례·후기) 시각 차별화
   + 애니메이션 요청분(45만원 별건) 구현.
   ===================================================================== */

/* ── 로고 제거 → 워드마크 타이포 (고객: "로고는 빼고 이름만, 하단영어는 그대로") ── */
.emblem-word{position:relative;z-index:2;text-align:center;margin-bottom:22px}
.emblem-word b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.emblem-word i{display:block;font-style:normal;font-size:12px;font-weight:600;
  letter-spacing:.3em;color:rgba(255,255,255,.62);margin-top:8px}
.emblem .cap b{display:none}
.f-top{display:flex;align-items:baseline;gap:10px}
.f-top i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.24em;color:rgba(255,255,255,.5)}

/* ── 업무분야: 흰 pill → 번호 + 설명 카드 ── */
.pills{grid-template-columns:repeat(4,1fr);gap:14px}
.pill{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:24px 20px 22px;text-align:left;
  display:flex;flex-direction:column;gap:7px;transition:.28s}
.pill::after{display:none}
.pill-n{font-family:Georgia,"Times New Roman",serif;font-size:13.5px;font-weight:700;
  letter-spacing:.08em;color:var(--text-3)}
.pill b{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.pill em{font-style:normal;font-size:13px;line-height:1.55;color:rgba(255,255,255,.62)}
.pill:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}

/* ── 절차: 가로 5단계 → 6단계 카드 그리드 ("칸을 따로따로 + 이미지 불투명하게") ── */
.steps{grid-template-columns:repeat(3,1fr);gap:16px;margin-top:54px}
.steps::before{display:none}
.step{position:relative;overflow:hidden;text-align:left;padding:28px 26px 26px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;min-height:184px;
  box-shadow:0 8px 22px rgba(0,0,0,.32)}
.step-bg{position:absolute;right:-20px;bottom:-22px;width:136px;height:136px;opacity:.14;pointer-events:none}
.step-bg svg{width:100%;height:100%;display:block}
.step-n{display:inline-block;font-family:Georgia,"Times New Roman",serif;font-size:15px;font-weight:700;
  color:var(--accent);letter-spacing:.06em;margin-bottom:12px}
.step h3{font-size:18.5px;font-weight:800;margin-bottom:10px;letter-spacing:-.02em}
.step p{position:relative;z-index:1;font-size:14px;color:var(--ink-2);white-space:pre-line;line-height:1.68}

/* ── QA: 아바타 원형 → 라벨 배지, 말풍선 각도 완화 (신결 문법 탈피) ── */
.qa-box{border-radius:20px;padding:44px 46px}
.qa-row{padding:26px 0}
.av{width:auto;height:auto;min-width:30px;padding:4px 11px;border-radius:8px;font-size:13px;
  font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none}
.av-q{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
.av-a{background:var(--accent-2);color:#fff}
.bub{border-radius:12px}

/* ── 후기: 세로 나열 → 2페이지 전환 ("2P~3P까지 애니메이션으로 넘어가게") ── */
.rev-stage{position:relative;margin-top:48px}
.rev-page{display:none;flex-direction:column;gap:18px}
.rev-page.on{display:flex;animation:revIn .55s cubic-bezier(.22,.61,.36,1) both}
@keyframes revIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.rev-nav{display:flex;justify-content:center;gap:9px;margin-top:30px}
.rev-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:.25s}
.rev-dot.on{width:26px;border-radius:999px;background:var(--accent)}

/* ── 협력 변호사 로고 슬롯 ── */
.lw-photo{flex:none;width:136px;height:136px;border-radius:var(--r-md);object-fit:cover;object-position:top;background:#fff;border:1px solid var(--line)}
/* 타사 상표는 색을 변조하지 않는다(상표 사용 관점). 원본색 유지 + 흰 칩으로 대비 확보 */
/* 누끼 로고 — 원본색 그대로. 세로 flex 안에서 stretch 되면 가로만 늘어나 눌린다.
   → align-self 로 늘어남을 끊고, aspect-ratio 로 원본 비율(5.89:1)을 고정한다. */
.lw-firmlogo{display:block;align-self:flex-start;flex:none;
  height:34px;width:auto;aspect-ratio:942/160;object-fit:contain;margin:0 0 14px}
/* 좌측: 사진 + 이름 세로 묶음 */
.lw-left{flex:none;display:flex;flex-direction:column;align-items:center;gap:13px}
.lw-name{font-size:18px;font-weight:800;letter-spacing:-.03em;color:var(--text);white-space:nowrap}

/* ── 스크롤 진행바 ── */
.sbar{position:fixed;left:0;top:0;height:3px;width:100%;z-index:120;background:transparent;pointer-events:none}
.sbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),#c8d2de)}

/* ── nav 메뉴 언더라인 ("메뉴마다 조금씩 움직이게 들어가는 액션") ── */
.menu a{position:relative}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;
  background:#c8d2de;transition:right .28s cubic-bezier(.22,.61,.36,1)}
.menu a:hover::after{right:0}

/* ── 공통 스크롤 등장 애니메이션 ── */
[data-anim]{opacity:0;transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
[data-anim].in{opacity:1;transform:none}
[data-anim][data-d="1"]{transition-delay:.08s}
[data-anim][data-d="2"]{transition-delay:.16s}
[data-anim][data-d="3"]{transition-delay:.24s}
[data-anim][data-d="4"]{transition-delay:.32s}
[data-anim][data-d="5"]{transition-delay:.40s}
.qa-row .bl[data-anim]{transform:translateY(14px)}
.qa-row .bl.a[data-anim]{transform:translateY(14px)}

/* ── CTA 시머 ── */
.cta-btns a{position:relative;overflow:hidden}
.cta-btns a::before{content:"";position:absolute;top:0;left:-140%;width:70%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  animation:shine 3.6s ease-in-out infinite}
@keyframes shine{0%{left:-140%}45%{left:140%}100%{left:140%}}

@media(max-width:820px){
  .pills{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .qa-box{padding:28px 20px}
  .emblem-word b{font-size:27px}
}
@media(prefers-reduced-motion:reduce){
  [data-anim]{opacity:1;transform:none;transition:none}
  .cta-btns a::before{animation:none}
}

/* ── 사례 카드 재설계 (08-05) — "아예 사례 카드를 다른 이미지로" ──
   서류 종이 모형 → 추심 대화 화면 모형. 실제 대화·개인정보는 쓰지 않고 형태만 재현한다.
   (레퍼런스가 실제 카톡 캡처를 그대로 올린 것과 달리, 우리는 모형으로 같은 인상만 만든다) */
.talk{position:relative;overflow:hidden;height:268px;border-radius:var(--r-md);
  background:linear-gradient(180deg,var(--surface),var(--bg));border:1px solid var(--line);padding:0}
.tk-bar{display:flex;align-items:center;gap:8px;padding:11px 13px;background:rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.07)}
.tk-av{width:19px;height:19px;border-radius:50%;background:#3b4a63;flex:none}
.tk-name{height:7px;width:62px;border-radius:3px;background:#4a5a76}
.tk-time{height:6px;width:30px;border-radius:3px;background:#33405a;margin-left:auto}
.tk-body{padding:14px 13px 0;display:flex;flex-direction:column;gap:8px}
.msg{display:flex}
.msg.out{justify-content:flex-end}
.msg i{display:block;height:19px;border-radius:10px;background:var(--surface-2)}
.msg.in i{border-top-left-radius:4px}
.msg.out i{background:var(--accent-2);border-top-right-radius:4px}
.tk-cut{position:absolute;left:0;right:0;bottom:0;padding:13px 0 14px;text-align:center;
  background:linear-gradient(180deg,rgba(20,28,41,0),var(--bg) 42%)}
.tk-cut span{font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--text-2);
  border:1px solid var(--line);border-radius:20px;padding:4px 12px;background:rgba(20,28,41,.9)}
/* 원본 스탬프 규칙은 .paper 하위로 스코프돼 있어 상속되지 않는다 → 전체 재정의 */
.talk .stamp{position:absolute;right:14px;bottom:54px;width:70px;height:70px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:3px solid #e05a4e;color:#e05a4e;background:rgba(20,28,41,.32);
  font-size:19px;font-weight:900;letter-spacing:.06em;transform:rotate(-13deg);opacity:.95;z-index:2}

/* 카드가 화면에 들어오면: 말풍선이 하나씩 올라오고 → 스탬프가 찍힌다 */
.case[data-anim] .msg{opacity:0;transform:translateY(9px)}
.case[data-anim].in .msg{opacity:1;transform:none;
  transition:opacity .42s ease var(--md),transform .42s cubic-bezier(.22,.61,.36,1) var(--md)}
.case[data-anim] .stamp{opacity:0;transform:rotate(-13deg) scale(1.75)}
.case[data-anim].in .stamp{opacity:.95;transform:rotate(-13deg) scale(1);
  transition:opacity .3s ease .68s,transform .42s cubic-bezier(.34,1.4,.64,1) .68s}
@media(prefers-reduced-motion:reduce){
  .case[data-anim] .msg,.case[data-anim] .stamp{opacity:1;transform:rotate(-13deg) scale(1);transition:none}
  .case[data-anim] .msg{transform:none}
}

/* ── 상담폼 상태 메시지 · 동의 체크 ── */
.qmsg{margin-top:14px;text-align:center;font-size:14px;font-weight:600;min-height:20px;color:var(--text-2)}
.qmsg.ok{color:#2a6b39}
.qmsg.warn{color:#c0392b}
.agree{cursor:pointer;user-select:none}
/* 크기를 0으로 두면 클릭·키보드 포커스 대상이 사라진다 → 투명하게만 겹쳐 둔다 */
.agree input[type=checkbox]{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.agree input[type=checkbox]:focus-visible + .box{outline:2px solid var(--accent);outline-offset:2px}
.agree input[type=checkbox]:checked + .box{background:var(--accent);border-color:var(--accent);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12l6 6L20 6'/></svg>");
  background-size:12px;background-repeat:no-repeat;background-position:center}
.qform button:disabled{opacity:.6;cursor:not-allowed}

/* ── 사례 상세 (08-15) — 고객 요청 "클릭하면 종결지은 내용" ── */
.case{cursor:pointer;transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s}
.case:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(0,0,0,.32)}
.case:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.case-more{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--accent);white-space:nowrap}
.case-more::after{content:" ›";font-size:15px}
.case-note{margin-top:26px;text-align:center;font-size:13px;color:var(--text-3)}

.case-modal[hidden]{display:none}
.case-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:22px}
.cm-dim{position:absolute;inset:0;background:rgba(10,24,45,.62);backdrop-filter:blur(2px);animation:cmFade .25s ease both}
.cm-box{position:relative;z-index:1;width:100%;max-width:520px;background:var(--surface);border-radius:18px;
  padding:34px 34px 30px;box-shadow:0 24px 70px rgba(10,24,45,.34);animation:cmUp .32s cubic-bezier(.22,.61,.36,1) both;
  text-align:left;max-height:86vh;overflow:auto}
@keyframes cmFade{from{opacity:0}to{opacity:1}}
@keyframes cmUp{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.cm-x{position:absolute;right:14px;top:12px;width:34px;height:34px;border:0;background:transparent;
  font-size:26px;line-height:1;color:var(--text-3);cursor:pointer;border-radius:8px}
.cm-x:hover{background:var(--surface-2);color:var(--text)}
.cm-box h3{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:12px 0 20px;color:var(--text);line-height:1.45}
.cm-box dl{display:flex;flex-direction:column;gap:14px}
.cm-box dt{font-size:12.5px;font-weight:800;color:var(--accent);margin-bottom:5px}
.cm-box dd{font-size:15px;line-height:1.72;color:var(--text)}
.cm-note{margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--text-3);line-height:1.6}
@media(max-width:600px){.cm-box{padding:28px 22px 24px}.cm-box h3{font-size:18px}}
/* 개인정보처리방침 모달 — .case-modal 구조 재사용, 본문이 길어 폭·조판만 조정 */
.pv-modal .cm-box{max-width:620px}
.pv-modal .pv-intro{font-size:14.5px;line-height:1.7;color:var(--text-2);margin:-8px 0 22px}
.pv-modal dl{gap:18px}
.pv-modal dt{font-size:13px}
.pv-modal dd{font-size:14.5px;line-height:1.75;color:var(--text-2)}
.f-pv{color:var(--text-2);text-decoration:underline;text-underline-offset:3px;font-size:13px}
.f-pv:hover{color:var(--text)}
@media(prefers-reduced-motion:reduce){.cm-dim,.cm-box{animation:none}.case:hover{transform:none}}

/* ── 섹션 테마 반전 (v7 Iron Law 2차) ─────────────────────────────
   다크만 이어붙이면 섹션 경계가 사라져 스크롤이 한 덩어리로 읽힌다.
   CSS 변수는 상속되므로, 섹션에 .on-light 를 주면 그 안 모든 요소가
   자동으로 밝은 팔레트를 쓴다. 개별 규칙을 다시 안 써도 된다.
   배치: 다크 → [상담폼 밝음] → 다크 → [해결후기 밝음] → 다크 */
.on-light{
  background:var(--light-bg);
  /* color 는 상속 속성이라 body 에서 이미 확정된 값이 내려온다.
     변수만 바꾸면 h2 처럼 color 미지정 요소가 그대로 밝은 글자로 남는다.
     → 이 지점에서 color 를 다시 선언해 서브트리를 재계산시킨다. */
  color:var(--light-text);
  --bg:var(--light-bg);
  --bg-2:#E4EAF3;
  --surface:var(--light-surface);
  --surface-2:#E9EEF6;
  --line:var(--light-line);
  --text:var(--light-text);
  --text-2:var(--light-text-2);
  --text-3:#5D6C84;          /* 4.5:1 확보. #67768E 는 4.1 로 미달이었다(삭제 금지 disclaimer 가독성) */
  --accent:#1F5FC4;          /* 밝은 배경에선 액센트를 진하게 (대비 5.3:1) */
  --accent-2:#1F5FC4;
  --accent-soft:rgba(31,95,196,.10);
  --sh-card:0 4px 16px rgba(18,32,58,.09);
  --sh-lift:0 14px 34px rgba(18,32,58,.13);
}
.on-light .sec-sub{color:var(--text-2)}
.on-light .rev-head .tag{background:var(--accent-2);color:#fff}
.on-light .rev-head .who{color:var(--text-3)}
.on-light .rev-item .body{color:var(--text-2)}
.on-light .agree a{color:var(--accent)}
.on-light .qform input{background:var(--light-surface);border-color:var(--line);color:var(--text)}
.on-light .qform input::placeholder{color:#8494AB}
.on-light .rev-dot{background:#C3CEDE}
.on-light .rev-dot.on{background:var(--accent)}


/* ── 플로팅 재설계 (QA 08-15) ───────────────────────────────────
   기존: 우측 중앙 세로 카드 묶음 → 카드 배경이 다크와 겹쳐 전화 아이콘이 묻혔다.
   변경: 카드 제거, 하단 우측 원형 버튼만. 스크롤을 조금 내리면 떠오른다. */
.side{position:fixed;right:18px;left:auto;top:auto;bottom:20px;transform:translateY(14px);
  z-index:60;background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible;width:auto;
  display:flex;flex-direction:column;gap:11px;opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,.61,.36,1)}
.side.show{opacity:1;transform:none;pointer-events:auto}
.side a{position:relative;width:56px;height:56px;border-radius:50%;padding:0;border:0;gap:0;font-size:0;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 20px rgba(0,0,0,.42);transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.side a+a{border-top:0}
.side a:hover{transform:translateY(-3px)}
.side a .ic{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center}
.side .i-kakao{background:var(--kakao)}
.side .i-kakao svg{color:#181600;fill:#181600}
.side .i-form{background:var(--accent-2)}
.side .i-form svg{stroke:#fff}
.side .i-map{background:var(--surface-2);border:1px solid var(--line)}
.side .i-map svg{stroke:var(--text)}
.side a::after{content:attr(data-label);position:absolute;right:66px;top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;background:var(--surface);color:var(--text);font-size:12.5px;font-weight:700;
  padding:7px 11px;border-radius:var(--r-sm);border:1px solid var(--line);opacity:0;
  transition:opacity .2s,transform .2s;pointer-events:none}
.side a:hover::after{opacity:1;transform:translateY(-50%)}
@media(max-width:820px){.side{right:14px;bottom:14px;gap:9px}.side a{width:50px;height:50px}
  .side a::after{display:none}}
@media(prefers-reduced-motion:reduce){.side{transition:none}.side a:hover{transform:none}}

/* ── 절차 카드 재설계 (QA 08-15) ────────────────────────────────
   업종 클리셰(전화·문서·차트 아이콘)를 걷어냈다. 아이콘은 정보를 더하지 않고
   "AI가 붙인 티"만 남긴다. 대신 번호 자체를 조형 요소로 키우고,
   단계별 진행률 바로 "어디까지 왔는지"를 시각화한다. */
.step{padding:30px 26px 28px}
.step-n{display:block;font-family:Georgia,"Times New Roman",serif;font-size:44px;line-height:1;
  font-weight:400;color:var(--accent);opacity:.85;letter-spacing:-.02em;margin-bottom:14px}
.step-bar{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-bottom:18px}
.step-bar i{display:block;height:100%;background:var(--accent);border-radius:2px;
  transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.22,.61,.36,1) .15s}
.step[data-anim].in .step-bar i{transform:scaleX(1)}
.step h3{font-size:18.5px;margin-bottom:9px}
.step p{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.step-bar i{transition:none;transform:scaleX(1)}}

/* duo: 원형 골드 그래픽(뻔한 장식) 제거. 대각 광택만 남겨 면으로 승부한다 */
.duo-art{display:none}
.duo a{padding:34px 32px;background-image:
  linear-gradient(115deg,transparent 55%,rgba(255,255,255,.055) 100%)}
.duo .b1{background:linear-gradient(112deg,#153A6B 0%,#102D53 62%,#0C2340 100%)}

/* ── 사례 카드 재구성 (QA 08-15) ────────────────────────────────
   지적: 카드 6장이 전부 똑같아 보인다 + 결과 문구가 카드 아래 작게 깔려 눈에 안 들어온다.
   변경: 대화 모형은 배경(질감)으로 낮추고, 실제 결과 문구를 카드 중앙 주인공으로 올린다.
        카드마다 결과 텍스트가 다르므로 6장이 서로 구별된다. */
.tk-veil{position:absolute;inset:0;background:linear-gradient(180deg,
  rgba(11,20,33,.30) 0%, rgba(11,20,33,.86) 46%, rgba(11,20,33,.95) 100%)}
.tk-lead{position:absolute;left:0;right:0;bottom:0;padding:0 20px 20px;text-align:left}
.tk-lead .case-tag{display:inline-block;margin-bottom:10px}
.tk-result{font-size:17px;font-weight:800;line-height:1.45;letter-spacing:-.03em;color:#fff;
  margin-bottom:10px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.tk-state{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;
  color:var(--text-2);border:1px solid var(--line);border-radius:999px;padding:4px 11px;
  background:rgba(11,20,33,.7)}
.tk-state::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent)}
.case-meta{justify-content:center;margin-top:14px}
.case-more{margin-left:0;font-size:13px}
.talk .stamp{bottom:auto;top:16px;right:16px;width:62px;height:62px;font-size:17px;z-index:3}
.case:hover .tk-veil{background:linear-gradient(180deg,
  rgba(11,20,33,.22) 0%, rgba(11,20,33,.82) 46%, rgba(11,20,33,.94) 100%)}
@media(max-width:820px){.tk-result{font-size:16px}}

/* ── 엠블럼 재설계 (QA 08-15) ──────────────────────────────────
   지적: 브랜드명만 덩그러니 있어 심심하다.
   로고를 뺀 자리라 타이포 자체가 조형이 되어야 한다.
   ① 泰山 한자를 대형 워터마크로 깔아 깊이를 만들고
   ② 국문·영문 사이에 가는 룰을 넣어 조판 리듬을 준다
   ③ 캡션은 대비 낮춰 위계를 3단으로 분리 */
.emblem{position:relative;overflow:hidden}
.em-mark{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  font-size:210px;font-weight:800;line-height:1;letter-spacing:-.04em;
  color:rgba(255,255,255,.045);pointer-events:none;user-select:none;white-space:nowrap}
.emblem-word{position:relative;z-index:2;text-align:center;margin-bottom:20px}
.emblem-word b{display:block;font-size:36px;font-weight:800;letter-spacing:-.045em;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
.em-rule{display:block;width:34px;height:1px;margin:14px auto;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.emblem-word i{display:block;font-style:normal;font-size:11.5px;font-weight:600;
  letter-spacing:.42em;color:rgba(255,255,255,.55);text-indent:.42em}
.emblem .cap{position:relative;z-index:2}
.emblem .cap span{font-size:13px;letter-spacing:-.01em;font-weight:600;
  color:rgba(255,255,255,.62);border-top:1px solid rgba(255,255,255,.10);padding-top:16px;display:block}
@media(max-width:820px){.em-mark{font-size:150px}.emblem-word b{font-size:29px}}

/* ── 초과이자 계산기 (v7 킥) ────────────────────────────────────
   방문자의 유일한 질문 "얼마나 뜯겼나"에 즉답한다. 결과 숫자가 주인공이므로
   입력부는 조용하게, 출력부는 액센트로 크게. */
.calc{background:var(--bg-2)}
.calc-box{max-width:760px;margin:44px auto 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:38px 38px 30px;box-shadow:var(--sh-card)}
.calc-in{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;align-items:end}
.cf{display:flex;flex-direction:column;gap:9px}
.cf-l{font-size:13.5px;font-weight:700;color:var(--text-2)}
.cf-w{position:relative;display:block}
.cf-w input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:15px 42px 15px 15px;font-size:16px;font-weight:700;color:var(--text);
  font-family:inherit;letter-spacing:-.02em;transition:border-color .2s,box-shadow .2s}
.cf-w input::placeholder{color:var(--text-3);font-weight:500}
.cf-w input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cf-w i{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-style:normal;
  font-size:13px;font-weight:600;color:var(--text-3);pointer-events:none}
.calc-go{grid-column:1/-1;margin-top:6px;background:var(--accent-2);color:#fff;border:0;
  border-radius:var(--r-sm);padding:17px;font-size:16.5px;font-weight:800;font-family:inherit;
  letter-spacing:-.02em;cursor:pointer;transition:transform .2s,filter .2s}
.calc-go:hover{filter:brightness(1.08);transform:translateY(-1px)}
.calc-go:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.calc-out{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.calc-out[hidden]{display:none}
.co-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:18px}
.co-k{font-size:14px;font-weight:700;color:var(--text-2)}
.co-v{font-size:19px;font-weight:800;color:var(--text);letter-spacing:-.02em}
.co-main{background:var(--accent-soft);border:1px solid rgba(91,156,248,.28);border-radius:var(--r-md);
  padding:24px 26px;text-align:center}
.co-main .co-k{display:block;margin-bottom:10px;color:var(--accent)}
.co-big{display:block;font-size:44px;font-weight:800;letter-spacing:-.04em;color:var(--text);line-height:1.1}
.co-none{margin:0;padding:22px 24px;background:var(--surface-2);border-radius:var(--r-md);
  font-size:15px;line-height:1.7;color:var(--text-2);text-align:center}
.co-none[hidden]{display:none}
.co-cta{display:block;margin-top:16px;text-align:center;background:var(--accent-2);color:#fff;
  text-decoration:none;border-radius:var(--r-sm);padding:16px;font-size:16px;font-weight:800;
  transition:transform .2s,filter .2s}
.co-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}

.calc-legal{margin-top:22px;text-align:center;font-size:12.5px;color:var(--text-3)}
.calc-legal b{color:var(--accent);font-weight:800}
.calc-note{margin-top:10px;text-align:center;font-size:12.5px;line-height:1.65;color:var(--text-3)}
.calc-priv{margin-top:8px;text-align:center;font-size:12px;color:var(--text-3);opacity:.8}
@media(max-width:820px){
  .calc-box{padding:26px 20px 22px}
  .calc-in{grid-template-columns:1fr;gap:13px}
  .co-big{font-size:34px}
}

/* ── 1안: 계산기를 첫 화면으로 (v7 킥 전면 배치) ─────────────────
   경쟁사는 전부 "상담하세요"로 시작한다. 우리만 "계산해보세요"로 시작한다.
   히어로 하단을 파고들게 겹쳐서, 스크롤 없이도 도구가 눈에 들어오게 만든다. */
.hero{padding-bottom:150px!important}
.calc{background:transparent;padding-top:0;margin-top:-118px;position:relative;z-index:5}
.calc>.wrap>h2,.calc>.wrap>.sec-sub{display:none}      /* 히어로가 이미 말했다 — 제목 중복 제거 */
.calc-box{margin-top:0;background:var(--surface);border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(0,0,0,.46);backdrop-filter:blur(2px)}
.calc-lead{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:-4px 0 20px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.calc-lead b{font-size:17px;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.calc-lead span{font-size:12.5px;font-weight:700;color:var(--accent);
  background:var(--accent-soft);border-radius:999px;padding:6px 12px;white-space:nowrap}
@media(max-width:820px){
  .hero{padding-bottom:110px!important}
  .calc{margin-top:-86px}
  .calc-lead{flex-direction:column;align-items:flex-start;gap:9px}
}

/* ── 2안: 절차 가로 스크롤 레일 ─────────────────────────────────
   6개 카드가 한눈에 다 보이면 그냥 지나친다. 세로 스크롤을 가로 이동으로 바꿔
   단계를 하나씩 따라가게 만든다. sticky + translateX 만으로 구현(라이브러리 없음).
   ⚠️ 모바일에서는 가로 이동이 어색하므로 기존 세로 그리드로 되돌린다. */
@media(min-width:821px){
  .proc-rail{padding:0!important;background:var(--bg)}
  .rail-track{height:330vh;position:relative}          /* 스크롤 길이 = 이동 거리 */
  .rail-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
    justify-content:center;overflow:hidden}
  .rail-head{flex:none;margin-bottom:40px}
  .rail-prog{max-width:220px;height:2px;margin:26px auto 0;background:var(--line);border-radius:2px;overflow:hidden}
  .rail-prog i{display:block;height:100%;width:0;background:var(--accent);border-radius:2px}
  .proc-rail .steps{display:flex;grid-template-columns:none;gap:22px;margin:0;
    padding-left:calc((100vw - var(--wrap))/2 + 10px);will-change:transform}
  .proc-rail .step{flex:0 0 348px;min-height:250px;opacity:.42;
    transition:opacity .35s ease,transform .35s cubic-bezier(.22,.61,.36,1)}
  .proc-rail .step.near{opacity:1;transform:translateY(-6px)}
  .proc-rail .step-n{font-size:52px}
}
@media(prefers-reduced-motion:reduce){
  .rail-track{height:auto}
  .rail-stage{position:static;height:auto}
  .proc-rail .steps{flex-wrap:wrap;padding-left:0;transform:none!important}
  .proc-rail .step{flex:1 1 300px;opacity:1}
}

/* =====================================================================
   멀티페이지 전환 추가분 (2026-08-17)
   ① 서브페이지 헤더  ② 모바일 햄버거  ③ 모바일 가로 캐러셀
   ===================================================================== */

/* ── ① 서브페이지 헤더 ─────────────────────────────────────────────
   메인의 .nav 는 히어로 위에 겹치는 absolute 다. 히어로가 없는
   서브페이지에서 그대로 두면 본문 위에 떠서 첫 줄을 가린다. */
body.sub .nav{position:relative;background:var(--bg-2);border-bottom:1px solid var(--line)}
body.sub #app > section:nth-of-type(1){padding-top:72px}
body.sub .brand-txt{color:var(--text)}

.brand{text-decoration:none}
.menu a[aria-current="page"]{color:var(--accent)}

/* ── ② 모바일 햄버거 ───────────────────────────────────────────────
   🔴 이전까지 모바일엔 메뉴가 0개였다(.menu{display:none} 만 있었음).
   데스크톱에선 버튼을 감추고 기존 가로 메뉴를 그대로 쓴다. */
.nav-burger{display:none;width:44px;height:44px;border:0;background:transparent;
  cursor:pointer;padding:10px;flex-direction:column;justify-content:space-between}
.nav-burger i{display:block;height:2px;width:100%;background:var(--text);border-radius:2px;
  transition:transform .28s ease,opacity .2s ease}
body.sub .nav-burger i{background:var(--text)}
.nav-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(9px) rotate(45deg)}
.nav-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.nav-panel[hidden],.nav-dim[hidden]{display:none}
.nav-panel{position:fixed;top:0;right:0;bottom:0;width:min(78vw,320px);z-index:120;
  background:var(--surface);border-left:1px solid var(--line);padding:88px 24px 28px;
  display:flex;flex-direction:column;gap:6px;overflow-y:auto;
  box-shadow:-18px 0 46px rgba(0,0,0,.42);animation:npIn .26s cubic-bezier(.22,.61,.36,1) both}
@keyframes npIn{from{transform:translateX(100%)}to{transform:none}}
.nav-panel nav{display:flex;flex-direction:column}
.nav-panel a{padding:15px 4px;font-size:16.5px;font-weight:700;color:var(--text);
  border-bottom:1px solid var(--line);text-decoration:none}
.nav-panel a[aria-current="page"]{color:var(--accent)}
.nav-panel-cta{margin-top:22px;display:flex;flex-direction:column;gap:10px}
.nav-panel-cta a{text-align:center;border-radius:var(--r-md);border-bottom:0;padding:14px}
.np-kakao{background:var(--kakao);color:#3B1E1E!important}
.np-tel{background:var(--accent-2);color:#fff!important}
.nav-dim{position:fixed;inset:0;z-index:110;background:rgba(6,14,26,.58);
  animation:cmFade .2s ease both}

@media(max-width:900px){
  .nav-burger{display:flex}
  .nav-in{position:relative;z-index:130}
}
@media(min-width:901px){ .nav-panel,.nav-dim{display:none!important} }
@media(prefers-reduced-motion:reduce){ .nav-panel{animation:none} }

/* ── ③ 모바일 가로 캐러셀 (고객 빨간펜 08-17) ──────────────────────
   고객 원문이 4곳에서 반복됐다: "축소해서 가로로 보이게" ·
   "가로로 애니메이션 처럼 넘어가게" · "모든 사항들 축소해서 가로로".
   뿌리는 하나다 — **모바일에서 세로로 늘어져 스크롤이 끝없다.**

   ⚠️ 우리는 v7에서 절차 가로 레일을 `@media(min-width:821px)` 안에만 넣고
      "모바일에선 가로 이동이 어색하다"고 판단했다. 고객은 정반대를 원했고,
      정보밀도 문제로 보면 고객이 맞다. 판단을 뒤집는다.

   방식: scroll-snap 캐러셀. 라이브러리 없이 손가락으로 넘긴다.
   다음 카드가 살짝 보이게 폭을 82%로 잡아 "옆에 더 있다"를 알린다 —
   이게 없으면 가로 스크롤이 있는 줄 모른다. */
@media(max-width:820px){
  .pills,
  .cases,
  .proc-rail .steps{
    display:flex!important;
    grid-template-columns:none!important;
    flex-wrap:nowrap!important;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* .wrap 좌우 여백(24px)을 넘어 화면 끝까지 흐르게 한다 */
    margin-left:-24px; margin-right:-24px;
    padding:4px 24px 6px;
  }
  .pills::-webkit-scrollbar,
  .cases::-webkit-scrollbar,
  .proc-rail .steps::-webkit-scrollbar{display:none}

  .pills > *,
  .cases > *,
  .proc-rail .steps > *{
    flex:0 0 82%;
    scroll-snap-align:center;
    min-height:0;
  }
  /* 레일 JS 는 821px 미만에서 빠지므로 sticky 잔재를 되돌린다.
     🔴 음수 마진은 여기서 **취소**한다. .pills/.cases 는 좌우 24px 패딩을 가진
        .wrap 안에 있어 -24px 이 화면 끝에 딱 맞지만, .steps 는 .rail-stage
        직속이라 패딩이 없다. 그대로 두면 폭이 390→438 이 되어 **문서 전체에
        가로 스크롤**이 생긴다(08-17 전수검사에서 모바일·태블릿 둘 다 검출). */
  .proc-rail .steps{transform:none!important;will-change:auto;
    margin-left:0!important;margin-right:0!important;
    padding-left:24px!important;padding-right:24px!important}
  .proc-rail .step{opacity:1!important}
  .rail-track{height:auto!important}
  .rail-stage{position:static!important;height:auto!important;overflow:visible!important}

  /* 카운터 3종은 이미 가로 3열이라 캐러셀이 필요 없다. 폭만 줄인다.
     (고객 "축소해서 가로로" — v7 에서 이미 가로였고 요구는 축소 쪽) */
  .stats{gap:10px}
  .stat{padding:18px 8px}
  .stat .v{font-size:32px}
  .stat .k{font-size:13px}
  .stat .b{font-size:11px}

  /* 옆에 더 있다는 신호 */
  .swipe-hint{display:block;margin-top:12px;text-align:center;
    font-size:12px;color:var(--text-3);letter-spacing:.02em}
}
@media(min-width:821px){ .swipe-hint{display:none} }

/* 후기는 캐러셀로 만들지 않는다.
   이미 .rev-page.on 에 translateX(26px) 슬라이드-인 애니메이션이 있어서
   모바일에서 한 건씩 넘기면 그대로 "가로로 넘어가는" 동작이 된다.
   (app.js 가 모바일에서 perPage 를 1로 낮춘다)
   여기에 flex 캐러셀을 겹치면 display:none 이 덮여 전 페이지가 한꺼번에 보인다. */

/* 후기 0건일 때 전용 페이지 안내 (창작 후기 삭제 08-17의 짝) */
.rev-empty{max-width:520px;margin:44px auto 0;padding:46px 30px;text-align:center;
  background:var(--light-surface);border:1px solid var(--light-line);border-radius:var(--r-lg)}
.rev-empty .re-t{font-size:18px;font-weight:800;color:var(--light-text);letter-spacing:-.02em}
.rev-empty .re-d{margin-top:10px;font-size:14.5px;line-height:1.7;color:var(--light-text-2)}
.rev-empty .re-cta{display:inline-block;margin-top:24px;padding:14px 30px;border-radius:var(--r-md);
  background:var(--accent-2);color:#fff;font-weight:700;font-size:15px;text-decoration:none}

/* ── 모바일 터치 타깃 (08-17 전수검사) ────────────────────────────
   동의문의 [자세히보기] 22px · 푸터 개인정보처리방침 15px 이었다.
   손가락으로 정확히 누르기 어렵다 — 특히 처방침은 개인정보를 맡기기 전
   확인하는 링크라 못 누르면 곤란하다. 세로 여백으로 44px 을 확보한다.
   (글자 크기는 그대로 두고 padding 만 키운다 — 레이아웃이 흔들리지 않게) */
/* 🔴 뷰포트 제한을 걷어낸다. 모바일만 잡아뒀더니 데스크톱에서 [자세히보기] 22px,
   푸터 처방침 15px 로 남아 WCAG 2.5.8(24×24) 미달이었다.
   개인정보를 맡기기 전 확인하는 링크라 입력장치와 무관하게 눌리기 쉬워야 한다. */
.agree{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.agree a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.f-pv{display:inline-flex;align-items:center;min-height:44px;padding:0 8px}

/* 네이버 카페 플로팅 버튼 (08-17 고객 지시 — 카톡 밑)
   공식 로고 파일을 쓰지 않고 N 자를 직접 조판했다(상표 안전).
   배경만 네이버 브랜드 그린을 쓴다. */
.side .i-naver{background:#03C75A;color:#fff}

/* 브랜드 로고 (08-17 복원)
   고객: "로고도 안들어가 있어여 / 기존에 만들어주신걸루"
   v6 에서 엠블럼을 뺐던 걸 트랙B 벡터 정본으로 되살린다.
   nav = 엠블럼만(옆에 브랜드 텍스트가 있어 워드마크가 겹친다)
   푸터 = 엠블럼+워드마크 전체 조합 */
.brand{gap:11px}
.brand-mark{display:block;width:40px;height:40px;flex:none}
@media(max-width:900px){ .brand-mark{width:34px;height:34px} }
.f-logo{display:block;width:132px;height:auto;margin:0 auto 18px;opacity:.92}
.footer .f-top{margin-top:0}

/* 🔴 08-17 고객: "모바일에서 로고위치가 왼쪽으로 치우쳐져있는데 중앙으로".
   `.lw-firmlogo{align-self:flex-start}` 는 **데스크톱 전용 처방**이다. 거긴 사진이
   왼쪽·텍스트가 오른쪽인 가로 배치라 로고가 왼쪽에 붙어야 맞지만, 모바일은 카드가
   세로 중앙정렬로 바뀌어 로고만 혼자 왼쪽에 박힌다.
   ⚠️ 이 블록은 **파일 맨 끝**에 둔다. 위쪽 미디어쿼리(@820px)에 넣었더니
      그보다 뒤에 오는 `.lw-firmlogo` 기본 규칙이 같은 특이도로 이겨서 안 먹었다.
      (flex-start 를 넣은 원래 이유인 '가로로 늘어남'은 aspect-ratio 가 이미 막는다) */
@media(max-width:820px){
  .lw-firmlogo{align-self:center;margin:0 auto 12px}
}

/* =====================================================================
   진행 후기 (2026-08-24) — CTA 와 푸터 사이
   카드 3개 가로 + 페이지네이션. 모바일은 다른 섹션과 같은 캐러셀 규칙.
   ===================================================================== */
.guest{background:var(--bg-2);padding:var(--sec-pad) 0}
.guest h2{text-align:center}
.guest .sec-sub{text-align:center}

.gb-form{max-width:720px;margin:38px auto 46px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 26px 20px}
.gb-row{display:flex;gap:10px;margin-bottom:10px}
.gb-form input,.gb-form textarea{width:100%;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-md);padding:14px 16px;color:var(--text);font-size:15px;
  font-family:inherit;line-height:1.6}
.gb-form input::placeholder,.gb-form textarea::placeholder{color:var(--text-3)}
.gb-form input:focus,.gb-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.gb-form textarea{resize:vertical;min-height:92px}
.gb-go{flex:none;min-width:120px;min-height:48px;border:0;border-radius:var(--r-md);
  background:var(--accent-2);color:#fff;font-weight:700;font-size:15px;cursor:pointer}
.gb-go:hover{background:var(--accent)}
.gb-go:disabled{opacity:.6;cursor:default}
/* 🔴 이 업종에선 이 한 줄이 방문자를 지킨다. 눈에 띄게 둔다. */
.gb-notice{margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--accent);
  background:var(--accent-soft);border-radius:var(--r-sm);padding:9px 12px}
.gb-msg{margin-top:10px;font-size:13.5px;min-height:19px;color:var(--text-2)}
.gb-msg.ok{color:#63D298}
.gb-msg.warn{color:#FFB4A2}

.gb-list{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.gb-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:24px 22px;display:flex;flex-direction:column;gap:12px;min-height:160px}
.gb-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.gb-head b{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.02em}
.gb-head time{font-size:12.5px;color:var(--text-3);flex:none}
.gb-body{font-size:14.5px;line-height:1.75;color:var(--text-2);white-space:normal;
  overflow-wrap:anywhere}
.gb-empty{grid-column:1/-1;text-align:center;padding:44px 0;color:var(--text-3);font-size:14.5px}

.gb-nav{display:flex;justify-content:center;gap:8px;margin-top:32px}
.gb-pg{min-width:40px;min-height:40px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:transparent;color:var(--text-2);font-size:14px;font-weight:700;cursor:pointer}
.gb-pg:hover{border-color:var(--accent);color:var(--text)}
.gb-pg.on{background:var(--accent-2);border-color:var(--accent-2);color:#fff}

@media(max-width:820px){
  .gb-list{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;
    gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;margin-left:-24px;margin-right:-24px;padding:4px 24px 6px}
  .gb-list::-webkit-scrollbar{display:none}
  .gb-list > *{flex:0 0 82%;scroll-snap-align:center}
  .gb-empty{flex:1 1 100%}
  .gb-row{flex-direction:column}
  .gb-go{width:100%}
  .gb-form{padding:22px 18px 16px;margin-bottom:34px}
}