/* index.html에서 분리한 페이지 스타일 (홈/스타일리스트찾기/마이 탭).
   소유: 디자이너(web/*.css). 인라인이던 걸 외부화 — 충돌면 축소 + 규칙(색·폰트·간격은 tokens.css) 준수. */
  /* 토큰·리셋·바디는 tokens.css가 담당(:root, *, body). 여기는 화면별 레이아웃 CSS만. */
  a{color:inherit; text-decoration:none; cursor:pointer;}
  /* 스크롤바 자리 항상 예약 — 콘텐츠 높이가 바뀌어(완료 화면 등) 스크롤바가 사라져도 폭이 안 변하게(내비·본문 고정) */
  html{overflow-y:scroll; scrollbar-gutter:stable;}   /* 스크롤바 항상 강제 → 페이지 이동 시 내비 좌우 밀림 방지 */
  /* 푸터 하단 고정(sticky footer): body 세로 플렉스 + 본문이 남는 공간 채움 */
  body{min-height:100vh; display:flex; flex-direction:column; overflow-x:clip;}

  /* 헤더 */
  header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
  .nav{max-width:1320px; margin:0 auto; height:66px; display:flex; align-items:center; gap:48px; padding:0 24px;}
  .logo{display:inline-block; font-size:22px; font-weight:800; letter-spacing:-.05em; color:var(--green); line-height:1;}
  .logo .sq{display:inline-block; width:6px; height:6px; background:var(--green); margin-left:2px; vertical-align:baseline;}
  .menu{display:flex; gap:2px;}
  .menu a{position:relative; padding:8px 14px; border-radius:10px; font-size:16px; font-weight:600; color:var(--sub);}
  .menu a:hover{color:var(--ink);}
  .menu a.on{color:var(--ink); font-weight:800;}
  .menu a.on::after{content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:3px; width:5px; height:5px; border-radius:50%; background:var(--green);}
  .navr{position:relative; margin-left:auto; display:flex; align-items:center; gap:16px; font-size:15px; color:var(--sub);}
  /* 헤더 아바타 드롭다운(마이페이지·로그아웃) — 스타일리스트 화면과 동일 패턴 */
  .navr .usermenu{position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.13); padding:6px; display:none; z-index:60; min-width:150px;}
  .navr .usermenu.on{display:block;}
  .navr .usermenu a{display:block; padding:10px 12px; font-size:13.5px; font-weight:700; color:var(--ink); border-radius:8px; cursor:pointer;}
  .navr .usermenu a:hover{background:var(--soft);}
  .navr .sup{font-weight:700; color:var(--green);}
  /* 헤더 우상단 사용자 = 아바타 + 이름(마이 사이드 프로필 카드 대체) */
  .navr .navdiv{width:1px; height:18px; background:var(--line2); display:inline-block; flex:none;}
  .navr .navuser{display:flex; align-items:center; gap:9px; cursor:pointer;}
  .navr .navname{color:var(--ink); font-weight:700;}
  .navr .navav{width:34px; height:34px; border-radius:50%; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; overflow:hidden; flex:none;}
  .navr #myAv .head{margin-top:0; transform:scale(.58); transform-origin:center;}

  .wrap{max-width:1240px; margin:0 auto; padding:0 30px; width:100%; flex:1 0 auto;}
  .page{display:none; animation:f .3s cubic-bezier(.2,.8,.2,1); padding:38px 0 90px;}
  .page.on{display:block;}
  @keyframes f{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
  /* 스타일리스트찾기 화면 전환 — 잔잔한 페이드 */
  @keyframes viewIn{from{opacity:0;} to{opacity:1;}}

  h2.sec{font-size:25px; font-weight:800; letter-spacing:-.04em; margin:44px 0 18px;}   /* 내비 메인 카피 크기 통일(마이 h1·Fit jtitle과 25px) */
  /* .btn 은 tokens.css 정의(잉크블랙, hover #000)를 그대로 사용. 아래는 화면별 변형만. */
  .btn{padding:14px 24px; border-radius:13px; font-size:16px; font-family:inherit;}
  .btn.beige{background:var(--ink);}
  .btn.ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line2);}
  .btn.full{display:block; width:100%; text-align:center;}
  /* .chip 은 tokens.css 정의(선택 시 딥그린 채움) 사용. 화면별 크기만 보정. */
  .chip{padding:9px 16px; border-radius:30px; font-size:15px; font-weight:600; background:#fff;}

  /* ===== 홈 (줄자 리디자인 · _home2 이식) ===== */
  #home .hrow{max-width:1160px;margin:0 auto;padding:0 6px}
  #home .invite-banner{display:none; align-items:center; gap:14px; margin:20px 0 -10px; padding:15px 18px; background:var(--ink); color:#fff; border-radius:16px; box-shadow:0 8px 22px rgba(20,18,16,.22); animation:f .3s;}
  #home .invite-banner.on{display:flex;}
  #home .invite-banner .ib-ic{flex:none; width:26px; height:26px; color:#9FD9B7;}   /* 선물 = 선 아이콘(이모지 아님) · 차콜 배경 위 민트 포인트 */
  #home .invite-banner .ib-ic svg{width:100%; height:100%; display:block;}
  #home .invite-banner .ib-tx{flex:1; min-width:0; line-height:1.4;}
  #home .invite-banner .ib-tx b{display:block; font-size:16px; font-weight:800;}
  #home .invite-banner .ib-tx span{font-size:13px; opacity:.75;}
  #home .invite-banner .ib-cta{flex:none; background:#fff; color:var(--ink); font-weight:800; font-size:14px; padding:10px 16px; border-radius:10px; border:none; cursor:pointer; white-space:nowrap; font-family:inherit;}
  #home .invite-banner .ib-x{flex:none; background:transparent; border:none; color:#fff; opacity:.6; font-size:16px; cursor:pointer; padding:4px;}
  #home .invite-banner .ib-x:hover{opacity:1;}
  @media(max-width:560px){ #home .invite-banner{flex-wrap:wrap;} #home .invite-banner .ib-cta{order:3;} }
  #home .hhero{position:relative;overflow:hidden;padding:60px 0 74px;text-align:center}
  #home .kick{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--green);background:var(--green-soft);padding:8px 16px;border-radius:20px}
  #home .kick .dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:hpulse 1.8s ease-in-out infinite}
  @keyframes hpulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
  #home .hhero h1{font-size:54px;font-weight:800;letter-spacing:-.055em;line-height:1.14;margin-top:22px}
  #home .hhero h1 b{color:var(--green)}
  #home .hhero .sub{font-size:19px;color:var(--sub);margin:20px auto 0;line-height:1.65;max-width:560px}

  /* ===== 히어로 온보딩(8체형 카드덱 애니) — _home-full 이식. 전부 #stage 스코프 ===== */
  #home .hhero:has(#stage){padding:40px 0 68px;overflow-x:visible;overflow-y:clip}
  #stage{position:relative;width:1000px;max-width:100%;height:600px;margin:0 auto;text-align:left;
    --l1-at:.8s;--l1-dur:2.55s;--l2-at:3.35s;--stack-in:.9s;--fall-span:.5s;--copy-gap:.45s;--copy-hold:2.2s;
    --copy-at:calc(var(--fall-span) + var(--stack-in) + var(--copy-gap));--bridge:calc(var(--copy-at) + var(--copy-hold));
    --t-deal:1.3s;--hold:.55s;--gap-copy:.8s;--gap-flip:.9s;--t-flip:1.1s;--tape-at:5.25s;--glint-at:5.95s}
  #stage::before{content:"";position:absolute;left:50%;top:-6%;width:820px;height:820px;margin-left:-410px;background:radial-gradient(circle at 50% 50%,var(--green-soft),transparent 62%);opacity:.6;pointer-events:none}
  #stage .intro{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:88%;pointer-events:none}
  #stage .intro .l{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:100%;text-align:center;font-size:clamp(28px,3.6vw,46px);font-weight:800;letter-spacing:-.05em;line-height:1.3;opacity:0;white-space:nowrap}
  #stage .intro .l .lg{color:var(--green);font-weight:800;letter-spacing:-.05em}
  #stage .intro .l .lg i{display:inline-block;width:.13em;height:.13em;border-radius:1px;background:var(--green);margin-left:.05em;vertical-align:baseline}
  #stage.run #l1{animation:l1 var(--l1-dur) ease var(--l1-at) both}
  @keyframes l1{0%{opacity:0}13%{opacity:1}82%{opacity:1}100%{opacity:0}}
  #stage.run #l2{animation:l2 .55s ease var(--l2-at) both}
  @keyframes l2{from{opacity:0}to{opacity:1}}
  #stage #mlogo{display:inline-block;line-height:1;vertical-align:baseline;transform-origin:center center;will-change:transform}
  #stage #tail{transition:opacity .45s ease}
  #stage .lock{position:absolute;left:50%;top:41%;transform:translate(-50%,-50%);width:min(600px,84%);text-align:center;pointer-events:none}
  #stage .lock .lgbig{display:inline-block;font-size:clamp(38px,5vw,64px);font-weight:800;letter-spacing:-.05em;color:var(--green);line-height:1;visibility:hidden}
  #stage .lock .lgbig i{display:inline-block;width:.12em;height:.12em;border-radius:1px;background:var(--green);margin-left:.05em;vertical-align:baseline}
  #stage .lock .uline{position:relative;height:22px;margin-top:30px}
  #stage .lock .uline .ticks{position:absolute;left:0;right:0;top:2px;height:18px;background-image:repeating-linear-gradient(90deg,var(--line2) 0 1.6px,transparent 1.6px 15px);clip-path:inset(0 100% 0 0)}
  #stage .lock .uline .fill{position:absolute;left:0;right:0;top:9px;height:4px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--green-mid) 46%,var(--green));box-shadow:0 0 10px rgba(46,74,59,.3);clip-path:inset(0 100% 0 0)}
  #stage .lock .uline .penmk{position:absolute;top:7px;left:0;width:8px;height:8px;margin-left:-4px;border-radius:1.5px;background:var(--green);opacity:0;box-shadow:0 0 7px rgba(46,74,59,.45)}
  #stage.run .uline .penmk{animation:tapePen .85s cubic-bezier(.35,.9,.3,1) var(--tape-at) both}
  @keyframes tapePen{0%{left:0;opacity:0;transform:scale(.6)}14%{opacity:1;transform:scale(1)}100%{left:100%;opacity:1;transform:scale(1)}}
  #stage .lock .uline .spark{position:absolute;top:11px;left:100%;margin-left:-2px;width:4px;height:4px;opacity:0;pointer-events:none;background:#fff;box-shadow:0 0 8px 2px var(--green-light,var(--green-light))}
  #stage .lock .uline .spark::before,#stage .lock .uline .spark::after{content:"";position:absolute;background:#fff;border-radius:2px}
  #stage .lock .uline .spark::before{inset:-6px 0;width:2px;left:1px}
  #stage .lock .uline .spark::after{inset:0 -6px;height:2px;top:1px}
  #stage.run .uline .ticks,#stage.run .uline .fill{animation:tapeDraw .85s cubic-bezier(.35,.9,.3,1) var(--tape-at) both}
  #stage.run .uline .spark{animation:tapeSpark 1.05s ease-in-out var(--glint-at) both}
  @keyframes tapeDraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes tapeSpark{0%{opacity:0;transform:scale(0) rotate(0deg)}45%{opacity:1;transform:scale(1.6) rotate(45deg)}100%{opacity:0;transform:scale(.5) rotate(70deg)}}
  #stage.handoff .intro,#stage.handoff .lock{opacity:0;transition:opacity .55s ease}
  #stage .midcopy{position:absolute;left:0;right:0;top:47%;text-align:center;font-size:clamp(24px,3.1vw,36px);font-weight:800;letter-spacing:-.03em;opacity:0;pointer-events:none;z-index:15;color:#fff;text-shadow:0 4px 14px rgba(0,0,0,.45);white-space:nowrap}
  #stage .midcopy .typebox{display:inline-block;text-align:left;white-space:nowrap;width:calc(var(--tw,7em) + .5em)}
  #stage .midcopy .txt{display:inline-block;overflow:hidden;white-space:nowrap;width:0;vertical-align:bottom;line-height:1.15}
  #stage .midcopy .dot{display:inline-block;width:.3em;height:.3em;border-radius:2px;background:var(--green-light,var(--green-light));margin-left:.1em;margin-bottom:.05em;vertical-align:bottom;opacity:0}
  #stage.play .midcopy{animation:mcShow var(--copy-hold) ease var(--copy-at) both}
  @keyframes mcShow{0%{opacity:0}7%{opacity:1}86%{opacity:1}100%{opacity:0}}
  #stage.play .midcopy .txt{animation:mcType calc(var(--copy-hold) * .42) steps(7,end) var(--copy-at) both}
  @keyframes mcType{from{width:0}to{width:var(--tw,7em)}}
  #stage.play .midcopy .dot{animation:dotCursor calc(var(--copy-hold) * .42 + .3s) linear var(--copy-at) forwards}
  @keyframes dotCursor{0%{opacity:1}10%{opacity:.12}22%{opacity:1}34%{opacity:.12}46%{opacity:1}58%{opacity:.12}70%{opacity:1}82%{opacity:.12}92%{opacity:1}100%{opacity:1}}
  #stage .deck{position:absolute;inset:0;opacity:0}
  #stage.play .deck{opacity:1;animation:deckStackDim var(--copy-hold) ease var(--copy-at) both,deckDim .5s ease calc(var(--bridge) + var(--t-deal) + var(--hold)) forwards}
  @keyframes deckStackDim{0%{opacity:1}14%{opacity:.5}80%{opacity:.5}100%{opacity:1}}
  @keyframes deckDim{to{filter:brightness(.5)}}
  /* ⚠ border:none 필수 — tokens.css의 공용 .card{border:var(--bd)}가 흰 테두리를 입힘(같은 클래스명 충돌).
     padding:0도 마찬가지(공용 .card는 24px). 모서리는 border-radius+overflow로(clip-path는 회전 시 톱니). */
  #stage .card{position:absolute;left:calc(50% - 100px);top:180px;width:200px;height:339px;background:var(--rc-bg);border:none;padding:0;border-radius:17px;overflow:hidden;transform-origin:50% 50%;backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:calc(8 - var(--i))}
  /* 낙하: 가속 하강 → 안착 → 아주 작은 되튐(9px→5px)으로 과장 줄임. 딜: 관성 있는 ease-out으로 매끄럽게 */
  #stage.play .card{animation:fallIn var(--stack-in) cubic-bezier(.4,0,.5,1) var(--fd) both,dealOnce var(--t-deal) cubic-bezier(.22,.75,.24,1) calc(var(--bridge) + var(--d)) forwards}
  @keyframes fallIn{0%{opacity:0;transform:translate(var(--fx,0),-310px) rotate(calc(var(--r) * 1.9));animation-timing-function:cubic-bezier(.45,0,.75,.7)}18%{opacity:1}68%{transform:translate(0,0) rotate(var(--r));animation-timing-function:cubic-bezier(.28,0,.35,1)}80%{transform:translate(0,-5px) rotate(var(--r));animation-timing-function:cubic-bezier(.4,0,.6,1)}92%{transform:translate(0,-1px) rotate(var(--r))}100%{opacity:1;transform:translate(0,0) rotate(var(--r))}}
  @keyframes dealOnce{0%{transform:rotate(var(--r))}100%{transform:translate(var(--x),var(--y)) rotate(var(--rot)) scale(var(--cs,1))}}
  #stage .card .hc{position:absolute;top:0;left:0;width:392px;height:664px;transform:scale(.5102);transform-origin:top left;color:#fff;display:flex;flex-direction:column;align-items:center;padding:26px 26px 30px;background:var(--rc-bg)}
  #stage .card .hc .ctop{width:100%;display:flex;justify-content:flex-start}
  #stage .card .hc .clogo{font-size:20px;font-weight:800;letter-spacing:-.05em}
  #stage .card .hc .clogo .sq{display:inline-block;width:6px;height:6px;background:currentColor;margin-left:2px;vertical-align:baseline}
  #stage .card .hc .hcbody{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
  #stage .card .hc .fig{position:relative;width:120px;height:184px;margin-bottom:6px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;transform:scale(.85)}
  #stage .card .hc .fig .head{width:32px;height:36px;margin-bottom:-3px;z-index:2;position:relative;flex:none}
  #stage .card .hc .fig .head .face{position:absolute;inset:0;border-radius:10px 10px 8px 8px;background:#ecd9c9;z-index:2;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 7px)}
  #stage .card .hc .fig .head .cap{position:absolute;top:-3px;left:-3px;right:-3px;height:13px;border-radius:10px 10px 45% 45%;background:#2a2b30;z-index:3}
  #stage .card .hc .fig .head.female .cap{background:#9a7350}
  #stage .card .hc .fig .head .longhair{position:absolute;top:-5px;left:-7px;right:-7px;bottom:1px;background:#9a7350;border-radius:50% 50% 36% 36% / 46% 46% 30% 30%;z-index:1}
  #stage .card .hc .fig .head .ey{position:absolute;top:18px;width:4px;height:5px;border-radius:50%;background:#2a2b30;z-index:4}
  #stage .card .hc .fig .head .ey.l{left:9px}
  #stage .card .hc .fig .head .ey.r{right:9px}
  #stage .card .hc .fig .body{width:120px;position:relative;flex:none;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,rgba(0,0,0,.16) 0 1px,transparent 1px 8px)}
  #stage .card .hc .fig .body.straight{clip-path:polygon(38% 0,62% 0,62% 64%,64% 100%,36% 100%,38% 64%)}
  #stage .card .hc .fig .body.aline{clip-path:polygon(40% 0,60% 0,60% 30%,88% 100%,12% 100%,40% 30%)}
  #stage .card .hc .fig .body.vline{clip-path:polygon(13% 0,87% 0,64% 40%,60% 100%,40% 100%,36% 40%)}
  #stage .card .hc .fig .body.xline{clip-path:polygon(17% 0,83% 0,57% 46%,87% 100%,13% 100%,43% 46%)}
  #stage .card .hc .fig .body.balance{clip-path:polygon(33% 0,67% 0,60% 50%,67% 100%,33% 100%,40% 50%)}
  #stage .card .hc .fig .body.diamond{clip-path:polygon(37% 0,63% 0,85% 50%,61% 100%,39% 100%,15% 50%)}
  #stage .card .hc .fig .body.round{clip-path:ellipse(45% 47% at 50% 53%)}
  #stage .card .hc .fig .body.tube{clip-path:polygon(43% 0,57% 0,57% 100%,43% 100%)}
  #stage .card .hc .code{margin-top:18px;font-size:14px;font-weight:800;letter-spacing:.22em;opacity:.92}
  #stage .card .hc .word{margin-top:12px;font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1;text-align:center}
  #stage .card .hc .tagline{margin-top:16px;font-size:17px;line-height:1.5;opacity:.8;text-align:center;max-width:300px}
  #stage .final{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;opacity:0;pointer-events:none;z-index:40}
  #stage.play .final{animation:finalFade .5s ease calc(var(--bridge) + var(--t-deal) + var(--hold) + var(--gap-copy)) both}
  #stage .final.on{pointer-events:auto}
  @keyframes finalFade{from{opacity:0}to{opacity:1}}
  #stage .copy{font-size:clamp(29px,3.75vw,44px);font-weight:800;letter-spacing:-.04em;line-height:1.24;text-align:center;margin-top:-0.3cm;margin-bottom:0.5cm}
  #stage .copy b{color:var(--green)}
  #stage .flip{width:230px;height:390px;perspective:1300px;margin-top:-0.6cm}
  #stage.play .flip{animation:drawUp .72s cubic-bezier(.33,.72,.28,1) calc(var(--bridge) + var(--t-deal) + var(--hold) + var(--gap-copy) + .05s) both}
  @keyframes drawUp{0%{transform:translateY(205px) scale(.86)}72%{transform:translateY(-6px) scale(1.01)}100%{transform:translateY(0) scale(1)}}
  #stage .flipin{position:relative;width:100%;height:100%;transform-style:preserve-3d}
  #stage.play .flipin{animation:doFlip var(--t-flip) cubic-bezier(.5,0,.25,1) calc(var(--bridge) + var(--t-deal) + var(--hold) + var(--gap-copy) + var(--gap-flip)) both}
  @keyframes doFlip{from{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}
  #stage .flip .face{position:absolute;inset:0;clip-path:inset(0 round 20px);backface-visibility:hidden;display:flex;flex-direction:column;color:#fff;padding:24px}
  #stage .flip .face .logo{font-size:18px;font-weight:800;letter-spacing:-.05em;color:rgba(255,255,255,.66)}
  #stage .flip .face .logo i{display:inline-block;width:5px;height:5px;background:currentColor;margin-left:2px;vertical-align:baseline}
  #stage .flip .front{background:linear-gradient(160deg,#20323f,#0f1014)}
  #stage .flip .front .q{flex:1;display:flex;align-items:center;justify-content:center;font-size:158px;font-weight:800;color:var(--green-light,var(--green-light));text-shadow:0 0 30px rgba(156,193,174,.4)}
  #stage .flip .front .qspark{position:absolute;top:30%;right:26%;width:7px;height:7px;opacity:0;background:#fff;box-shadow:0 0 8px 2px var(--green-light,var(--green-light))}
  #stage .flip .front .qspark::before{content:"";position:absolute;top:-5px;bottom:-5px;left:2.5px;width:2px;background:#fff;border-radius:2px}
  #stage .flip .front .qspark::after{content:"";position:absolute;left:-5px;right:-5px;top:2.5px;height:2px;background:#fff;border-radius:2px}
  #stage.play .flip .qspark{animation:tapeSpark 1s ease calc(var(--bridge) + var(--t-deal) + var(--hold) + var(--gap-copy) + .35s) both}
  #stage .flip .back{background:radial-gradient(ellipse 80% 40% at 50% 12%,rgba(156,193,174,.16),transparent 60%),linear-gradient(160deg,#1b2a21,#0f1014);transform:rotateY(180deg)}
  #stage .flip .back .bc{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}
  #stage .flip .back .bc .t{font-size:19px;font-weight:800;line-height:1.36}
  #stage .flip .back .bc .t b{color:var(--green-light,var(--green-light))}
  #stage .flip .back .bc .btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:13px;font-weight:800;padding:11px 18px;border-radius:12px;background:#fff;color:var(--rc-bg);border:0;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25)}
  #stage.done .intro,#stage.done .lock,#stage.done .midcopy{display:none}
  #stage.done .deck{opacity:1}
  #stage.done .card{transform:translate(var(--x),var(--y)) rotate(var(--rot));filter:brightness(.5)}
  #stage.done .final{opacity:1;pointer-events:auto}
  #stage.done .flip{transform:none}
  #stage.done .flipin{transform:rotateY(180deg)}
  #stage .skiphint{position:absolute;left:50%;transform:translateX(-50%);bottom:-40px;font-size:12.5px;font-weight:700;color:var(--sub);background:rgba(0,0,0,.045);border:1px solid var(--line);border-radius:20px;padding:6px 14px;cursor:pointer;z-index:60;pointer-events:auto}
  #stage .skiphint:hover{color:var(--ink);background:rgba(0,0,0,.09)}
  #stage.done .skiphint{display:none}
  @media(max-width:1040px){#stage{zoom:.74}}
  @media(max-width:720px){#stage{zoom:.54}}
  /* 모바일: 부채덱(고정 폭 ~1008px×zoom)이 화면보다 넓어 양끝 카드가 잘리던 것 →
     .4→.34로 낮춰 360·390·412px 모두 화면 안에 들어오게(덱은 균일 축소라 딜 애니 비례 유지) */
  /* 모바일만 zoom→transform:scale (iOS Safari는 zoom이 글씨를 안 줄여 온보딩 깨짐, #70).
     데스크탑은 위 zoom 유지(소희님 복원). transform은 레이아웃 높이를 안 줄여 margin-bottom으로 흡수.
     ⚠ 위 max-width:720 zoom:.54가 이 폭에도 걸리므로 zoom:1로 취소 후 transform 적용. */
  @media(max-width:470px){
    #home .hhero:has(#stage){display:flex;justify-content:center;align-items:flex-start;overflow:clip}
    #stage{zoom:1;max-width:none;margin:0 0 -228px;flex:none;transform:scale(.62);transform-origin:top center}
    #stage .skiphint{bottom:-96px}   /* 2줄 덱이 아래로 더 내려와 '건너뛰기'와 겹침 → 아래로 */
  }
  /* 넓은 화면에선 온보딩을 더 크게 — zoom은 레이아웃 박스까지 키워 잘림·여백 자동 처리(.wrap 콘텐츠폭 1180 안) */
  @media(min-width:1160px){#stage{zoom:1.08}}
  @media(min-width:1300px){#stage{zoom:1.16}}
  @media(prefers-reduced-motion:reduce){#stage *{animation:none!important}#stage .final{opacity:1}#stage .flipin{transform:rotateY(180deg)}#stage .intro,#stage .lock,#stage .deck{opacity:0}}
  /* 줄자(주인공) */
  #home .rulerwrap{max-width:740px;margin:50px auto 0;user-select:none}
  #home .ruler{position:relative;height:74px}
  /* 숫자 라벨을 눈금(0·25·50·75·100% = 150·160·170·180·190)에 정확히 정렬 */
  #home .ruler .nums{position:absolute;left:0;right:0;top:0;height:16px;font-size:13px;font-weight:800;color:var(--sub2);font-family:var(--num);font-feature-settings:'tnum'}
  #home .ruler .nums span{position:absolute;top:0;transform:translateX(-50%)}
  #home .ruler .nums span:nth-child(1){left:0;transform:none}
  #home .ruler .nums span:nth-child(2){left:25%}
  #home .ruler .nums span:nth-child(3){left:50%}
  #home .ruler .nums span:nth-child(4){left:75%}
  #home .ruler .nums span:nth-child(5){left:100%;transform:translateX(-100%)}
  #home .ruler .tape{position:absolute;left:0;right:0;top:28px;height:40px;border-radius:9px;background:linear-gradient(180deg,#fff,#FBFBFA);border:1px solid var(--line);overflow:hidden;box-shadow:0 8px 22px rgba(20,22,28,.07)}
  /* 눈금: JS가 정수 픽셀 위치로 선(i) 생성 → 균일 렌더. 얇은줄=2cm마다(양끝 제외), 굵은줄=160·170·180만 */
  #home .ruler .ticks{position:absolute;left:0;right:0;top:28px;height:40px;opacity:.9}
  #home .ruler .ticks i{position:absolute;top:0;height:100%;width:1px;background:var(--line2)}
  #home .ruler .ticks.major{height:17px}
  #home .ruler .ticks.major i{width:2px;margin-left:-1px;background:var(--sub2)}
  #home .ruler .shimmer{position:absolute;left:0;right:0;top:28px;height:40px;border-radius:9px;overflow:hidden;pointer-events:none}
  #home .ruler .shimmer::after{content:"";position:absolute;top:0;bottom:0;width:38%;background:linear-gradient(100deg,transparent,rgba(156,193,174,.4),transparent);transform:translateX(-160%);animation:hshim 3.6s ease-in-out 1.6s infinite}
  @keyframes hshim{0%{transform:translateX(-160%)}55%,100%{transform:translateX(320%)}}
  #home .ruler .marker{position:absolute;top:20px;bottom:0;width:2.5px;border-radius:2px;background:var(--green);left:2%;box-shadow:0 0 0 4px rgba(46,74,59,.1)}
  #home .ruler .marker::after{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 2px 6px rgba(46,74,59,.4)}
  #home .readout{margin-top:24px;display:inline-flex;align-items:baseline;gap:13px;justify-content:center}
  #home .readout .val{font-family:var(--num);font-feature-settings:'tnum';font-size:32px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
  #home .readout .val small{font-size:16px;font-weight:800;color:var(--sub2);margin-left:2px}
  #home .readout .sep{font-size:21px;color:var(--line2);font-weight:300}
  #home .measure-tag{margin-top:10px;font-size:14px;font-weight:700;color:var(--green)}
  #home .cta{display:flex;gap:12px;margin-top:40px;justify-content:center}
  #home .cta .btn{padding:16px 26px;border-radius:13px;font-size:16px;font-weight:800}
  #home .cta .btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line2)}
  #home .downhint{margin-top:36px;font-size:14px;color:var(--sub2);font-weight:700;display:inline-flex;flex-direction:column;align-items:center;gap:8px}
  #home .downhint .arr{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;animation:hbob 1.8s ease-in-out infinite}
  @keyframes hbob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
  /* 홈 섹션 공통 */
  #home .blk{padding:78px 0}
  #home .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:800;letter-spacing:.08em;color:var(--sub2);text-transform:uppercase;margin-bottom:16px}
  #home .eyebrow::before{content:"";width:26px;height:2px;background:var(--green);display:inline-block}
  #home .hsec{font-size:34px;font-weight:800;letter-spacing:-.045em;line-height:1.2}
  #home .lead{font-size:17px;color:var(--sub);margin-top:14px;line-height:1.6;max-width:560px}
  #home .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
  #home .reveal.in{opacity:1;transform:none}
  /* 이렇게 측정해요 (세로 줄자) */
  #home .how{position:relative;display:grid;grid-template-columns:44px 1fr;gap:34px;margin-top:52px}
  /* 정밀 줄자 — 가는 중심선 + 고운 눈금 + 딥그린 채움 + 브랜드 사각 마커 */
  #home .vtape{position:relative;width:26px;justify-self:center}
  #home .vtape .rail{position:absolute;left:50%;margin-left:-.5px;top:0;bottom:0;width:1px;background:var(--line2)}
  #home .vtape .ticks{position:absolute;left:50%;margin-left:-7px;top:0;bottom:0;width:14px;background:repeating-linear-gradient(180deg,var(--line2) 0 1px,transparent 1px 13px)}
  #home .vfill{position:absolute;left:50%;margin-left:-1.5px;top:0;width:3px;height:0;border-radius:3px;background:linear-gradient(180deg,var(--green-mid),var(--green));box-shadow:0 0 8px rgba(46,74,59,.25)}
  #home .vhead{position:absolute;left:50%;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:2.5px;background:var(--green);box-shadow:0 2px 8px rgba(46,74,59,.4)}
  #home .steps{display:flex;flex-direction:column;gap:16px}
  #home .step{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 30px;box-shadow:0 1px 2px rgba(20,22,28,.03);display:grid;grid-template-columns:54px 1fr auto;gap:22px;align-items:center}
  #home .step .ic{width:54px;height:54px;border-radius:15px;background:var(--green-soft);display:flex;align-items:center;justify-content:center;flex:none}
  #home .step .ic svg{width:26px;height:26px;color:var(--green)}   /* 스텝 아이콘 = 사이트 SVG 톤(딥그린 stroke) */
  #home .step .no{font-size:11.5px;font-weight:800;color:var(--green);letter-spacing:.14em}
  #home .step h3{font-size:19.5px;font-weight:800;letter-spacing:-.03em;margin:5px 0 7px}
  #home .step p{font-size:14.5px;color:var(--sub);line-height:1.6;max-width:520px}
  /* 스텝 지표 — 배경 없이 한 줄(줄바꿈 방지). 숫자·라벨 같은 크기, 붙여서 자연스럽게 */
  #home .step .big{flex:none;margin-left:20px;display:inline-flex;align-items:baseline;gap:0;white-space:nowrap}
  #home .step .big b{font-family:var(--num);font-feature-settings:'tnum';font-size:17.5px;font-weight:800;letter-spacing:-.01em;color:var(--green);line-height:1.4}
  #home .step .big>span{font-size:17.5px;color:var(--green);font-weight:800;letter-spacing:-.01em}
  /* 결과 카드 쇼케이스 (블러+잠금) */
  #home .showpanel{background:linear-gradient(180deg,#fff,#FBFBFA);border:1px solid var(--line);border-radius:28px;padding:52px}
  #home .show-in{display:grid;grid-template-columns:1fr 440px;gap:56px;align-items:center}
  #home .types{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:24px}
  #home .types .ty{font-size:14px;font-weight:800;font-family:var(--num);letter-spacing:.1em;color:var(--sub);background:#fff;border:1.5px solid var(--line2);padding:9px 15px;border-radius:11px;transition:.3s;text-align:center}
  #home .types .ty.on{color:#fff;background:var(--green);border-color:var(--green)}
  #home .tyname{margin-top:20px;font-size:15px;color:var(--sub)}#home .tyname b{color:var(--ink);font-weight:800}
  #home .stats{display:flex;gap:16px;margin-top:30px}
  #home .stat{flex:1;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 16px;text-align:center}
  #home .stat b{display:block;font-family:var(--num);font-feature-settings:'tnum';font-size:32px;font-weight:800;letter-spacing:-.02em;color:var(--green)}
  #home .stat small{font-size:13px;color:var(--sub2);font-weight:700}
  #home .showcard{justify-self:center}
  #home .showcard .cardprev{position:relative;width:340px;height:576px;border-radius:28px;overflow:hidden;box-shadow:0 30px 66px rgba(10,11,14,.24);background:var(--rc-bg)}
  #home .showcard .cardprev .cf{position:absolute;top:0;left:0;width:392px;height:664px;border:0;transform:scale(.867);transform-origin:top left;pointer-events:none;opacity:0;transition:opacity .55s ease;filter:blur(7px)}
  #home .showcard .cardprev .cf.on{opacity:1}
  #home .showcard .lock{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:13px;padding:26px;color:#fff;background:linear-gradient(180deg,rgba(18,19,24,.30),rgba(18,19,24,.60))}
  #home .showcard .lock .ic{width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.28);display:flex;align-items:center;justify-content:center}
  #home .showcard .lock .ic svg{width:26px;height:26px}
  #home .showcard .lock b{font-size:20px;font-weight:800;letter-spacing:-.03em}
  #home .showcard .lock p{font-size:14px;color:rgba(255,255,255,.82);line-height:1.55}
  #home .showcard .lock .go{margin-top:4px;background:#fff;color:var(--ink);font-weight:800;font-size:14px;padding:12px 22px;border-radius:24px;border:none;cursor:pointer}
  #home .showcard .lock .go:hover{background:var(--green-soft)}
  /* 원하는 상황 → 스타일리스트 연결 */
  #home .occtokens{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
  #home .occtokens .oc{font-size:14px;font-weight:700;color:var(--sub);background:#fff;border:1.5px solid var(--line2);padding:9px 15px;border-radius:20px;transition:.3s}
  #home .occtokens .oc.on{background:var(--green);color:#fff;border-color:var(--green)}
  #home .connect{display:flex;align-items:center;gap:0;margin:32px 0 0;max-width:1000px}
  #home .node{background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px 22px;box-shadow:0 10px 28px rgba(20,22,28,.06);display:flex;align-items:center;gap:14px;flex:none;width:360px}
  #home .node .nm{font-size:17px;font-weight:800;letter-spacing:-.02em;word-break:keep-all}
  #home .node .sub2{font-size:13px;color:var(--sub);margin-top:3px}
  #home .me .av{width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--ink-soft),var(--ink));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;flex:none}
  #home .link{flex:1;position:relative;min-width:120px;display:flex;align-items:center;padding:0 6px}
  #home .link .wire{flex:1;position:relative;overflow:hidden;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--line2) 0 7px,transparent 7px 15px);background-size:15px 3px;opacity:.9}
  #home .link .wire .wirefill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--green);border-radius:3px}
  #home .link .pulse{position:absolute;top:50%;left:2%;width:12px;height:12px;border-radius:50%;background:var(--green);transform:translate(-50%,-50%);box-shadow:0 0 10px 2px rgba(46,74,59,.4);z-index:2}
  #home .shopper{position:relative;transition:opacity .35s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease}
  #home .shopper.matched{border-color:var(--green);box-shadow:0 0 0 2px var(--green-soft),0 18px 40px rgba(46,74,59,.20)}
  #home .shopper .matchbadge{position:absolute;top:-12px;left:20px;background:var(--green);color:#fff;font-size:13px;font-weight:800;padding:4px 11px;border-radius:20px;box-shadow:0 5px 14px rgba(46,74,59,.4);opacity:0;transform:scale(.5);transition:.28s cubic-bezier(.2,1.5,.4,1)}
  #home .shopper.matched .matchbadge{opacity:1;transform:scale(1)}
  #home .shopper .ph{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;filter:saturate(.6)}
  #home .shopper .snm{font-size:15px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}   /* 스타일리스트명 한 줄 고정 */
  #home .shopper .spec{font-size:13px;color:var(--sub);margin-top:3px}
  #home .shopper .svcpill{display:inline-block;margin-top:6px;font-size:13px;font-weight:800;color:var(--green);background:var(--green-soft);padding:3px 9px;border-radius:11px}
  #home .shopper .mt{margin-left:auto;text-align:right;flex:none;padding-left:10px}
  #home .shopper .mt .pct{font-family:var(--num);font-feature-settings:'tnum';font-weight:800;font-size:22px;color:var(--green);letter-spacing:-.02em}
  #home .shopper .mt .ml{font-size:13px;color:var(--sub2);font-weight:700}
  /* 프로모 */
  #home .promo{position:relative;overflow:hidden;border-radius:28px;padding:52px 56px;background:var(--surface,#fff);border:1px solid var(--line);box-shadow:0 22px 50px rgba(20,22,28,.06);display:grid;grid-template-columns:1fr auto;align-items:center;gap:44px}
  #home .promo .rib{position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--green-mid),var(--green))}
  #home .promo h2{font-size:clamp(26px,3vw,33px);font-weight:800;letter-spacing:-.045em;line-height:1.26}
  #home .promo p{font-size:15px;color:var(--sub);line-height:1.6;margin-top:13px;max-width:500px}
  #home .promo .act{display:flex;flex-direction:column;gap:11px;min-width:210px;align-self:start;margin-top:-38px}
  /* 두 버튼(.cta/.sub) 글씨·박스 크기 통일 — min-height로 테두리 유무(border-box) 차이까지 픽셀 일치 */
  #home .promo .cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--green-soft);color:var(--green);font-size:15.5px;font-weight:800;padding:0 26px;min-height:54px;border-radius:26px;border:none;cursor:pointer;transition:transform .16s,filter .16s}
  #home .promo .cta:hover{transform:translateY(-2px);filter:brightness(.97)}
  #home .promo .cta svg{width:17px;height:17px}
  #home .promo .sub{display:inline-flex;align-items:center;justify-content:center;font-size:15.5px;font-weight:700;color:var(--green);background:transparent;border:1.5px solid var(--green-line,#B9D2C4);padding:0 26px;min-height:54px;border-radius:26px;cursor:pointer;transition:.15s}
  #home .promo .sub:hover{background:var(--green-soft)}
  /* 아웃트로 */
  #home .outro{padding:100px 0 56px;text-align:center;border-top:1px solid var(--line)}
  #home .outro .ologo{display:inline-block;font-size:46px;font-weight:800;letter-spacing:-.05em;color:var(--green);opacity:0;transition:opacity .6s ease .28s}
  #home .outro.in .ologo{opacity:1;animation:htextTwinkle 1.1s ease 1.95s 1}
  #home .outro .ologo i{display:inline-block;width:9px;height:9px;border-radius:2px;background:var(--green);margin-left:4px;vertical-align:baseline}
  @keyframes htextTwinkle{0%{text-shadow:0 0 0 rgba(46,74,59,0);filter:brightness(1)}30%{text-shadow:0 0 22px rgba(46,74,59,.55);filter:brightness(1.22)}60%{text-shadow:0 0 9px rgba(46,74,59,.28);filter:brightness(1.06)}100%{text-shadow:0 0 0 rgba(46,74,59,0);filter:brightness(1)}}
  #home .outro .otag{font-size:15px;color:var(--sub);font-weight:600;margin-top:15px;opacity:0}
  #home .outro.in .otag{opacity:1;transition:opacity .6s ease .45s}
  #home .outro .otape{position:relative;height:34px;max-width:620px;margin:44px auto 0}
  #home .outro .otape .rail{position:absolute;left:0;right:0;top:50%;margin-top:-.5px;height:1px;background:var(--line2)}
  #home .outro .otape .ticks{position:absolute;left:0;right:0;top:50%;margin-top:-7px;height:14px;background:repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 13px);opacity:0}
  #home .outro.in .otape .ticks{opacity:1;transition:opacity .9s ease .6s}
  #home .outro .otape .draw{position:absolute;left:0;top:50%;margin-top:-1.5px;height:3px;border-radius:3px;background:var(--ink);width:0}
  #home .outro.in .otape .draw{width:100%;transition:width 1.35s cubic-bezier(.4,.85,.25,1) .55s}
  #home .outro .otape .mk{position:absolute;top:50%;left:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:2.5px;background:var(--green);box-shadow:0 2px 8px rgba(46,74,59,.4);opacity:0}
  #home .outro.in .otape .mk{left:100%;opacity:1;transition:left 1.35s cubic-bezier(.4,.85,.25,1) .55s,opacity .3s ease .55s}
  #home .outro .foot{font-size:12.5px;color:var(--sub2);margin-top:64px;opacity:0}
  #home .outro.in .foot{opacity:1;transition:opacity .6s ease .9s}
  @media(max-width:900px){#home .show-in{grid-template-columns:1fr}#home .showcard{order:-1}#home .hhero h1{font-size:40px}
    #home .connect{flex-direction:column;gap:22px;max-width:340px}#home .node{width:100%}
    #home .link{width:100%;min-height:64px;justify-content:center}
    #home .link .wire{width:3px;height:100%;flex:none;background:repeating-linear-gradient(180deg,var(--green) 0 7px,transparent 7px 15px);background-size:3px 15px}
    #home .link .pulse{display:none}
    #home .how{grid-template-columns:1fr;gap:16px}#home .vtape{display:none}
    #home .step{grid-template-columns:46px 1fr;gap:14px;padding:20px}
    #home .step .big{grid-column:1/-1;margin-left:0;align-self:start}
    #home .step .big b,#home .step .big>span{font-size:16px}
    #home .promo{grid-template-columns:1fr;padding:38px 30px;gap:26px}#home .promo .act{min-width:0}
    #home .outro .otape{max-width:none;margin-left:20px;margin-right:20px}}
  @media(prefers-reduced-motion:reduce){#home *{animation:none!important}#home .reveal{opacity:1;transform:none}}

  /* 결과카드(다크) — 공통 컴포넌트 (레거시 목업 · 실제 임베드는 iframe) */
  .result{border-radius:24px; padding:26px 24px; color:#fff;
    background:radial-gradient(ellipse 72% 32% at 50% 4%, var(--green-light)33, transparent 60%), linear-gradient(160deg,#1D1B15,#100E0A);}
  .result .rtop{display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:800; letter-spacing:-.04em;}
  .result .rtop .ico{opacity:.85; font-size:17px;}
  .result .char{width:112px; height:130px; margin:18px auto 8px; border-radius:18px; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:52px;}
  .result .code{text-align:center; font-size:13px; font-weight:800; letter-spacing:.24em; color:var(--green-light); margin-top:8px;}
  .result .rname{text-align:center; font-size:27px; font-weight:800; letter-spacing:-.045em; margin-top:4px;}
  .result .prof{font-size:14px; color:rgba(255,255,255,.72); text-align:center; margin-top:11px; line-height:1.55;}
  /* 실제 결과 카드(도트 캐릭터) 임베드 */
  .cardframe{width:420px; max-width:100%; height:692px; border:none; display:block; margin:0 auto;}

  /* ===== 체형진단 ===== */
  .diaghero{max-width:640px;}
  .diaghero .l h1{font-size:36px; font-weight:800; letter-spacing:-.045em; line-height:1.25;}
  .diaghero .l p{font-size:16px; color:var(--sub); margin-top:14px; line-height:1.6;}
  .diaghero .meta{display:flex; gap:26px; margin:22px 0;}
  .diaghero .meta b{display:block; font-size:22px; font-weight:800;} .diaghero .meta span{font-size:14px; color:var(--sub2); font-weight:700;}
  .resultwrap{display:grid; grid-template-columns:420px 1fr; gap:30px; align-items:start;}
  .diaghead{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:24px;}
  .diaghead h1{font-size:31px; font-weight:800; letter-spacing:-.045em;}
  .diaghead p{font-size:16px; color:var(--sub); margin-top:9px; line-height:1.55; max-width:560px;}
  .rcol{display:flex; flex-direction:column; gap:18px;}
  .bridge{background:linear-gradient(135deg,var(--green),#22382C); color:#fff; border-radius:20px; padding:24px;}
  .bridge b{font-size:19px; font-weight:800; letter-spacing:-.03em;} .bridge p{font-size:14px; color:rgba(255,255,255,.78); margin:8px 0 15px; line-height:1.5;}
  .bridge .bbtn{display:inline-block; background:#fff; color:var(--ink); padding:12px 20px; border-radius:12px; font-size:15px; font-weight:800; cursor:pointer; border:none; font-family:inherit;}
  .szbox{background:#fff; border:1px solid var(--line); border-radius:24px; padding:24px; box-shadow:0 6px 18px rgba(20,18,16,.06);}
  .szbox h3{font-size:18px; font-weight:800; letter-spacing:-.03em;}
  .szbox .szrow{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line);}
  .szbox .szrow:last-of-type{border:none;}
  .szbox .szrow .bd{font-size:15px; font-weight:700;} .szbox .szrow .bd small{display:block; font-size:13px; color:var(--sub2); font-weight:600; margin-top:2px;}
  .szbox .szrow .val{font-size:19px; font-weight:800;}
  .szbox .szrow .tag{font-size:13px; font-weight:800; color:var(--green); background:var(--green-soft); padding:4px 10px; border-radius:16px; margin-left:8px;}

  /* ===== 스타일리스트찾기 ===== */
  .listhead{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;}
  .svctab{display:flex; gap:4px; border-bottom:1px solid var(--line); margin:22px 0 16px; flex-wrap:wrap;}
  .svctab .t{display:inline-flex; align-items:center; gap:7px; padding:12px 15px; font-size:16px; font-weight:700; color:var(--sub); border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer;}
  .svctab .t svg{width:18px; height:18px; flex:none;}
  .svctab .t.on{color:var(--green); border-color:var(--green);}
  .filters{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:22px;}
  .filters .lbl{font-size:14px; color:var(--sub2); font-weight:700;}
  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  /* 목록 페이저(‹ 1 2 3 ›) — 9개 초과 시 JS(renderPager)가 .on 부여해 노출. 활성=잉크블랙(초록 채움 지양) */
  .pager{display:none; justify-content:center; align-items:center; gap:8px; margin-top:34px;}
  .pager.on{display:flex; flex-wrap:wrap;}
  .pager .pg{min-width:42px; height:42px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:#fff; border-radius:12px; font-size:15px; font-weight:700; color:var(--sub); cursor:pointer; font-family:inherit; transition:.15s;}
  .pager .pg:hover:not(:disabled){border-color:var(--ink); color:var(--ink);}
  .pager .pg.on{background:var(--ink); border-color:var(--ink); color:#fff;}
  .pager .pg:disabled{opacity:.38; cursor:default;}
  .pager .pg.nav{font-size:19px; line-height:1;}
  .ecard{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 6px 18px rgba(20,18,16,.08); cursor:pointer; transition:.18s;}
  .ecard:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(20,18,16,.12);}
  .ecard .cover{height:188px; position:relative; overflow:hidden; background:#EDE8E0;}
  .ecard .cover img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.55) brightness(1.03) contrast(.98);}
  .ecard .match{position:absolute; top:12px; left:12px; font-size:13px; font-weight:800; padding:5px 12px; border-radius:30px; background:var(--green); color:#fff; box-shadow:0 2px 9px rgba(46,74,59,.28);}
  .ecard .eb{padding:17px 18px;}
  .ecard .top{display:flex; justify-content:space-between; align-items:center;}
  .ecard .nm{font-size:17px; font-weight:800;} .ecard .star{font-size:15px; font-weight:700;}
  .ecard .spec{font-size:14px; color:var(--sub); margin:5px 0 11px;}
  .ecard .tags span{display:inline-block; font-size:13px; background:var(--soft); color:#6a6258; padding:4px 9px; border-radius:20px; margin:0 5px 5px 0; font-weight:600;}
  .ecard .price{font-size:16px; font-weight:800;} .ecard .price small{color:var(--sub2); font-weight:600;} .ecard .price .from{color:var(--green);}
  .ecard .tags{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
  /* A안 — 3열 다이어트: 태그 2개 텍스트 + 서비스 아이콘만 + 가격 (한 줄) */
  .ecard .star .rv{color:var(--sub2); font-weight:600; font-size:13px;}
  .ecard .subtags{font-size:14px; color:var(--sub); font-weight:600; margin:9px 0 14px; min-height:16px;}
  .ecard .cardmid{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .ecard .cardprice{font-size:14px; font-weight:800; color:var(--ink); white-space:nowrap;}
  .ecard .cardprice .num{font-size:16px;}
  .ecard .svcico{display:inline-flex; gap:6px;}
  .ecard .svcico .b{width:29px; height:29px; border-radius:9px; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center;}
  .ecard .svcico .b svg{width:16px; height:16px;}
  .ecard .star.new{color:var(--green-mid); font-size:13px;}
  /* 찜(북마크) 아이콘 — 무배경, 흰 반투명 → 딥그린 채움 + 그림자 */
  .bk{width:22px; height:22px; display:inline-block; vertical-align:middle;}
  .bk path{fill:rgba(255,255,255,.55); stroke:#fff; stroke-width:1.5; stroke-linejoin:round;}
  .bk.on path{fill:var(--green);}
  .bk.lt path{fill:none; stroke:var(--sub); stroke-width:2;}   /* 밝은 버튼 위(드로어·상세)용 */
  .bk.lt.on path{fill:var(--green); stroke:var(--green);}
  .ecard .favbtn{position:absolute; top:9px; right:11px; padding:2px; background:none; border:none; cursor:pointer; z-index:2; line-height:0;}
  .ecard .favbtn .bk{width:23px; height:23px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55)); transition:transform .15s;}
  .ecard .favbtn:hover .bk{transform:scale(1.12);}
  #my .fcard .heart{cursor:pointer; user-select:none;}
  #my .fcard .heart .bk{width:22px; height:22px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));}

  /* 견적 요청 배너 */
  .reqbanner{display:flex; align-items:center; gap:16px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px 26px; margin:26px 0; box-shadow:0 4px 14px rgba(20,18,16,.04);}
  .reqbanner .txt{flex:1; min-width:220px;}
  .reqbanner .txt b{font-size:17px; font-weight:800; letter-spacing:-.02em;}
  .reqbanner .txt p{font-size:15px; color:var(--sub); margin-top:6px; line-height:1.5;}
  .reqbanner button{white-space:nowrap;}

  /* 드롭다운 필터바 (상황·예산) + 검색 + 정렬 */
  /* 목록 부제 — 기본(넓은 화면)은 전문, 모바일 분기에서 축약본으로 스왑 */
  .shoplead .narrow-only{display:none;}
  .fbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:20px 0 0;}
  .dd{position:relative;}
  .ddbtn{display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:700; padding:11px 15px; border-radius:11px; border:1.5px solid var(--line2); background:#fff; color:var(--sub); cursor:pointer; font-family:inherit;}
  .ddbtn:hover{border-color:var(--green);}
  .ddbtn .ar{font-size:13px; color:var(--sub2);}
  .dd.active .ddbtn{background:var(--green-soft); color:var(--green); border-color:var(--green);}
  /* 즐겨찾기 필터 토글 — 아이콘만(바 공간 절약), 활성 시 딥그린 + 북마크 채움. 툴팁으로 설명 */
  .favfilter{display:inline-flex; align-items:center; justify-content:center; padding:11px 12px; border-radius:11px; border:1.5px solid var(--line2); background:#fff; color:var(--sub); cursor:pointer;}
  .favfilter svg{width:18px; height:18px; flex:none;}
  .favfilter.on{background:var(--green-soft); color:var(--green); border-color:var(--green);}
  .favfilter.on svg{fill:currentColor;}
  .ddmenu{position:absolute; top:calc(100% + 6px); left:0; min-width:174px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(20,18,16,.14); padding:6px; z-index:40; display:none;}
  .dd.open .ddmenu{display:block;}
  .ddopt{padding:10px 12px; border-radius:9px; font-size:15px; font-weight:600; color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:space-between;}
  .ddopt:hover{background:var(--soft);}
  .ddopt.on{color:var(--green); font-weight:800;} .ddopt.on::after{content:"✓"; color:var(--green); font-size:13px;}
  .search{display:flex; align-items:center; gap:8px; border:1.5px solid var(--line2); border-radius:12px; padding:0 14px; background:#fff; max-width:340px; flex:1; min-width:220px;}
  .search:focus-within{border-color:var(--green);}
  .search .mag{color:var(--sub2); font-size:16px;}
  .search input{border:none; padding:12px 0; width:100%; font-size:16px; font-family:inherit; background:none; color:var(--ink);}
  .search input:focus{outline:none;}
  .search .clr{color:var(--sub2); font-size:14px; cursor:pointer; padding:2px;}
  .sort{margin-left:auto;} .sort select{padding:11px 14px; border:1.5px solid var(--line2); border-radius:12px; font-size:15px; font-weight:600; font-family:inherit; background:#fff; color:var(--ink); cursor:pointer;}
  .btn.sm{padding:9px 15px; font-size:14px; border-radius:10px;}

  /* 결과 카운트 + 빈 상태 */
  .count{font-size:15px; color:var(--sub2); font-weight:700; margin:26px 0;}
  .count a{color:var(--green); font-weight:800; cursor:pointer;}
  .empty{grid-column:1/-1; text-align:center; padding:56px 20px; color:var(--sub); background:#fff; border:1px solid var(--line); border-radius:18px;}
  .empty b{font-size:17px; font-weight:800; color:var(--ink);} .empty p{font-size:14px; margin-top:8px;}
  .empty a{color:var(--green); font-weight:800; cursor:pointer;}

  /* 스타일리스트 상세 페이지 (탭 내 화면 전환) */
  .back{display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:700; color:var(--sub); cursor:pointer; margin-bottom:22px;}
  .backbtn{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); cursor:pointer; margin-bottom:18px;}
  .backbtn:hover{border-color:var(--green); color:var(--green);}
  .backbtn svg{width:20px; height:20px;}
  .back:hover{color:var(--ink);}
  /* 스타일리스트찾기 내부 전환(목록↔상세↔요청)에도 탭 전환과 동일한 페이드 — 딱 끊기는 느낌 제거 */
  #shop #listView{margin:0 auto; animation:viewIn .28s ease;}   /* 목록 = 전체폭(마이와 좌우 통일) */
  #shop #detailView, #shop #requestView{max-width:1040px; margin:0 auto; animation:reqfade .3s cubic-bezier(.2,.8,.2,1);}
  /* 스타일리스트 상세 본문 — 오버레이 안쪽은 900px 고정 / 스타일리스트찾기 페이지만 목록 폭에 가깝게 넓혀 점프 완화 */
  .detailbody{max-width:900px; margin:0 auto;}
  #detailView .detailbody{max-width:1040px; margin:0 auto;}
  .dhero{display:grid; grid-template-columns:280px 1fr; gap:38px; align-items:stretch;}
  .dhero-img{position:relative; border-radius:20px; overflow:hidden; align-self:stretch; min-height:0; background:#EDE8E0; box-shadow:0 12px 32px rgba(20,18,16,.12);}
  .dhero-img img{width:100%; height:100%; object-fit:cover; filter:saturate(.55) brightness(1.03) contrast(.98);}
  .dsvc{display:inline-block; font-size:16px; font-weight:800; color:var(--green); background:var(--green-soft); padding:8px 16px; border-radius:24px; letter-spacing:-.02em;}
  .dhero-info h1{font-size:36px; font-weight:800; letter-spacing:-.045em; margin-top:16px;}
  .dmeta{font-size:16px; color:var(--sub); font-weight:700; display:inline-flex; align-items:center; gap:5px;} .dmeta b{color:var(--green);}
  .rvstar-gold{color:#e8a13a !important;} .rvstar-gold .cutestar{width:17px; height:17px;}
  .dhero-info .dmeta{font-size:19px; gap:7px;} .dhero-info .rvstar-gold .cutestar{width:22px; height:22px;}
  .dmeta-rate{font-size:23px; font-weight:800; color:var(--ink);}
  .dmeta-rev{color:var(--green); font-weight:800; cursor:pointer; text-underline-offset:3px;}
  .dmeta-rev:hover{text-decoration:underline;}
  .dnamerow{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:14px;} .dnamerow h1{margin-top:0;} .dnamerow .dmeta{margin-top:0;}
  .dbio{font-size:16px; color:var(--ink-soft); line-height:1.7; margin-top:20px; max-width:520px;}
  /* 정보 열을 사진 높이만큼 늘려, 버튼을 사진 하단에 맞춰 정렬 */
  .dhero-info{min-width:0; display:flex; flex-direction:column;}
  /* "서비스 N가지" 글자 대신 이 스타일리스트가 제공하는 서비스 아이콘을 나열 */
  .svcicons{display:flex; gap:8px; margin-bottom:14px;}
  .svcicons .svcico{width:38px; height:38px; border-radius:11px; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center;}
  .svcicons .svcico svg{width:20px; height:20px;}
  .dhero-info h1{margin-top:0;}
  .dhero-info .dmeta{margin-top:8px;}
  /* 스타일칩 아래 소개 텍스트(박스 없음) */
  .dhero-info .dbio{margin:2px 0 0; max-width:560px;}
  .dhero-acts{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:26px;}
  .dhero-acts .btn{min-width:184px;}
  /* 즐겨찾기 — 아이콘만(정사각) */
  .dhero-acts .btn.favonly{min-width:0; width:48px; padding:0; height:46px; display:inline-flex; align-items:center; justify-content:center;}
  .dhero-acts .btn.favonly .bk{width:20px; height:20px;}
  .dsecs{margin-top:46px; display:flex; flex-direction:column; gap:38px; max-width:840px;}
  #detailView .dsecs{max-width:1040px;}
  .dsec h3{font-size:19px; font-weight:800; letter-spacing:-.03em; margin-bottom:14px;}
  .dgal{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
  .dgal div{position:relative; aspect-ratio:4/5; border-radius:10px; background-size:cover; background-position:center; background-color:var(--soft); filter:saturate(.6); overflow:hidden;}
  .dgal .pspec{position:absolute; right:8px; bottom:7px; color:#fff; font-size:14px; font-weight:800; line-height:1.15; text-align:right;
    text-shadow:-1.2px -1.2px 0 #000,1.2px -1.2px 0 #000,-1.2px 1.2px 0 #000,1.2px 1.2px 0 #000,0 0 3px rgba(0,0,0,.55);}
  .tagrow span{display:inline-block; font-size:13px; background:var(--soft); color:#6a6258; padding:6px 12px; border-radius:20px; margin:0 6px 6px 0; font-weight:600;}
  .noreview{font-size:14px; color:var(--sub2); padding:10px 0;}
  .dsec h3 .dsec-score{font-size:14px; font-weight:700; color:var(--green); margin-left:8px;}

  /* 견적 요청 페이지 */
  .reqpage{max-width:680px; margin:0 auto;}
  /* 지명 견적 요청 — 상세와 동일한 2단(스타일리스트 왼쪽 · 폼 오른쪽) */
  .reqsplit{max-width:1040px; margin:0 auto; display:grid; grid-template-columns:320px 1fr; gap:24px; align-items:start;}
  .reqside{background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 6px 18px rgba(20,18,16,.05); position:sticky; top:88px;}
  .reqside-img{height:220px; position:relative; background:#EDE8E0; overflow:hidden;}
  .reqside-img img{width:100%; height:100%; object-fit:cover; filter:saturate(.55) brightness(1.03); display:block;}
  .reqside-img .dside-match{position:absolute; top:14px; left:14px; font-size:13px; font-weight:800; background:var(--green); color:#fff; padding:5px 12px; border-radius:20px;}
  .reqside-b{padding:18px 20px;}
  .reqside-b .rl{font-size:13px; font-weight:800; color:var(--green);}
  .reqside-b .rn{font-size:19px; font-weight:800; margin-top:3px; letter-spacing:-.02em;}
  .reqside-meta{display:flex; align-items:center; gap:5px; font-size:13px; color:var(--sub); font-weight:700; margin-top:9px;}
  .reqside-svc{margin-top:13px; padding-top:13px; border-top:1px solid var(--line); font-size:14px; color:var(--ink-soft);}
  .reqside-svc b{color:var(--green); font-weight:800;}
  .reqmain{min-width:0;}
  .reqmain h1{font-size:26px; font-weight:800; letter-spacing:-.03em; margin:2px 0 0;}
  .reqmain .lead{font-size:16px; color:var(--sub); margin-top:10px; line-height:1.6;}
  @media(max-width:760px){ .reqsplit{grid-template-columns:1fr;} .reqside{position:static;} }
  /* A안 — 요청 폼을 섹션 카드 3그룹으로 (무엇을/언제·얼마/요청 메모) */
  .reqpage .grp, .reqmain .grp{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px 22px; margin-top:16px; box-shadow:0 4px 14px rgba(20,18,16,.04);}
  .reqpage .grp-h, .reqmain .grp-h{display:flex; align-items:center; gap:9px; font-size:18px; font-weight:800; color:var(--green); margin-bottom:13px; letter-spacing:-.03em;}
  .reqpage .grp-h .n, .reqmain .grp-h .n{flex:none; width:22px; height:22px; border-radius:7px; background:var(--green-soft); color:var(--green); font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center;}
  /* 각 하위 섹션(상황·예산·일정·선호스타일)은 여백으로 구분(선 없음) */
  .reqpage .grp .feat, .reqmain .grp .feat{margin:20px 0 9px;}
  .reqpage .grp-h + .feat, .reqmain .grp-h + .feat{margin-top:0;}
  .reqpage .seg, .reqmain .seg{gap:6px;}
  .reqpage .seg .o, .reqmain .seg .o{padding:8px 14px;}
  /* 상황 세그: '여행' 다음 강제 줄바꿈(데일리·퍼스널·체형커버 아랫줄로) */
  .segbrk{flex-basis:100%; height:0; margin-bottom:-6px;}
  .reqpage h1{font-size:30px; font-weight:800; letter-spacing:-.045em;}
  .reqpage .lead{font-size:17px; color:var(--sub); margin-top:12px; line-height:1.6;}
  .reqto{display:flex; align-items:center; gap:12px; background:var(--soft); border-radius:14px; padding:13px 15px;}
  .reqto img{width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none;}
  .reqto .rl{font-size:13px; font-weight:700; color:var(--sub2);}
  .reqto .rn{font-size:16px; font-weight:800; margin-top:2px; letter-spacing:-.02em;}
  /* 지명 요청 대상 바 — 지난 견적의 선택 스타일리스트(qcard.sel)와 동일한 초록 톤 */
  .reqto.sel{background:var(--green-soft); box-shadow:0 0 0 1px var(--green);}
  .reqto.sel .rl{color:var(--green-mid);}
  .reqto.sel .rn{color:var(--green);}
  .reqhint{font-size:13px; color:var(--sub2); text-align:center; margin-top:10px;}
  .reqdone{max-width:560px; margin:60px auto 0; text-align:center;}
  .reqdone .cc{width:64px; height:64px; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:30px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto;}
  .reqdone h1{font-size:28px; font-weight:800; letter-spacing:-.04em; margin-top:20px;}
  .reqdone p{font-size:16px; color:var(--sub); margin-top:12px; line-height:1.6;}
  .feat em{color:var(--green); font-style:normal;}
  .svc3 .s.locked{opacity:.38; pointer-events:none;}
  .seg .o.dis{opacity:.35; pointer-events:none;}
  .attach{display:flex; align-items:center; gap:12px; background:var(--soft); border-radius:14px; padding:14px 16px; margin-top:16px;} .attach .at{flex:1;} .attach b{font-size:15px;} .attach .at div{font-size:13px; color:var(--sub); margin-top:2px;}
  .btn:disabled{opacity:.4; cursor:not-allowed;}
  @media(max-width:820px){ .dhero{grid-template-columns:1fr;} .dhero-img{height:340px;} }

  /* ===== 마이 ===== */
  .myrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:26px; align-items:start;}
  .profcard{background:#fff; border:1px solid var(--line); border-radius:22px; padding:26px; box-shadow:0 6px 18px rgba(20,18,16,.06); text-align:center;}
  .profcard .av{width:84px; height:84px; border-radius:50%; margin:0 auto; background:linear-gradient(135deg,#E7DFD2,#D6CBB8); display:flex; align-items:center; justify-content:center; font-size:36px;}
  .profcard .nm{font-size:22px; font-weight:800; letter-spacing:-.04em; margin-top:14px;}
  .profcard .type{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--sub); margin-top:6px;}
  .profcard .type i{width:9px; height:9px; border-radius:50%; background:var(--green-light);}
  .menu2{margin-top:18px; text-align:left;}
  .menu2 .m{display:flex; align-items:center; gap:12px; padding:14px 4px; border-top:1px solid var(--line); font-size:15px; font-weight:600;}
  .menu2 .m .mi{width:34px; height:34px; border-radius:11px; background:var(--soft); display:flex; align-items:center; justify-content:center; font-size:17px;}
  .menu2 .m .ar{margin-left:auto; color:var(--sub2);}

  @media(max-width:820px){ .hero,.diaghero,.resultwrap,.myrap{grid-template-columns:1fr;} .steps,.grid{grid-template-columns:1fr 1fr;} }

  /* ===== 오버레이 공통 ===== */
  .scrim{position:fixed; inset:0; background:rgba(22,20,15,.5); opacity:0; pointer-events:none; transition:.22s; z-index:90;}
  .scrim.on{opacity:1; pointer-events:auto;}
  .xbtn{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); border:none; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink); box-shadow:0 2px 8px rgba(0,0,0,.12);}
  .toast{position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(16px); background:var(--ink); color:#fff; padding:13px 22px; border-radius:30px; font-size:15px; font-weight:700; opacity:0; pointer-events:none; transition:.25s; z-index:130;}
  .toast.on{opacity:1; transform:translateX(-50%) translateY(0);}

  /* 진단 위저드 (풀스크린) */
  .wizard{position:fixed; inset:0; background:var(--bg); z-index:100; display:none; flex-direction:column;}
  .wizard.on{display:flex;}
  .wizhead{border-bottom:1px solid var(--line); padding:14px 24px; display:flex; align-items:center; gap:18px;}
  .prog{flex:1; display:flex; gap:6px; max-width:300px;}
  .prog i{flex:1; height:5px; border-radius:4px; background:var(--soft);}
  .prog i.on{background:var(--green);}
  .wizbody{flex:1; overflow-y:auto; padding:44px 30px 30px;}
  .wizinner{max-width:600px; margin:0 auto;}
  .wizinner.wide{max-width:1140px;}
  .wstep{display:none;} .wstep.on{display:block; animation:f .3s;}
  .wstep h2{font-size:26px; font-weight:800; letter-spacing:-.045em;}
  .wstep .sub{font-size:15px; color:var(--sub); margin-top:8px; line-height:1.55;}
  .field{margin-top:24px;} .field .fl{font-size:15px; font-weight:800; margin-bottom:10px; display:block;}
  .wizfoot{border-top:1px solid var(--line); padding:16px 24px;}
  .wizfoot .in{display:flex; gap:10px; max-width:600px; margin:0 auto;}

  /* 폼 컨트롤 */
  .seg{display:flex; gap:8px; flex-wrap:wrap;}
  .seg .o{padding:12px 18px; border:1.5px solid var(--line2); border-radius:12px; font-size:15px; font-weight:700; color:var(--sub); background:#fff; cursor:pointer;}
  .seg .o.on{background:var(--green-soft); color:var(--green); border-color:var(--green);}
  .inrow{display:flex; gap:10px;}
  .inp{width:100%; padding:13px 15px; border:1.5px solid var(--line2); border-radius:12px; font-size:16px; font-family:inherit; background:#fff; color:var(--ink);}
  .inp:focus{outline:none; border-color:var(--green);}
  .feelrow{display:flex; align-items:center; gap:12px; margin-bottom:9px;}
  .feelrow .fn{width:52px; font-size:15px; font-weight:700;}
  .feelrow .fo{flex:1; display:flex; gap:6px;}
  .feelrow .fo span{flex:1; text-align:center; padding:9px 4px; border:1.5px solid var(--line2); border-radius:9px; font-size:13px; font-weight:700; color:var(--sub); background:#fff; cursor:pointer;}
  .feelrow .fo span.on{background:var(--green); color:#fff; border-color:var(--green);}
  .loadwrap{text-align:center; padding:60px 0;}
  .spinner{width:54px; height:54px; border:5px solid var(--soft); border-top-color:var(--green); border-radius:50%; margin:0 auto 24px; animation:spin 1s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}

  /* 우측 드로어 (프로필 / 매칭) */
  .drawer{position:fixed; top:0; right:0; height:100%; width:460px; max-width:94vw; background:#fff; z-index:100; transform:translateX(100%); transition:.3s cubic-bezier(.2,.8,.2,1); overflow-y:auto; box-shadow:-20px 0 60px rgba(0,0,0,.16);}
  .drawer.on{transform:none;}
  .dclose{position:absolute; top:14px; right:14px; z-index:3;}
  .dhead{height:200px; position:relative; overflow:hidden; display:flex; align-items:flex-end;}
  .dhead img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.55) brightness(1.03) contrast(.98);}
  .dhead .dov{position:relative; padding:20px; color:#fff; background:linear-gradient(transparent, rgba(18,16,10,.8)); width:100%;}
  .dhead .dm{font-size:13px; font-weight:800; background:var(--green); display:inline-block; padding:4px 10px; border-radius:20px;}
  .dhead .dn{font-size:23px; font-weight:800; margin-top:8px; letter-spacing:-.03em;}
  .dbody{padding:22px;}
  .dbody .bio{font-size:15px; color:var(--ink-soft); line-height:1.6;}
  .feat{font-size:15px; font-weight:800; color:var(--sub); margin:20px 0 9px; letter-spacing:.01em;}
  .pgal{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
  .pgal div{height:82px; border-radius:10px; background-size:cover; background-position:center; background-color:var(--soft); filter:saturate(.6);}
  /* 후기 — 상단 평점 요약 */
  .revsum{display:flex; align-items:center; gap:20px; padding:18px 22px; margin-bottom:14px; background:var(--green-soft); border-radius:16px;}
  .revsum-n{font-size:48px; font-weight:800; line-height:1; color:var(--green);}
  .revsum-r{display:flex; flex-direction:column; gap:6px;}
  .revsum-c{font-size:14px; color:var(--sub); font-weight:700;}
  .revsum .revstars{display:inline-flex; gap:3px;}
  .revsum .revstars .cutestar{width:22px; height:22px; vertical-align:0;}
  /* 후기 항목 — 사람 아이콘 + 본문 */
  .rev{display:flex; gap:13px; align-items:center; padding:15px 0; border-bottom:1px solid var(--line);}
  .rev .rev-av{flex:none; width:36px; height:36px; border-radius:50%; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center;}
  .rev .rev-av svg{width:20px; height:20px;}
  .rev .rev-b{flex:1; min-width:0; font-size:16px; color:var(--ink-soft); line-height:1.65;}
  .rev .who{font-size:14px; color:var(--sub2); margin-top:6px; font-weight:600;}
  /* 내 후기 — 튀지 않게, 다른 후기와 같은 행 + 작은 회색 라벨만 */
  .rev.mine{background:none; border-radius:0; padding:14px 0;}
  .rev.mine .revme{display:inline-block; font-size:13px; font-weight:800; color:var(--sub); background:var(--soft); padding:2px 8px; border-radius:20px; margin-right:7px; vertical-align:1px;}
  .rev.mine .who{color:var(--sub2);}
  .svcinfo{background:var(--soft); border-radius:14px; padding:14px 16px;}
  .svcinfo .r{display:flex; justify-content:space-between; padding:6px 0; font-size:15px;} .svcinfo .r span{color:var(--sub);} .svcinfo .r b{font-weight:800;}
  /* 상세 · 제공 서비스 (타일) — flex+고정폭: 서비스가 1개여도 붕 안 뜨고 항상 왼쪽 정렬 */
  .svctiles{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
  .svctile{flex:1 1 150px; max-width:240px; border:1px solid var(--line); border-radius:14px; padding:16px 12px; text-align:center; background:var(--surface); display:flex; flex-direction:column; align-items:center;}
  .svctile .svct-ic{width:42px; height:42px; margin-bottom:10px; border-radius:12px; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center;}
  .svctile .svct-ic svg{width:22px; height:22px;}
  .svctile .svct-nm{font-size:17px; font-weight:800; letter-spacing:-.03em; white-space:nowrap;}
  .svctile .svct-mode{font-size:14px; color:var(--sub); margin-top:4px;}
  .svctile .svct-pr{font-size:18px; font-weight:800; color:var(--green); margin-top:auto; padding-top:12px;}
  /* 매칭도 뱃지 — 상세 히어로 사진 · 요청폼 스타일리스트 사진 공용 */
  .dside-match{position:absolute; top:14px; left:14px; font-size:13px; font-weight:800; background:var(--green); color:#fff; padding:5px 12px; border-radius:20px;}
  .dstyles{display:flex; gap:6px; flex-wrap:wrap; margin:16px 0 22px;}
  .dstyles span{font-size:13px; background:var(--soft); color:#6a6258; padding:4px 10px; border-radius:20px; font-weight:600;}
  .dblocks{display:flex; flex-direction:column; gap:16px; min-width:0; margin-top:36px;}
  .dblocks .rcard{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px 22px; box-shadow:0 6px 18px rgba(20,18,16,.04);}
  .rlabel{display:flex; align-items:center; gap:10px;}
  .rlabel .rlt{font-size:19px; font-weight:800; letter-spacing:-.03em; color:var(--green);}
  .rlabel .rcnt{margin-left:auto; font-size:13px; font-weight:700; color:var(--sub);}
  /* 섹션 라벨 ↔ 콘텐츠 간격 통일(15px) — 모든 섹션 동일하게 */
  .dblocks .rcard .rlabel{margin-bottom:15px;}
  .dblocks .svctiles{margin-top:0;}
  .dblocks .dbio{font-size:15px; color:var(--ink-soft); line-height:1.7; margin:0; max-width:none;}
  .dblocks .rrevs{margin-top:0;}
  .dblocks .dgal{margin-top:0;}
  @media(max-width:760px){ .dhero-acts .btn{min-width:0; flex:1;} }
  .svc3{display:flex; flex-wrap:wrap; gap:9px;}
  .svc3 .s{flex:1 1 120px; border:1.5px solid var(--line2); border-radius:14px; padding:15px 8px; text-align:center; cursor:pointer;}
  .svc3 .s.on{border-color:var(--green); background:var(--green-soft);}
  .svc3 .s .i{display:flex; justify-content:center; color:var(--sub);} .svc3 .s .i svg{width:24px; height:24px;} .svc3 .s.on .i{color:var(--green);}
  .svc3 .s b{display:block; font-size:13px; margin-top:6px;}
  .svc3 .s .p{display:block; font-size:13px; color:var(--green); font-weight:800; margin-top:4px;}
  .svc3 .s .p::after{content:'원';}
  .toggle{width:46px; height:27px; border-radius:20px; background:var(--line2); position:relative; cursor:pointer; flex:none; transition:.15s;}
  .toggle::after{content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:.15s;}
  .toggle.on{background:var(--green);} .toggle.on::after{left:22px;}

  /* 로그인 시트 (바텀) */
  /* 로그인 시트는 껍데기까지 공용 css/auth-ui.css(.authui-sheet*) 소유 — result와 같은 화면을 쓰기 위함 */

  /* ===== 마이페이지 (좌측 사이드 네비) ===== */
  #my .mwrap{display:grid; grid-template-columns:268px 1fr; gap:30px; align-items:start; margin-top:14px;}   /* 전체폭 — 스타일리스트 목록과 좌우 통일 */
  #my .side{position:sticky; top:88px;}
  #my .pcard{background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px; text-align:center; margin-bottom:14px; box-shadow:0 6px 18px rgba(20,18,16,.05);}
  #my .pcard .av{width:66px; height:66px; border-radius:50%; margin:0 auto 12px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-size:25px; font-weight:800; overflow:hidden;}
  /* 진단 후 아바타 = 결과 카드 캐릭터 얼굴(head) — card.html 재현, 유형 색 원 위에 얹음 */
  #myAv .head{position:relative; width:34px; height:38px; margin-top:8px;}
  #myAv .head .face{position:absolute; inset:0; border-radius:10px 10px 8px 8px; background:#ecd9c9; z-index:2; background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 7px);}
  #myAv .head .cap{position:absolute; top:-3px; left:-3px; right:-3px; height:13px; border-radius:10px 10px 45% 45%; background:#2a2b30; z-index:3;}
  #myAv .head.female .cap{background:#9a7350;}
  #myAv .head .longhair{position:absolute; top:-5px; left:-7px; right:-7px; bottom:1px; background:#9a7350; border-radius:50% 50% 36% 36% / 46% 46% 30% 30%; z-index:1;}
  #myAv .head .ey{position:absolute; top:18px; width:4px; height:5px; border-radius:50%; background:#2a2b30; z-index:4;} #myAv .head .ey.l{left:9px;} #myAv .head .ey.r{right:9px;}
  #my .pcard .nm{font-size:19px; font-weight:800; letter-spacing:-.03em;}
  #my .pcard .bt{display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--sub); margin-top:8px;}
  #my .pcard .bt i{width:9px; height:9px; border-radius:50%; background:var(--green-light);}
  #my .smenu{display:flex; flex-direction:column; gap:2px;}
  #my .smenu a{display:flex; align-items:center; gap:11px; padding:13px 15px; border-radius:12px; font-size:16px; font-weight:600; color:var(--sub); cursor:pointer;}
  #my .smenu a:hover{background:var(--soft); color:var(--ink);}
  #my .smenu a.on{background:var(--green-soft); color:var(--green); font-weight:800;}
  #my .smenu a .i{width:20px; display:inline-flex; align-items:center; justify-content:center;} #my .smenu a .i svg{width:18px; height:18px;}
  #my main{min-height:calc(100vh - 150px);}  /* 패널 전환 시 프레임 높이 유지 → 스크롤 튐 방지 */
  #my .mpanel{display:none; animation:f .24s;} #my .mpanel.on{display:block;}
  #my h1{font-size:25px; font-weight:800; letter-spacing:-.04em; margin-bottom:4px;}
  #my .crumb{font-size:13px; color:var(--sub2); font-weight:700; margin-bottom:6px;}
  #my .lead{font-size:15px; color:var(--sub); margin-bottom:26px;}
  #my .mcard{background:#fff; border:1px solid var(--line); border-radius:18px; padding:4px 24px; margin-bottom:16px; box-shadow:0 6px 18px rgba(20,18,16,.05);}
  #my .msub{padding:20px 0; border-bottom:1px solid var(--line);} #my .msub:last-child{border:none;}
  /* 프로필 기본정보 — 이름/신체정보/선호핏을 각각 카드로 확실히 구분 + 액션 우측 정렬 */
  #my .prof-actions{display:flex; justify-content:flex-end; gap:9px; margin-top:16px; margin-bottom:26px;}   /* 프로필 박스 밖 버튼 — 아래 계정 박스와 간격 */
  /* 프로필·계정 카드 상단 제목 — 라벨을 흰 카드 안으로 통합(두 섹션 통일) */
  #my .mcard-hd{padding:16px 0 14px; border-bottom:1px solid var(--line); font-size:17px; font-weight:800; color:var(--ink);}
  #my .mcard-hd span{font-size:13px; font-weight:600; color:var(--sub2);}
  #my .mcard-hd.sep{border-top:1px solid var(--line); margin-top:8px; padding-top:22px;}   /* 한 박스 안 프로필↔계정 구역 구분 */
  #my .subhead{font-size:16px; font-weight:800; margin-bottom:12px;}
  #my .pr{display:inline-block; font-size:13px; font-weight:800; padding:2px 9px; border-radius:20px; margin-left:7px; vertical-align:middle;}
  #my .pr.core{background:var(--green-soft); color:var(--green);}
  #my .pr.half{background:var(--soft); color:var(--sub);}
  #my .pr.v2{background:#fff; border:1px solid var(--line2); color:var(--sub2);}
  #my .field{display:flex; justify-content:space-between; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px;}
  #my .field:last-of-type{border:none;} #my .field .v{font-weight:700;} #my .field .v.ph{color:var(--sub2);}
  #my .note{font-size:14px; color:var(--sub); margin-top:10px; line-height:1.55;}
  #my .sztbl{width:100%; border-collapse:collapse;}
  #my .sztbl th,#my .sztbl td{text-align:left; padding:11px 8px; border-bottom:1px solid var(--line); font-size:15px;}
  #my .sztbl th{font-size:13px; color:var(--sub2); font-weight:800;}
  #my .sztbl .sz{font-weight:800; color:var(--green); font-size:17px;} #my .sztbl .why{font-size:13px; color:var(--sub);}
  #my .req{padding:16px 0; border-bottom:1px solid var(--line);} #my .req:last-child{border:none;}
  #my .reqtop{display:flex; align-items:center; gap:14px;}
  /* 요청 라이프사이클 액션 */
  #my .reqact{margin-top:12px; padding:12px 14px; background:var(--soft); border-radius:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; color:var(--sub);}
  #my .reqact .muted{color:var(--sub2);}
  #my .tinybtn{font-size:13px; font-weight:800; padding:9px 15px; border-radius:10px; background:var(--ink); color:#fff; border:none; cursor:pointer; white-space:nowrap;}
  #my .tinybtn:hover{background:#000;} #my .tinybtn.ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line2);} #my .tinybtn.ghost:hover{background:var(--soft);}
  #my .offerbox{flex:1; min-width:200px; color:var(--ink-soft);} #my .offerbox b{color:var(--green);} #my .offerbox .num{font-family:var(--num); font-weight:800;}
  #my .offerbox .omsg{font-size:13px; color:var(--sub); margin-top:4px;}
  #my .obtns{display:flex; gap:8px; margin-left:auto;}
  #my .st.offer{background:var(--green); color:#fff;} #my .st.cancel{background:var(--warn-soft); color:var(--warn);}
  #my .revshow{color:var(--ink-soft);} #my .revshow .starsRO{letter-spacing:1px;} #my .revshow .rtx{margin-left:6px;}
  #my .reviewform{width:100%;} #my .reviewform .stars{display:flex; gap:8px; cursor:pointer;}
  #my .reviewform .stars span{line-height:0; color:var(--line2); transition:color .12s;}
  #my .reviewform .stars span.on{color:#e8a13a;}
  #my .reviewform .stars .cutestar{width:30px; height:30px;}
  .cutestar{width:16px; height:16px; display:inline-block; vertical-align:-2px;}
  /* 리스트카드·히어로·견적 등 인라인 단일 별 — cutestar 오렌지로 통일 */
  .rvstar{color:#e8a13a; display:inline-block; line-height:0;}
  .rvstar .cutestar{width:14px; height:14px; vertical-align:-2.5px;}
  #my .reviewform .rtext{width:100%; margin-top:10px; padding:11px 13px; border:1.5px solid var(--line2); border-radius:10px; font-family:inherit; font-size:14px; resize:vertical; min-height:64px; background:#fff;}
  #my .reviewform .rtext:focus{outline:none; border-color:var(--green);}
  #my .reviewform .rbtns{display:flex; gap:8px; justify-content:flex-end; margin-top:10px;}
  #my .req .ic{width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg,var(--green),var(--green-mid)); flex:none;}
  #my .req .info{flex:1;} #my .req .info b{font-size:15px;} #my .req .info small{display:block; font-size:13px; color:var(--sub); margin-top:2px;}
  #my .st{font-size:13px; font-weight:800; padding:5px 11px; border-radius:20px;}
  #my .st.wait{background:var(--soft); color:var(--sub);} #my .st.prog{background:var(--green-soft); color:var(--green);} #my .st.done{background:var(--soft); color:var(--ink);} #my .st.warn{background:var(--warn); color:#fff;}
  #my .fav{display:grid; grid-template-columns:repeat(2,1fr); gap:22px;}   /* 스타일리스트찾기 카드와 동일 크기 */
  #my .fcard{background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 6px 18px rgba(20,18,16,.08); cursor:pointer; transition:.18s;}
  #my .fcard:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(20,18,16,.12);}
  #my .fcard .cov{height:170px; position:relative; background:#EDE8E0; overflow:hidden;}
  #my .fcard .cov .favimg{width:100%; height:100%; object-fit:cover; object-position:center 18%; display:block; filter:saturate(.55) brightness(1.03) contrast(.98);}
  #my .fcard .heart{position:absolute; top:12px; right:12px; font-size:17px;}
  #my .fcard .fb{padding:16px 18px;}
  #my .fcard .fb .top{display:flex; justify-content:space-between; align-items:center;}
  #my .fcard .fb .top b{font-size:17px; font-weight:800;}
  #my .fcard .fb .star{font-size:15px; font-weight:700;} #my .fcard .fb .star .rv{color:var(--sub2); font-weight:600; font-size:13px;}
  #my .fcard .subtags{font-size:14px; color:var(--sub); font-weight:600; margin:9px 0 14px;}
  #my .fcard .cardmid .svcico{display:inline-flex; gap:6px;}
  #my .fcard .cardmid .svcico .b{width:29px; height:29px; border-radius:9px; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center;}
  #my .fcard .cardmid .svcico .b svg{width:16px; height:16px;}
  #my .links a{display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; font-weight:600; cursor:pointer;} #my .links a:last-child{border:none;} #my .links a .arr{color:var(--sub2);} #my .danger{color:var(--warn);}
  /* 고객센터 — 이동 링크를 카드형으로 확실히 보이게(FAQ=회색, 거래문제=경고) */
  #my .links a.faqmore,#my .links a.danger{border:none; border-radius:12px; padding:15px 18px; font-size:15.5px; font-weight:800; transition:background .15s;}
  #my .links a.faqmore{background:#F4F3F0; border:1px solid var(--line); color:var(--ink);}
  #my .links a.faqmore:hover{background:#EEEDE9;}
  #my .links a.danger{background:var(--warn-soft); color:var(--warn);}
  #my .links a.danger:hover{background:#f2ddd6;}
  #my .links a.faqmore .arr{color:var(--sub);} #my .links a.danger .arr{color:var(--warn);}
  #my .links a.faqmore .arr,#my .links a.danger .arr{font-size:22px; font-weight:800; transition:transform .15s;}
  #my .links a.faqmore:hover .arr,#my .links a.danger:hover .arr{transform:translateX(3px);}
  /* 파일 첨부 바 — FAQ 더보기와 동일한 연회색 톤 */
  #mp-support .attach{background:#F4F3F0; border:1px solid var(--line);}
  /* 고객센터 문의 — 선택칩 서브톤(딥그린 X)·높이 축소 */
  #supType .o,#supReq .o{padding:8px 16px;}
  #supType .o.on,#supReq .o.on{background:var(--green-soft); color:var(--green); border-color:var(--green-soft);}
  /* 문의 접수 = 안내문 좌 / 버튼 우 정렬 */
  #my .sup-submit{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; flex-wrap:wrap;}
  #my .sup-submit .note{margin-top:0; flex:1; min-width:200px;} #my .sup-submit .btn{flex:none;}
  /* 문의내역·거래문제 섹션 구분 강화 */
  #mp-support .msub{padding:22px 0;}
  /* 개인정보·데이터 — 액션 행(설명 좌 / 버튼 우).
     되돌릴 수 없는 액션일수록 색면을 키우지 않는다 — 테두리·글자색으로만 구분. */
  #my .actrow{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;}
  #my .actx{flex:1; min-width:200px;}
  #my .actx b{display:block; font-size:15.5px; font-weight:800; margin-bottom:4px;}
  #my .actx span{display:block; font-size:13.5px; color:var(--sub); line-height:1.55;}
  #my .actrow .tinybtn{flex:none; padding:11px 18px; font-size:14px;}
  #my .tinybtn.quit{background:#fff; color:var(--warn); border:1.5px solid var(--warn);}
  #my .tinybtn.quit:hover{background:var(--warn-soft);}
  /* 카드 밖 보조 고지 — 카드 안 '안내' 서브섹션이 본문과 동급으로 보이던 것을 낮춤 */
  #my .undernote{font-size:13px; color:var(--sub2); line-height:1.6; padding:0 4px; margin:-4px 0 8px;}
  #my .undernote b{color:var(--sub); font-weight:800;}
  #my .undernote a{color:var(--sub); font-weight:700; text-decoration:underline; text-underline-offset:2px;}
  #my .undernote a:hover{color:var(--green);}
  /* 회원 탈퇴 — 눈에 띄지 않는 작은 텍스트(누르면 진행) */
  #my .quitrow{text-align:right; margin-top:10px;}
  #my .quitrow .quitlink{display:inline; padding:0; border:none; font-size:12.5px; font-weight:500; color:var(--sub2); text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
  #my .quitrow .quitlink:hover{color:var(--warn);}
  /* 알림 리스트 (B · 좌측 강조 바 카드) — 안읽음=흰 카드+초록 좌측 바 / 읽음=연회색 카드 */
  #mp-noti #notiList{display:flex; flex-direction:column; gap:10px; padding:4px 0 2px;}
  #mp-noti #notiList a{position:relative; display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:13px; padding:13px 15px 13px 17px; overflow:hidden;}
  #mp-noti #notiList a.unread{background:#fff;}
  #mp-noti #notiList a.unread::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green);}
  #mp-noti .noti-ic{flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--soft); color:var(--sub2);}
  #mp-noti .noti-ic svg{width:19px; height:19px;}
  #mp-noti a.unread .noti-ic{background:var(--green-soft); color:var(--green);}
  #mp-noti .noti-bd{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
  #mp-noti .noti-msg{font-size:14.5px; font-weight:500; color:var(--sub); line-height:1.4;}
  #mp-noti a.unread .noti-msg{font-weight:700; color:var(--ink);}
  #mp-noti .noti-time{font-size:12px; color:var(--sub2);}
  #mp-noti #notiList a .arr{flex:none; color:var(--sub2);}
  #my .cardframe{height:672px;}

  /* ===== 헤더 알림 팝오버 (쇼퍼 pro.css .notipop와 동일 디자인) ===== */
  .navr .notipop{position:absolute; top:calc(100% + 8px); right:0; width:370px; max-width:calc(100vw - 40px); background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 16px 44px rgba(0,0,0,.17); padding:8px; display:none; z-index:70;}
  .navr .notipop.on{display:block;}
  .navr .notipop-hd{display:flex; align-items:center; justify-content:space-between; padding:11px 12px 12px; font-size:15px; font-weight:800; color:var(--ink);}
  .navr .notipop-hd a{font-size:12.5px; font-weight:600; color:var(--sub2); cursor:pointer;}
  .navr .notipop-hd a:hover{color:var(--green);}
  .navr .notipop-list{display:flex; flex-direction:column; gap:8px; max-height:min(62vh,460px); overflow-y:auto; padding:2px;}
  .navr .notipop .noti{position:relative; display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:13px; padding:12px 14px; overflow:hidden; cursor:pointer; text-decoration:none;}
  .navr .notipop .noti.unread{background:#fff;}
  .navr .notipop .noti.unread::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--green);}
  .navr .notipop .noti-ic{flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--soft); color:var(--sub2);}
  .navr .notipop .noti-ic svg{width:19px; height:19px;}
  .navr .notipop .noti.unread .noti-ic{background:var(--green-soft); color:var(--green);}
  .navr .notipop .noti-bd{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
  .navr .notipop .noti-msg{font-size:14px; font-weight:500; color:var(--sub); line-height:1.4;}
  .navr .notipop .noti.unread .noti-msg{font-weight:700; color:var(--ink);}
  .navr .notipop .noti-time{font-size:12px; color:var(--sub2);}
  .navr .notipop .noti .arr{flex:none; color:var(--sub2);}
  .navr .notipop-empty{padding:26px 12px; text-align:center; font-size:13px; color:var(--sub);}

  /* ===== 마이 · 내 진단 결과 상세 (MBTI형 유형 풀이) ===== */
  /* 레이아웃 A — 좌 카드 스티키 + 우 콘텐츠(결과 화면 result.html과 동일 언어) */
  /* 진단 결과 레이아웃 A: 좌 카드(스티키) + 우 콘텐츠 스택 */
  #my .dtl-A{display:grid; grid-template-columns:380px 1fr; gap:28px; align-items:start;}
  #my .dtl-A-left{display:flex; flex-direction:column; gap:16px;}
  #my .dtl-A-left .cardframe{height:684px; width:380px; max-width:100%; border:0; border-radius:20px; box-shadow:0 14px 36px rgba(20,22,28,.12); display:block;}
  #my .dtl-A-left .dtl-id .dtl-name{font-size:22px;}
  #my .dtl-A-right{min-width:0; display:flex; flex-direction:column; gap:16px;}
  #my .dtl-id{background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 26px 24px; box-shadow:0 6px 18px rgba(20,18,16,.05);}
  /* --tp = 유형 포인트색(결과 카드와 동일). dtl-id에 인라인으로 지정 → 유형별로 이 값만 바꾸면 됨 */
  #my .dtl-code{font-family:var(--num); font-feature-settings:'tnum'; font-weight:800; font-size:14px; letter-spacing:.14em; color:color-mix(in srgb, var(--tp,var(--green)) 72%, var(--ink)); background:color-mix(in srgb, var(--tp,var(--green)) 22%, #fff); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tp,var(--green)) 40%, #fff); display:inline-block; padding:5px 12px; border-radius:8px;}
  #my .dtl-name{font-size:27px; font-weight:800; letter-spacing:-.04em; margin:14px 0 8px;}
  #my .dtl-korea{font-size:14px; font-weight:700; color:var(--sub2); background:var(--soft); padding:5px 11px; border-radius:20px;}
  #my .dtl-desc{font-size:16px; color:var(--ink-soft); line-height:1.7; margin:16px 0 18px;} #my .dtl-desc b{color:var(--ink); font-weight:800;}
  #my .dtl-hash{display:flex; flex-wrap:wrap; gap:7px;}
  #my .dtl-hash span{font-size:14px; font-weight:800; color:color-mix(in srgb, var(--tp,var(--green)) 62%, var(--ink)); background:color-mix(in srgb, var(--tp,var(--green)) 20%, #fff); padding:6px 13px; border-radius:20px;}

  /* 잘맞/피할 FIT — 한 박스에 위아래 두 줄(라벨+칩 가로 정렬) */
  #my .dtl-fitbox{background:#fff; border:1px solid var(--line); border-radius:18px; padding:4px 20px; margin-bottom:16px; box-shadow:0 6px 18px rgba(20,18,16,.05);}
  #my .dtl-fit{display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid var(--line);}
  #my .dtl-fitbox .dtl-fit:last-child{border-bottom:none;}
  #my .dtl-fit-h{font-size:14px; font-weight:800; letter-spacing:-.01em; flex:none; width:90px; display:flex; align-items:center; gap:5px;}
  #my .dtl-fit-h svg{width:15px; height:15px; flex:none;}
  #my .dtl-fit.ok .dtl-fit-h{color:var(--green);}
  #my .dtl-fit.no .dtl-fit-h{color:var(--warn);}
  #my .dtl-chips{display:flex; flex-wrap:wrap; gap:7px;}
  #my .dtl-chips span{font-size:13px; font-weight:700; padding:7px 12px; border-radius:11px;}
  #my .dtl-fit.ok .dtl-chips span{background:var(--green-soft); color:var(--green);}
  #my .dtl-fit.no .dtl-chips span{background:var(--warn-soft); color:var(--warn);}

  /* FITTING의 한 끗 — 우측 세로 카드(다크 + 유형색 포인트) */
  #my .dtl-tip{position:relative; background:linear-gradient(135deg, #211E18, var(--ink)); border-radius:18px; padding:22px 24px; margin-bottom:16px; box-shadow:0 10px 26px rgba(20,18,16,.28); overflow:hidden;}
  #my .dtl-tip::after{content:""; position:absolute; right:-30px; top:-30px; width:130px; height:130px; border-radius:50%; background:radial-gradient(circle, color-mix(in srgb, var(--tp,var(--green-light)) 32%, transparent), transparent 70%);}
  #my .dtl-tip .k{position:relative; font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--tp,var(--green-light)); margin-bottom:9px;}
  #my .dtl-tip p{position:relative; font-size:17px; color:#fff; line-height:1.62; margin:0;} #my .dtl-tip p b{color:#fff; font-weight:800; box-shadow:inset 0 -9px 0 color-mix(in srgb, var(--tp,var(--green-light)) 45%, transparent);}
  /* 재진단·공유 — 박스 밖 단독 액션 */
  #my .dtl-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:2px;} #my .dtl-actions .btn{flex:1; min-width:150px;}

  /* 내 체형 측정 — 백분위 스펙트럼(결과 화면 .rspec 재현, MBTI 축 그래프 대응) */
  #my .dtl-meas{background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 24px; margin-bottom:16px; box-shadow:0 6px 18px rgba(20,18,16,.05);}
  #my .dtl-meas-h{display:flex; justify-content:space-between; align-items:center;}
  #my .dtl-meas-h .k{font-size:16px; font-weight:800;}
  #my .dtl-meas-h .chip{font-size:13px; font-weight:700; color:var(--green); background:var(--green-soft); padding:6px 12px; border-radius:20px;}
  /* 결과 풀이 — ＋강점 / ＝핏공식 / ！주의 (결과 화면 result.html과 동일 언어) */
  #my .dtl-mean{background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 24px; margin-bottom:16px; box-shadow:0 6px 18px rgba(20,18,16,.05);}
  #my .dtl-mean .k{font-size:16px; font-weight:800; letter-spacing:-.03em;}
  #my .dtl-mean .rex{margin-top:16px;}
  #my .dtl-mean .lbl{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:800; color:var(--ink);}
  #my .dtl-mean .mk{width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; flex:none;}
  #my .dtl-mean .plus .mk{background:var(--green-soft); color:var(--green);}
  #my .dtl-mean .eq .mk{background:var(--soft); color:var(--ink-soft);}
  #my .dtl-mean .warn .mk{background:var(--warn-soft); color:var(--warn);}
  #my .dtl-mean p{font-size:14px; color:var(--sub); line-height:1.6; margin-top:7px;}
  #my .dtl-mean p strong{color:var(--ink); font-weight:700;}
  #my .dtl-mean .foot{font-size:13px; color:var(--sub2); margin-top:16px; line-height:1.5;}
  /* 판정(Fit) 진입 바 — 결과 화면(result.css .rjudge)과 동일, 토큰만 참조 */
  #my .rjudge{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; border:1.5px solid var(--green-line); background:var(--green-soft); border-radius:16px; padding:14px 16px;}
  #my .rjudge:hover{background:#DCEAE2;}
  #my .rjudge-ic{width:36px; height:36px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; flex:none;}
  #my .rjudge-ic svg{width:18px; height:18px; color:var(--green);}
  #my .rjudge-tx{flex:1; min-width:0;}
  #my .rjudge-tx b{display:block; font-size:14.5px; font-weight:800; letter-spacing:-.02em; color:var(--ink);}
  #my .rjudge-tx span{font-size:12.5px; color:var(--sub);}
  #my .rjudge-go{font-size:13.5px; font-weight:800; color:var(--green); white-space:nowrap;}
  /* 맨 위(제목·설명 아래·카드 위 전체폭) 배치 — 결과 화면 완성 유도 배너 자리와 동일.
     흰 카드 + 초록 포인트(아이콘·글씨) — 옆 내비 선택(.smenu a.on = green-soft)과 색 겹침 방지 */
  #my .rjudge-top{margin-bottom:22px; background:#fff; border-color:var(--line); box-shadow:0 6px 18px rgba(20,18,16,.05);}
  #my .rjudge-top .rjudge-ic{background:var(--green-soft);}
  #my .rjudge-top:hover{background:var(--soft);}
  #my .dtl-grp{font-size:15px; font-weight:800; color:var(--sub); margin:22px 0 15px; padding-bottom:9px; border-bottom:1px solid var(--line);}
  /* 상·하 컬러 라벨 (상=진초록 / 하=중간초록, 측정 게이지 색과 통일) */
  #my .dtl-grp.up, #my .dtl-grp.lo, #my .dtl-grp.pref{display:flex; align-items:center; gap:7px;}
  #my .dtl-grp.up::before, #my .dtl-grp.lo::before, #my .dtl-grp.pref::before{content:""; width:4px; height:14px; border-radius:2px; flex:none;}
  #my .dtl-grp.up{color:var(--green);} #my .dtl-grp.up::before{background:var(--green);}
  #my .dtl-grp.lo{color:var(--green-mid);} #my .dtl-grp.lo::before{background:var(--green-mid);}
  #my .dtl-grp.pref::before{background:var(--green-light);}
  #my .dtl-spec{margin-top:14px;}
  #my .dtl-spec .top{display:flex; justify-content:space-between; align-items:baseline; font-size:13px;}
  #my .dtl-spec .pole{color:var(--sub2); font-weight:600;} #my .dtl-spec .pole.dom{color:var(--ink); font-weight:800;}
  #my .dtl-spec .pct{color:var(--green); font-weight:800;} #my .dtl-spec .pct .n{font-size:15px; font-family:var(--num); font-feature-settings:'tnum';}
  #my .dtl-track{height:7px; background:#EDECE8; border-radius:4px; margin:8px 0 7px; overflow:hidden;} #my .dtl-track i{display:block; height:100%; background:var(--green); border-radius:4px;}
  #my .dtl-axis{font-size:13px; color:var(--sub);}

  /* 브랜드 추천 — 핏 바 배경(S2) */
  #my .s2row{position:relative; border-radius:11px; padding:12px 16px; margin-bottom:8px; overflow:hidden; background:#F1F5F2;} #my .s2row:last-child{margin-bottom:0;}
  #my .s2fill{position:absolute; left:0; top:0; bottom:0; background:color-mix(in srgb, var(--green) 16%, #fff); z-index:0;}
  #my .s2in{position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:12px;}
  #my .s2in .b{font-size:16px; font-weight:800;} #my .s2in .b small{font-weight:600; color:var(--sub); font-size:14px; margin-left:8px;}
  #my .s2in .r{display:flex; align-items:center; gap:14px; flex:none;}
  #my .s2in .sz{font-family:var(--num); font-feature-settings:'tnum'; font-size:22px; font-weight:800;}
  #my .s2in .p{font-size:14px; font-weight:800; color:var(--green);}

  /* 체형 측정 — 세그먼트 게이지(N2) · 상체=진초록 / 하체=중간초록 */
  #my .n2row{padding:12px 0; border-bottom:1px solid var(--line);} #my .n2row:last-of-type{border-bottom:none;}
  #my .n2row:has(+ .dtl-grp){border-bottom:none;}  /* 그룹 끝 행(가슴·엉덩이)은 다음 헤더가 구분 → 밑줄 제거 */
  #my .n2top{display:flex; justify-content:space-between; align-items:baseline; font-size:14px;}
  #my .n2top{font-size:15px;} #my .n2top .part{font-weight:800; font-size:16px;} #my .n2top .zone{font-weight:800; font-size:14px; color:var(--green);}
  #my .n2row.lo .n2top .zone{color:var(--green-mid);}
  #my .n2segs{display:flex; gap:5px; margin:10px 0 6px;}
  #my .n2seg{flex:1; height:13px; border-radius:4px; background:var(--green-soft);}
  #my .n2seg.on{background:var(--green);} #my .n2seg.near{background:var(--green-light);}
  #my .n2row.lo .n2seg.on{background:var(--green-mid);} #my .n2row.lo .n2seg.near{background:#B9CFC2;}
  #my .n2scale{display:flex; justify-content:space-between; font-size:13px; color:var(--sub); font-weight:600;}

  /* 박스 간격 통일 — 컨테이너 gap으로만 (개별 마진 리셋, 소스 순서상 뒤라 블록 마진을 덮음) */
  #my .dtl-A-left > *, #my .dtl-A-right > *{margin:0;}
  @media(max-width:820px){ #my .mwrap{grid-template-columns:1fr;} #my .side{position:static;} #my .fav{grid-template-columns:1fr;} #my .dtl-A{grid-template-columns:1fr;} #my .dtl-A-left{position:static;} }
  /* 전역 푸터 — 법적 고지 접근. 배경색 억제, 얇은 라인 + muted */
  /* 위 .page 하단 여백(90px)을 일부 상쇄해 라인 위 간격을 ~54px로. 아래는 페이지 끝 여백 40px */
  .site-foot{ border-top:1px solid var(--line); flex:none; }
  .site-foot .in{ max-width:1240px; margin:0 auto; padding:30px 30px 40px; display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 24px; }
  .site-foot .brand{ font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--ink); }
  .site-foot .flinks{ display:flex; gap:20px; }
  .site-foot .flinks a{ font-size:14px; font-weight:600; color:var(--sub); text-decoration:none; cursor:pointer; }
  .site-foot .flinks a:hover{ color:var(--ink); }
  .site-foot .copy{ font-size:13px; color:var(--sub2); margin-left:auto; line-height:1.6; max-width:420px; }
  @media(max-width:640px){ .site-foot .in{ padding:24px 20px 40px; } .site-foot .copy{ margin-left:0; flex-basis:100%; } }

  /* ===== 오픈/지명 요청 배지 (요청내역 · 견적 결과 화면 공용) ===== */
  .reqtype{display:inline-block; font-size:13px; font-weight:800; padding:3px 9px; border-radius:20px; vertical-align:middle; letter-spacing:-.01em;}
  .reqtype.open{background:var(--green-soft); color:var(--green);}
  .reqtype.named{background:var(--soft); color:var(--sub2);}

  /* ===== 요청내역 — 오픈/지명 그룹 (두 요청 방식을 섹션으로 분리) ===== */
  #my .reqgroup{background:#fff; border:1px solid var(--line); border-radius:18px; padding:2px 22px 8px; margin-bottom:16px; box-shadow:0 6px 18px rgba(20,18,16,.05);}
  #my .rghead{display:flex; align-items:center; gap:13px; padding:18px 0 16px; border-bottom:1px solid var(--line);}
  #my .rghead .rgicon{width:42px; height:42px; border-radius:13px; display:flex; align-items:center; justify-content:center; flex:none;}
  #my .rghead .rgicon svg{width:21px; height:21px;}
  #my .rghead.open .rgicon,
  #my .rghead.named .rgicon,
  #my .rghead.alert .rgicon{background:var(--green-soft); color:var(--green);}
  #my .rghead .rgtx{flex:1; min-width:0;}
  #my .rghead .rgtx b{font-size:17px; font-weight:800; letter-spacing:-.03em;}
  #my .rghead .rgtx p{font-size:13px; color:var(--sub); margin-top:4px; line-height:1.5;}
  #my .rghead .rgcount{font-size:13px; font-weight:800; color:var(--sub); background:var(--soft); padding:5px 11px; border-radius:20px; flex:none;}
  #my .rghead.open .rgcount{color:var(--green); background:var(--green-soft);}
  #my .rgempty{font-size:14px; color:var(--sub2); padding:18px 4px 12px;}
  #my .rgempty a{color:var(--green); font-weight:800; cursor:pointer;}
  /* 카드 좌측 그룹 악센트(box-shadow inset — 기존 border 규칙과 충돌 없음) */
  #my .req.open{box-shadow:inset 3px 0 0 var(--green); padding-left:15px;}
  #my .req.named{box-shadow:inset 3px 0 0 var(--line2); padding-left:15px;}
  /* 받은 견적 — 컴팩트 클릭 행(숨고형): 날짜·상황·서비스 + 견적 건수 › */
  #my .reqrow{display:flex; align-items:center; gap:14px; padding:21px 4px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:10px; transition:background .15s;}
  #my .reqrow:hover{background:var(--soft);}
  #my .rglist .reqrow:last-child{border-bottom:none;}
  #my .reqrow-l{flex:1; min-width:0;}
  #my .reqrow-top{font-size:13px; color:var(--sub2); font-weight:700;}
  #my .reqrow-title{font-size:17px; font-weight:800; letter-spacing:-.02em; margin-top:5px;}
  #my .reqrow-r{display:flex; align-items:center; gap:5px; flex:none; font-size:15px; font-weight:700; color:var(--sub);}
  #my .reqrow-r b{color:var(--ink); font-weight:800;}
  #my .reqrow-r .chev{font-size:22px; color:var(--sub2); font-weight:400; line-height:1;}
  /* 통일 리스트 행(.ureq) — 스타일리스트 화면과 동일 언어: 2줄 + 모노 아이콘, 색은 상태에만 */
  #my .ureq{display:flex; align-items:center; gap:13px; padding:16px 4px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:10px; transition:background .15s;}
  #my .ureq:last-child{border-bottom:none;}
  #my .ureq:hover{background:var(--soft);}
  /* 진행 중(active) 표시 — 왼쪽 선 대신 아이콘 타일을 연한 초록으로 활성화 */
  #my .ureq.active .ureq-ic{background:var(--green-soft); color:var(--green); border-color:var(--green-light);}
  #my .ureq.active .ureq-title{color:var(--green);}
  #my .ureq.past{opacity:.5;}
  #my .ureq-ic{width:40px; height:40px; border-radius:11px; background:var(--soft); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex:none; border:1px solid var(--line);}
  #my .ureq-ic svg{width:20px; height:20px;}
  #my .ureq-l{flex:1; min-width:0;}
  #my .ureq-title{font-size:16px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  #my .ureq-meta{font-size:13px; color:var(--sub); font-weight:600; margin-top:4px;}
  #my .ureq-meta b{color:var(--sub); font-weight:700;}
  #my .ureq-r{display:flex; align-items:center; gap:8px; flex:none;}
  #my .ureq-r .cnt{color:var(--ink); font-weight:800; font-size:14px;}   /* '견적 N개' — 딥그린 아닌 굵은 텍스트(원래 톤) */
  #my .ureq-r .chev{font-size:22px; color:var(--sub2); font-weight:400; line-height:1;}
  /* 진행/지난 상태 구분 — 진행 중은 딥그린 강조, 지난 요청은 흐리게 */
  #my .substat{font-size:13px; font-weight:800; letter-spacing:.04em; padding:16px 4px 6px; display:flex; align-items:center; gap:7px;}
  #my .substat.active{color:var(--green);}
  #my .substat.active::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green);}
  #my .substat.past{color:var(--sub2);}
  #my .reqrow.active{position:relative; padding-left:14px;}
  #my .reqrow.active .reqrow-title{color:var(--green);}
  #my .reqrow.active::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:99px; background:var(--green);}
  #my .reqrow.past{opacity:.5;}
  /* 프로필 편집 폼 */
  #my .pedit{padding:12px 0; border-bottom:1px solid var(--line);} #my .pedit:last-child{border-bottom:none;}
  #my .pedit label{display:block; font-size:14px; font-weight:700; color:var(--sub); margin-bottom:8px;}
  #my .pedit.inrow3{display:flex; gap:10px;} #my .pedit.inrow3 > div{flex:1;}

  /* ===== 견적 요청 결과(받은 견적) 오버레이 (IA 1.3.8) ===== */
  /* 요청 상세 = 독립 전체 페이지. 상단 내비(67px)는 유지, 그 아래를 덮고 페이드 인 */
  .bids-overlay{position:fixed; top:67px; left:0; right:0; bottom:0; background:var(--bg); z-index:110; display:none; overflow-y:auto; scrollbar-gutter:stable;}
  .bids-overlay.on{display:block; animation:reqfade .3s cubic-bezier(.2,.8,.2,1);}
  .bids-inner{position:relative; width:100%; max-width:1160px; margin:0 auto; padding:30px 28px 90px;}   /* 쇼퍼 .qwrap와 동일 폭·여백 */
  .bids-inner::before{content:none;}
  @keyframes reqfade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
  /* 마이페이지 헤더 톤과 통일 — crumb(13/sub2) + h1(25) + lead(15/sub), 하단선 없음 */
  .bids-head{position:relative; padding-right:52px; margin-bottom:24px;}
  .bids-head .xbtn{position:absolute; top:0; right:0;}
  .bids-back, .bids-head .crumb-back{display:inline-block; background:none; border:none; color:var(--sub2); font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; padding:0; margin-bottom:9px;}
  .bids-back:hover, .bids-head .crumb-back:hover{color:var(--green);}
  .bids-head h2{font-size:25px; font-weight:800; letter-spacing:-.04em; margin:0 0 5px;}
  .bids-head .reqtype{margin-bottom:8px;}
  .bids-head p{font-size:15px; color:var(--sub); margin-top:0; line-height:1.6;}
  /* 공용 확인 모달 */
  .confirm-scrim{position:fixed; inset:0; background:rgba(20,18,16,.72); backdrop-filter:blur(3px); z-index:140; display:none; align-items:center; justify-content:center; padding:24px;}
  .confirm-scrim.on{display:flex; animation:f .18s ease;}
  .confirm-box{background:#fff; border-radius:22px; padding:36px 32px 26px; max-width:460px; width:100%; box-shadow:0 24px 60px rgba(10,11,14,.28); text-align:center;}
  /* 요청 완료 — 확인 모달 그 자리에서 성공으로 전환(전체화면 점프 없음) */
  .confirm-box:has(.cf-done){max-width:460px;}
  .cf-done{padding:6px 0 2px;}
  .cf-done-ic{width:60px; height:60px; border-radius:50%; background:var(--green-soft); color:var(--green); font-size:30px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 16px; animation:cfpop .32s cubic-bezier(.2,1.4,.4,1);}
  .cf-done-t{font-size:21px; font-weight:800; letter-spacing:-.03em;}
  .cf-done-s{font-size:14px; color:var(--sub); margin-top:5px; line-height:1.55;} .cf-done-s b{color:var(--green); font-weight:800;}
  @keyframes cfpop{from{transform:scale(.5); opacity:0;} to{transform:scale(1); opacity:1;}}
  .confirm-msg{font-size:21px; font-weight:800; letter-spacing:-.03em; color:var(--ink); line-height:1.4; margin:0 0 26px;}
  .confirm-msg b{font-weight:800; color:var(--green);}
  .confirm-msg .cf-sub{display:block; font-size:14.5px; color:var(--sub); font-weight:600; margin-top:6px; line-height:1.55;}
  /* 견적 보내기 전 '내 요청서' 확인 — 미니멀 명세(A) */
  .confirm-box:has(.cf-a){max-width:460px;}
  .cf-a{text-align:left;}
  .cf-a-ic{display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:13px; background:var(--green-soft); color:var(--green); margin-bottom:14px;}
  .cf-a-ic svg{width:24px; height:24px;}
  .cf-a-eye{font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--green-mid);}
  .cf-a-title{font-size:22px; font-weight:800; letter-spacing:-.04em; margin:9px 0 5px; line-height:1.32;}
  .cf-a-sub{font-size:13.5px; color:var(--sub); margin-bottom:18px; line-height:1.5;}
  .cf-a-list{display:flex; flex-direction:column;}
  .cf-a-item{display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:15px;}
  .cf-a-item:last-child{border-bottom:none;}
  .cf-a-item .k{color:var(--sub); font-weight:600; flex:none;}
  .cf-a-item .v{font-weight:800; text-align:right; color:var(--ink);}
  .cf-a-chip{display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-size:13px; font-weight:700; color:var(--green); background:var(--green-soft); padding:9px 13px; border-radius:11px;}
  .cf-a-chip svg{width:15px; height:15px; flex:none;}
  .cf-a-chip.off{color:var(--sub); background:var(--soft);}
  .confirm-box:has(.cf-a) .confirm-btns{margin-top:28px;}   /* 첨부 칩과 버튼 사이 간격 ↑ */
  /* (구) 영수증형 — 미사용, 호환용 유지 */
  .confirm-box:has(.cf-receipt){max-width:500px;}
  .cf-lead{font-size:22px; font-weight:800; color:var(--ink); margin-bottom:16px;}
  .cf-receipt{text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:16px; margin-top:2px; overflow:hidden; box-shadow:0 6px 18px rgba(20,18,16,.06);}
  .cf-receipt .cfr-h{display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; color:#fff; background:var(--green); padding:17px 22px;}
  .cf-receipt .cfr-hi{width:20px; height:20px; flex:none;}
  .cf-receipt .cfr-body{padding:8px 22px 10px;}
  .cf-receipt .cfr-row{display:flex; justify-content:space-between; gap:18px; padding:15px 0; border-bottom:1px dashed var(--line2); font-size:17px;}
  .cf-receipt .cfr-row:last-of-type{border-bottom:none;}
  .cf-receipt .cfr-row span{color:var(--sub); flex:none; font-weight:600;} .cf-receipt .cfr-row b{color:var(--ink); font-weight:800; text-align:right;}
  .cf-receipt .cfr-note{display:flex; align-items:center; gap:8px; font-size:15px; color:var(--green); font-weight:700; background:var(--green-soft); padding:14px 22px;}
  .cf-receipt .cfr-ni{width:17px; height:17px; flex:none;}
  .cf-receipt .cfr-note.off{color:var(--sub); background:var(--soft);}
  .rs-note.off{background:var(--soft); color:var(--sub2);}
  .confirm-box:has(.cf-receipt) .confirm-btns button{padding:15px; font-size:16px;}
  /* 쇼퍼 confirm 모달과 동일 — 주버튼 하나 + 아래 조용한 '돌아가기' 링크(비대칭) */
  .confirm-btns{display:flex; gap:10px;}
  .confirm-btns button{flex:1; padding:16px; border-radius:12px; font-size:16px; font-weight:800; font-family:inherit; cursor:pointer; border:none;}
  .confirm-btns .cf-yes{background:var(--ink); color:#fff;}
  .confirm-btns .cf-yes:hover{background:#000;}
  .cf-quiet{margin-top:12px;}
  .cf-quiet button{border:none; background:none; padding:4px 8px; font-family:inherit; font-size:13.5px; font-weight:700; color:var(--sub2); cursor:pointer;}
  .cf-quiet button:hover{color:var(--warn); text-decoration:underline;}
  /* 결제 모달 — 요청 상세 위에 가운데로 뜨는 다이얼로그(풀스크린 점프 방지) */
  .pay-scrim{position:fixed; inset:0; background:rgba(22,20,15,.5); z-index:150; display:none; align-items:center; justify-content:center; padding:24px;}
  .pay-scrim.on{display:flex; animation:f .18s ease;}
  .pay-box{position:relative; background:#fff; border-radius:20px; padding:24px 22px 20px; max-width:460px; width:100%; max-height:88vh; overflow-y:auto; box-shadow:0 24px 60px rgba(10,11,14,.28);}
  .pay-x{position:absolute; top:15px; right:15px; width:32px; height:32px; border-radius:50%; border:none; background:var(--soft); color:var(--ink); font-size:14px; cursor:pointer; line-height:1;}
  .pay-x:hover{background:var(--line2);}
  .pay-mhead{margin-bottom:16px; padding-right:34px;}
  .pay-mhead .reqtype{display:inline-block; margin-bottom:8px;}
  .pay-mhead h3{font-size:22px; font-weight:800; letter-spacing:-.03em; color:var(--ink);}
  .pay-mhead p{font-size:13.5px; color:var(--sub); margin-top:4px;}
  .pay-box .btn{width:100%; background:var(--ink); color:#fff; border:none; font-weight:800; cursor:pointer;}
  .pay-box .btn:hover{background:#000;}
  /* 신고·환불 모달 — 쇼퍼 신고 모달과 타이포/구성 동일(제목16·부제12.5·사유14·라벨13·본문14·버튼15) */
  .dsp-head{margin-bottom:14px; padding-right:34px;}
  .dsp-head h3{font-size:16px; font-weight:800; color:var(--ink); letter-spacing:-.01em;}
  .dsp-head p{font-size:12.5px; color:var(--sub); margin-top:3px;}
  .dsp-note{font-size:12.5px; color:var(--sub2); line-height:1.55; margin:0 0 12px;}
  .dsp-reasons{display:flex; flex-direction:column;}
  .dsp-r{display:flex; align-items:center; gap:9px; padding:11px 4px; font-size:14px; font-weight:600; color:var(--ink); cursor:pointer; border-bottom:1px solid var(--line);}
  .dsp-r:last-child{border-bottom:none;}
  .dsp-r input{accent-color:var(--green); width:16px; height:16px; cursor:pointer; flex:none; margin:0;}
  .dsp-label{font-size:13px; font-weight:800; color:var(--ink); margin:14px 0 6px;}
  .pay-box .inp{font-size:14px; padding:11px 13px;}
  .pay-box .btn{font-size:15px;}

  .bids-cancel{text-align:center; margin-top:26px;}
  .bids-cancel button{background:none; border:none; color:var(--sub2); font-size:14px; font-weight:700; text-decoration:underline; text-underline-offset:2px; cursor:pointer; font-family:inherit;}
  .bids-cancel button:hover{color:var(--warn);}
  /* 오버레이 버튼 = 연한초록 채움 + 딥그린 텍스트(딥그린 풀필 지양). 핵심 CTA만 딥그린 테두리(.key) */
  /* 요청 상세 오버레이 버튼 — 쇼퍼와 동일하게 검정(ink) 채움. ghost만 흰 배경+라인 */
  .bids-overlay .tinybtn{font-weight:800; padding:11px 15px; border-radius:10px; background:var(--ink); color:#fff; border:none; cursor:pointer; white-space:nowrap; font-family:inherit;}
  .bids-overlay .tinybtn:hover{background:#000;}
  .bids-overlay .tinybtn.key{background:var(--ink);}
  .bids-overlay .tinybtn.ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line2);}
  .bids-overlay .tinybtn.ghost:hover{background:var(--soft);}
  .bids-overlay .btn{background:var(--ink); color:#fff; border:none;}
  .bids-overlay .btn:hover{background:#000;}
  .bids-overlay .btn.key{background:var(--ink);}
  .bids-overlay .btn.ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line2);}
  /* 견적 카드 — 숨고형 세로 리스트 */
  .bids-list{display:flex; flex-direction:column; gap:14px; margin-top:18px;}
  .qcard{position:relative; display:flex; gap:16px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:0 4px 14px rgba(20,18,16,.05);}
  .qcard.best{border-color:var(--green); box-shadow:0 0 0 1.5px var(--green-soft), 0 10px 26px rgba(46,74,59,.12);}
  .qcard.sel{border-color:var(--green); background:var(--green-soft); box-shadow:0 0 0 1px var(--green);}
  .qcard .q-status{display:block; width:100%; text-align:center; padding:11px 10px; font-size:14px; font-weight:800; border-radius:10px; background:var(--ink); color:#fff; opacity:.4; cursor:default; white-space:nowrap;}
  .qcard .q-l{flex:1; min-width:0;}
  .qcard .q-top{display:flex; align-items:center; gap:11px;}
  .qcard .q-ph{width:44px; height:44px; border-radius:50%; object-fit:cover; filter:saturate(.6); flex:none;}
  .qcard .q-nm{font-size:17px; font-weight:800; letter-spacing:-.02em;}
  .qcard .q-best{font-size:13px; font-weight:800; color:#fff; background:var(--green); padding:3px 9px; border-radius:20px;}
  .qcard .q-price{font-size:22px; font-weight:800; letter-spacing:-.02em; margin-top:13px;} .qcard .q-price .num{font-family:var(--num); font-feature-settings:'tnum';}
  .qcard .q-meta{font-size:14px; color:var(--sub); margin-top:7px;} .qcard .q-meta b{color:var(--green); font-weight:800;}
  .qcard .q-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px;}
  .qcard .q-tags span{font-size:13px; background:var(--soft); color:#6a6258; padding:3px 9px; border-radius:20px; font-weight:600;}
  .qcard .q-msg{font-size:14px; color:var(--ink-soft); line-height:1.55; margin-top:12px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
  .qcard .q-r{display:flex; flex-direction:column; gap:8px; flex:none; width:120px;}
  .qcard .q-r .tinybtn{width:100%; text-align:center; padding:11px 10px; font-size:14px;}
  /* 내가 보낸 요청 내용 — 토글 패널(받은 견적) + 요약 표 */
  .req-toggle{display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:9px 15px; border-radius:10px; border:1.5px solid var(--line2); background:#fff; color:var(--sub); font-size:14px; font-weight:800; font-family:inherit; cursor:pointer;}
  .req-toggle:hover{border-color:var(--green); color:var(--green);}
  .req-toggle .tg{font-size:13px;}
  .req-summary{display:none; margin-top:14px;}
  .req-summary.on{display:block;}
  .req-summary-in{background:#fff; border:1px solid var(--line); border-radius:14px; padding:6px 16px;}
  .rs-head{display:flex; align-items:center; gap:12px; padding:14px 2px 13px; border-bottom:1px solid var(--line);}
  .rs-ic{flex:none; width:38px; height:38px; border-radius:11px; background:var(--green-soft); color:var(--green); display:flex; align-items:center; justify-content:center;}
  .rs-ic svg{width:21px; height:21px;}
  .rs-htx{min-width:0;}
  .rs-title{display:block; font-size:18px; font-weight:800; color:var(--ink); letter-spacing:-.01em;}
  .rs-sum{display:block; margin-top:5px; font-size:14px; color:var(--sub); font-weight:600;}
  .rs-row{display:flex; justify-content:space-between; align-items:center; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px;}
  .rs-row:last-of-type{border-bottom:none;}
  .rs-row span{color:var(--sub); flex:none;} .rs-row b{color:var(--ink); font-weight:700; text-align:right;}
  .rs-note{display:inline-flex; align-items:center; gap:6px; margin:14px 0 4px; padding:9px 13px; background:var(--green-soft); color:var(--green); font-weight:700; font-size:13px; border-radius:10px; line-height:1.3;}
  /* 지명 요청 상세 — 섹션 */
  .rq-sec{margin-top:24px;}
  .rq-sec .rq-h{font-size:15px; font-weight:800; letter-spacing:-.02em; margin-bottom:11px;}
  /* 요청 상세 B — 2단(좌:고정 정보 / 우:진행). 진행 콘텐츠 없으면 단일 중앙 컬럼 */
  .rq-two{display:grid; grid-template-columns:360px 1fr; gap:28px; align-items:start; margin-top:24px;}   /* 쇼퍼 .qgrid와 동일 컬럼·간격 */
  .rq-two .rq-col-l{position:sticky; top:14px;}
  .rq-two .rq-col-l, .rq-two .rq-col-r, .rq-solo{display:flex; flex-direction:column; gap:14px;}
  .rq-two .rq-col-r{min-width:0;}
  .rq-solo{max-width:640px; margin:0 auto;}
  .rq-two .rq-col-l > *, .rq-two .rq-col-r > *, .rq-solo > *{margin:0;}
  /* 모든 섹션을 동일한 흰 카드로 통일(박스 정렬) — 안쪽 요약박스는 중복 방지로 투명화 */
  .rq-two .rq-sec, .rq-solo .rq-sec{background:#fff; border:1px solid var(--line); border-radius:18px; padding:22px 24px; box-shadow:0 6px 18px rgba(20,18,16,.05);}   /* 쇼퍼 .card와 동일 */
  .rq-two .rq-sec .req-summary-in, .rq-solo .rq-sec .req-summary-in{background:transparent; border:none; padding:0; box-shadow:none;}
  /* 초반/종료 상태 오른쪽 패널 요소 */
  .bids-overlay .rq-guide{font-size:13.5px; color:var(--ink-soft); line-height:1.65; margin:0 0 12px;}
  .bids-overlay .rq-steps{display:flex; gap:6px; margin:2px 0 12px;}
  .bids-overlay .rq-steps i{flex:1; height:4px; border-radius:4px; background:var(--line2);}
  .bids-overlay .rq-steps i.on{background:var(--green);}
  .bids-overlay .rq-mini{display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--line);}
  .bids-overlay .rq-mini:last-of-type{border-bottom:none;}
  .bids-overlay .rq-mini img{width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; background:var(--soft);}
  .bids-overlay .rq-mini .mtx{flex:1; min-width:0;} .bids-overlay .rq-mini .mtx b{font-size:13.5px; font-weight:800; display:block;} .bids-overlay .rq-mini .mtx span{font-size:12px; color:var(--sub);}
  .bids-overlay .rq-mini .mpr{font-size:13.5px; font-weight:800; color:var(--green); white-space:nowrap;}
  @media(max-width:820px){ .rq-two{grid-template-columns:1fr;} .rq-two .rq-col-l{position:static;} }
  /* 진행 상태 — 컬러 배너 (보낸 요청 상세) */
  .statban{display:flex; align-items:center; gap:14px; padding:15px 17px; border-radius:14px; margin-bottom:4px;}
  .statban .sb-ic{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none;}
  .statban .sb-ic svg{width:22px; height:22px;}
  .statban .sb-tx b{display:block; font-size:17px; font-weight:800; letter-spacing:-.02em;}
  .statban .sb-tx p{font-size:13px; margin-top:3px; line-height:1.5;}
  .statban.go{background:var(--green-soft);} .statban.go .sb-ic{background:var(--green); color:#fff;} .statban.go .sb-tx b{color:var(--green);} .statban.go .sb-tx p{color:var(--green-mid);}
  .statban.wait{background:var(--soft);} .statban.wait .sb-ic{background:var(--sub); color:#fff;} .statban.wait .sb-tx b{color:var(--ink);} .statban.wait .sb-tx p{color:var(--sub);}
  .statban.no{background:var(--warn-soft);} .statban.no .sb-ic{background:var(--warn); color:#fff;} .statban.no .sb-tx b{color:var(--warn);} .statban.no .sb-tx p{color:var(--warn);}
  /* 매칭 완료 배너 (지난 견적·진행 상태) — 연한 톤 + 체크 아이콘 + 글자만 (안 튀게) */
  .matchban{display:flex; align-items:center; gap:13px; padding:15px 17px; border-radius:14px; background:var(--green-soft);}
  .matchban .mb-ck{flex:none; width:34px; height:34px; border-radius:10px; background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center;}
  .matchban .mb-ck svg{width:19px; height:19px;}
  .matchban .mb-tx{flex:1; min-width:0;}
  .matchban .mb-tx b{display:block; font-size:16px; font-weight:800; color:var(--green); letter-spacing:-.02em;}
  .matchban .mb-tx span{display:block; font-size:13px; color:var(--green-mid); margin-top:3px; line-height:1.5;}
  /* 상세 액션 버튼 행 (배너 아래) */
  .rq-actions{margin-top:16px;}
  .rq-btns{display:flex; gap:9px; flex-wrap:wrap;}
  /* 확정 약속 컴팩트 칩 — 쇼퍼(.apt-done)와 동일 패턴(고객은 변경 버튼 없음) */
  .apt-done{display:flex; align-items:center; gap:11px; background:var(--green-soft); border-radius:12px; padding:11px 13px;}
  .apt-ic{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:#fff; color:var(--green);}
  .apt-ic svg{width:15px; height:15px;}
  .apt-tx{flex:1; min-width:0;}
  .apt-tx b{display:block; font-size:14px; font-weight:800; color:var(--ink); letter-spacing:-.02em;}
  .apt-tx span{font-size:11.5px; font-weight:700; color:var(--green-mid);}
  /* 약속 잡는 중 — 아직 미확정(점선·무채색). 확정(.apt-done 초록)과 구분 */
  .appt-pending{display:flex; align-items:center; gap:11px; background:#f5f5f3; border:1px dashed var(--line2); border-radius:12px; padding:11px 13px;}
  .appt-pending .apt-ic{color:var(--sub2);}
  .appt-pending .apt-tx span{color:var(--sub2);}
  /* 결제 금액 한 줄 — 쇼퍼(.pay-amt)와 동일 */
  .pay-amt{display:flex; justify-content:space-between; align-items:center; font-size:15px; padding:2px 0 4px;}
  .pay-amt span{color:var(--sub); font-weight:600;}
  .pay-amt b{font-weight:800; color:var(--green);}
  /* 스타일리스트 — 요청 내용과 같은 soft 패널 안 아바타 헤더행 */
  .rs-shopper{display:flex; align-items:center; gap:12px; padding:13px 0;}
  .rs-shopper .av{width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; background:#fff;}
  .rs-shopper .who{flex:1; min-width:0;}
  .rs-shopper .nm{font-size:16px; font-weight:800;}
  .rs-shopper .mt{font-size:13px; color:var(--sub); margin-top:3px;}
  .rs-shopper .prof{background:#fff; color:var(--ink); border:1.5px solid var(--line2); font-weight:800; padding:8px 12px; border-radius:10px; font-size:13px; cursor:pointer; font-family:inherit; white-space:nowrap;}
  /* #my 라이프사이클 스타일을 오버레이에서도 재사용 */
  .bids-overlay .reqact{padding:14px 16px; background:var(--soft); border-radius:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:14px; color:var(--sub);}
  .bids-overlay .reqact .muted{color:var(--sub2);}
  .bids-overlay .offerbox{flex:1; min-width:200px; color:var(--ink-soft);} .bids-overlay .offerbox b{color:var(--green);} .bids-overlay .offerbox .num{font-family:var(--num); font-weight:800;}
  .bids-overlay .offerbox .omsg{font-size:13px; color:var(--sub); margin-top:4px;}
  .bids-overlay .obtns{display:flex; gap:8px; margin-left:auto;}
  .bids-overlay .revshow{color:var(--ink-soft);} .bids-overlay .revshow .starsRO{letter-spacing:1px;} .bids-overlay .revshow .rtx{margin-left:6px;}
  .bids-overlay .reviewform{width:100%;} .bids-overlay .reviewform .stars{display:flex; gap:8px; cursor:pointer;}
  .bids-overlay .reviewform .stars span{line-height:0; color:var(--line2); transition:color .12s;}
  .bids-overlay .reviewform .stars span.on{color:#e8a13a;}
  .bids-overlay .reviewform .stars .cutestar{width:30px; height:30px;}
  .bids-overlay .reviewform .rtext{width:100%; margin-top:10px; padding:11px 13px; border:1.5px solid var(--line2); border-radius:10px; font-family:inherit; font-size:14px; resize:vertical; min-height:64px; background:#fff;}
  .bids-overlay .reviewform .rtext:focus{outline:none; border-color:var(--green);}
  .bids-overlay .reviewform .rbtns{display:flex; gap:8px; justify-content:flex-end; margin-top:10px;}
  .bids-overlay .st{font-size:13px; font-weight:800; padding:5px 11px; border-radius:20px;}
  .bids-overlay .st.wait{background:var(--soft); color:var(--sub);} .bids-overlay .st.prog{background:var(--green-soft); color:var(--green);} .bids-overlay .st.done{background:var(--soft); color:var(--ink);} .bids-overlay .st.offer{background:var(--green); color:#fff;} .bids-overlay .st.cancel{background:var(--warn-soft); color:var(--warn);} .bids-overlay .st.warn{background:var(--warn); color:#fff;}
  @media(max-width:560px){ .bids-inner{padding:24px 18px 70px;} .qcard{flex-direction:column; gap:14px;} .qcard .q-r{flex-direction:row; width:100%;} }

  /* ═══ 보낸 요청 상세 타임라인 작업대 (쇼퍼 pro-quote와 동일 언어) ═══
     지난 단계=접힌 영수증(펼침) · 현재=주연 카드 · 미래=흐림. 색은 '현재 단계' 하나만 초록. */
  .tl{position:relative}
  .tl-step{position:relative;padding-left:38px;padding-bottom:12px}
  .tl-step::before{content:"";position:absolute;left:13px;top:35px;bottom:-2px;width:2px;background:var(--line2)}
  .tl-step.future::before{background:var(--line)}
  .tl-step.last::before{display:none}
  .tl-node{position:absolute;left:2px;top:10px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:800;z-index:2}
  .tl-step.done .tl-node{background:var(--sub2);color:#fff}
  .tl-step.now .tl-node{background:var(--green);color:#fff;border:2px solid var(--green);box-shadow:0 0 0 4px var(--green-soft)}
  .tl-step.exc .tl-node{background:var(--warn);color:#fff}
  .tl-step.future .tl-node{background:var(--soft);color:var(--sub2);border:2px solid var(--line2)}
  .tl-node svg{width:12px;height:12px}
  /* 접힌 영수증 */
  .rcpt{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:box-shadow .16s,border-color .16s}
  .rcpt.fut{background:transparent;border-style:dashed}
  .rcpt-head{display:flex;align-items:center;gap:10px;padding:12px 15px;cursor:pointer;user-select:none}
  .rcpt-head:hover{background:#FBFBFA}
  .rcpt.fut .rcpt-head:hover{background:transparent}
  .rcpt-lb{font-size:14px;font-weight:800;color:var(--sub);letter-spacing:.02em;flex:none;min-width:32px;padding-right:12px;border-right:1px solid var(--line)}
  .rcpt.fut .rcpt-lb{border-right-color:var(--line)}
  .rcpt-sum{font-size:15px;font-weight:700;color:var(--ink-soft);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rcpt-sum.dim{color:var(--sub2)}
  .rcpt-sum .money{color:var(--ink);font-weight:800}
  .rcpt-chev{color:var(--sub2);font-size:11px;transition:transform .18s;flex:none}
  .rcpt.open .rcpt-chev{transform:rotate(180deg)}
  .rcpt.open{box-shadow:0 8px 22px rgba(20,18,16,.07);border-color:var(--line2)}
  .rcpt-body{max-height:0;overflow:hidden;transition:max-height .28s ease}
  .rcpt.open .rcpt-body{max-height:1600px}
  .rcpt-inner{padding:2px 15px 15px}
  /* 현재 단계 주연 카드 */
  .now-card{background:#fff;border:1.5px solid var(--green);border-radius:16px;box-shadow:0 14px 34px rgba(46,74,59,.13);overflow:hidden}
  .now-top{display:flex;align-items:center;gap:9px;padding:14px 18px 3px;background:var(--green-soft)}
  .now-top .dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
  .now-top b{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--green)}
  .now-top .badge{margin-left:auto;font-size:11.5px;font-weight:800;color:#fff;background:var(--green);padding:5px 11px;border-radius:20px}
  .now-hint{font-size:14px;font-weight:500;color:var(--green-mid);padding:1px 18px 13px;line-height:1.55;background:var(--green-soft);border-bottom:1px solid var(--green-line);white-space:pre-line}
  .now-body{padding:16px 18px 18px}
  .now-card.warn{border-color:var(--warn)}
  .now-card.warn .now-top{background:var(--warn-soft)}
  .now-card.warn .now-top .dot{background:var(--warn)}
  .now-card.warn .now-top b{color:var(--warn)}
  .now-card.warn .now-top .badge{background:var(--warn);color:#fff}
  .now-card.warn .now-hint{background:var(--warn-soft);color:var(--warn);border-bottom-color:#EAD6CF}
  /* 타임라인 안에서는 내부 섹션 여백 정리(now-body가 이미 패딩을 줌) */
  .now-body .rq-sec:first-child{margin-top:0}
  .rcpt-inner .rq-sec:first-child{margin-top:0}

  /* 요청 요약 카드(요청 단계 펼침) — 서비스 유형=아이콘 헤더 / 나머지=줄글 rows / 체형=칩. 쇼퍼와 동일(.rqc-*) */
  .rqc-head{display:flex;align-items:center;gap:11px;padding:2px 0 12px;margin-bottom:4px;border-bottom:1px solid var(--line)}
  .rqc-ic{flex:none;width:38px;height:38px;border-radius:11px;background:var(--green-soft);color:var(--green);display:flex;align-items:center;justify-content:center}
  .rqc-ic svg{width:21px;height:21px}
  .rqc-head b{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
  .rqc-row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
  .rqc-row:last-of-type{border-bottom:none}
  .rqc-row span{color:var(--sub);font-weight:600;flex:none}
  .rqc-row b{color:var(--ink);font-weight:700;text-align:right}
  .rqc-chip{display:inline-flex;align-items:center;gap:7px;margin-top:13px;font-size:13px;font-weight:700;color:var(--green);background:var(--green-soft);padding:9px 13px;border-radius:11px}
  .rqc-chip svg{width:15px;height:15px;flex:none}
  .rqc-chip.off{color:var(--sub);background:var(--soft)}

  /* ═══ 스타일리스트와의 대화 드로어 (쇼퍼 pro-quote와 동일) ═══ */
  .chat-open{position:relative;flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;background:#fff;border:1.5px solid var(--green-line);border-radius:12px;color:var(--green);font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
  .chat-open:hover{background:var(--green-soft)}
  .chat-open svg{width:17px;height:17px}
  .chat-open .co-dot{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--warn);border:2px solid var(--bg)}
  .cd-scrim{position:fixed;inset:0;background:rgba(20,18,16,.34);opacity:0;pointer-events:none;transition:opacity .2s;z-index:120}
  .cd-scrim.on{opacity:1;pointer-events:auto}
  .chatdrawer{position:fixed;top:0;right:0;bottom:0;width:min(468px,94vw);background:#fff;z-index:121;box-shadow:-16px 0 44px rgba(0,0,0,.16);transform:translateX(100%);transition:transform .24s ease;display:flex;flex-direction:column}
  .chatdrawer.open{transform:none}
  .chatdrawer .cd-head{display:flex;align-items:center;gap:8px;padding:15px 18px;border-bottom:1px solid var(--line)}
  .chatdrawer .cd-ti{display:flex;flex-direction:column;min-width:0;flex:1}
  .chatdrawer .cd-eye{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sub2)}
  .chatdrawer .cd-ti b{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
  .chatdrawer .cd-x{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;padding:0;background:var(--soft);color:var(--sub);font-size:15px}
  .chatdrawer .cd-x:hover{background:var(--line2)}
  /* 신고·환불 = 헤더 작은 깃발(자주 안 쓰니 눈에 안 띄게). 분쟁 접수됐으면 경고색 채움 — 쇼퍼(.cd-flag)와 동일 */
  .chatdrawer .cd-flag{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;padding:0;background:var(--warn-soft);color:var(--warn)}
  .chatdrawer .cd-flag svg{width:15px;height:15px}
  .chatdrawer .cd-flag:hover{background:#F0DBD4}
  .chatdrawer .cd-flag.on{background:var(--warn);color:#fff}
  .chatdrawer .pm-thread{flex:1;display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding:16px 18px}
  .chatdrawer .pm-row{display:flex} .chatdrawer .pm-row.me{justify-content:flex-end}
  .chatdrawer .pm-b{max-width:84%;padding:11px 15px;border-radius:14px;font-size:15.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
  .chatdrawer .pm-row.cust .pm-b{background:var(--soft);color:var(--ink-soft);border-bottom-left-radius:4px}
  .chatdrawer .pm-row.me .pm-b{background:#2E2A24;color:#fff;border-bottom-right-radius:4px}
  /* 시스템 알림 메시지(상태 변화) — 가운데 초록 알약. 중요(약속 등)는 검정 강조 */
  .chatdrawer .pm-sys{align-self:center; text-align:center; font-size:12.5px; font-weight:700; color:var(--green); background:var(--green-soft); border-radius:20px; padding:6px 14px; margin:6px 0; max-width:90%;}
  .chatdrawer .pm-row + .pm-sys{margin-top:12px}
  .chatdrawer .pm-sys + .pm-row{margin-top:12px}
  .chatdrawer .pm-sys.key{color:#fff; background:var(--ink);}
  .chatdrawer .pm-compose{display:flex;align-items:center;gap:9px;padding:12px 18px 14px;border-top:1px solid var(--line)}
  .chatdrawer .pm-compose input{flex:1;font-size:15.5px;padding:12px 16px;border:1.5px solid var(--line2);border-radius:22px;font-family:inherit}
  .chatdrawer .pm-compose input:focus{outline:none;border-color:var(--green)}
  .chatdrawer .pm-send{flex:none;width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;border:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
  .chatdrawer .pm-send svg{width:18px;height:18px}
  .chatdrawer .pm-send:hover{background:#233b2f}
  @media(prefers-reduced-motion:reduce){.chatdrawer{transition:none}}


  /* 진단 결과 상단 유형 배지 — 카드는 프로필에 있고 여기선 맥락 한 줄 */
  #my .dtl-badge{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:13px 16px;}
  #my .dtl-badge:empty{display:none;}
  #my .dtl-badge .c{font-size:17px; font-weight:850; color:var(--green); letter-spacing:-.02em;}
  #my .dtl-badge .n{font-size:14.5px; color:var(--sub); flex:1; min-width:0;}
  #my .dtl-badge .go{font-size:13px; font-weight:800; color:var(--green); background:var(--green-soft);
    border-radius:20px; padding:6px 13px; cursor:pointer; white-space:nowrap;}
  #my .dtl-badge .go:hover{background:var(--green-line, var(--green-soft));}

  /* 프로필로 옮긴 체형 카드 자리 */
  #my .profcard{display:flex; flex-direction:column; align-items:center; gap:16px;
    background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px;}
  #my .profcard .cardframe{width:100%; max-width:380px; height:var(--mycard-h); border:0; border-radius:20px;
    box-shadow:0 14px 36px rgba(20,22,28,.12); display:block;}
  #my .profcard .dtl-id{text-align:center;}
  #my .profcard .profshare{max-width:380px;}

  /* ===== 모바일 셸(A안) — 하단 탭바 + 상단바 축약. 641px↑는 기존 데스크톱 그대로 ===== */
  .tabbar{ display:none; }
  :root{ --mycard-h:684px; }
  @media(max-width:640px){
    /* 상단: 탭바와 중복되는 메뉴 제거 → 로고 + 알림벨만 */
    .nav{ gap:0; height:56px; }
    .nav .menu{ display:none; }
    .navr{ gap:10px; }
    .navr .sup, .navr .navdiv, .navr .navname, .navr .navauth{ display:none; }

    /* 하단 탭바 */
    .tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:80;
      height:calc(56px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
      background:rgba(255,255,255,.94); backdrop-filter:blur(14px); border-top:1px solid var(--line); }
    .tabbar .tb{ flex:1; min-height:44px; display:flex; flex-direction:column; align-items:center;
      justify-content:center; gap:3px; color:var(--sub); text-decoration:none;
      font-size:10.5px; font-weight:700; cursor:pointer; }
    .tabbar .tb svg{ width:23px; height:23px; }
    .tabbar .tb.on{ color:var(--green); }
    .tabbar .tb:active{ transform:scale(.96); }

    /* 중앙 FAB(진단) */
    .tabbar .tb.fab{ color:var(--green); }
    .tabbar .tb.fab .bump{ width:46px; height:46px; margin-top:-20px; border-radius:50%;
      background:var(--green); color:#fff; display:flex; align-items:center; justify-content:center;
      box-shadow:0 6px 16px rgba(46,74,59,.34); border:3px solid var(--bg); }
    .tabbar .tb.fab .bump svg{ width:26px; height:26px; }


    /* ── 마이(①안): 섹션 메뉴는 상단 가로 탭 · 내용은 인사이트 먼저 ──
       하단 탭바가 화면 아래를 쓰므로 마이 안쪽 내비는 위에 둔다(세로 목록을 아래 두면 내비가 이중).
       체형 카드는 재미·공유 요소 → 추천/핏 인사이트를 앞에, 카드는 뒤로.
       카드 높이는 --mycard-h로 분리(카드 리뉴얼 시 이 값만 교체). */
    #my .mwrap{ display:flex; flex-direction:column; gap:14px; min-width:0; }
    /* flex 아이템은 기본 min-width:auto라 자식(칩)의 min-content보다 안 좁아짐 →
       min-width:0을 줘야 .smenu의 overflow-x:auto가 작동(안 그러면 페이지 전체가 가로로 밀림) */
    #my .side{ order:1; min-width:0; max-width:100%; }
    #my .mwrap > main{ order:2; min-width:0; }
    /* 세로 사이드 메뉴 → 가로 스크롤 탭 칩 */
    #my .smenu{ flex-direction:row; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; max-width:100%; }
    #my .smenu::-webkit-scrollbar{ display:none; }
    #my .smenu a{ flex:none; white-space:nowrap; min-height:44px; padding:10px 14px;
      border:1.5px solid var(--line); border-radius:22px; background:var(--surface); font-size:13.5px; }
    #my .smenu a .i{ display:none; }   /* 가로 칩에선 아이콘 생략해 폭 절약 */
    #my .smenu a.on{ background:var(--green); color:#fff; border-color:var(--green); font-weight:800; }
    /* 진단 결과 패널: 추천·핏 인사이트 → 그다음 체형 카드(공유) */
    #my .dtl-A{ gap:16px; }   /* 모바일: 820px에서 이미 1단 — 간격만 축소 */
    #my .profcard{ padding:16px; }

    /* ── 마이 패널 공통 — 390px 가로 넘침 방지 ──
       가용폭: 390 − .wrap 패딩(30×2) − .mcard 패딩(24×2) = 282px 뿐이었음.
       여백을 되찾고, 키-값 행(.field)이 긴 값에서 줄바꿈되게 한다. */
    .wrap{ padding:0 18px; }
    #my .mpanel{ min-width:0; }
    #my .mcard{ padding:4px 16px; }
    /* 키-값 행: 값이 길면 아래 줄로(전엔 space-between + nowrap이라 넘침) */
    #my .field{ flex-wrap:wrap; gap:2px 12px; align-items:baseline; }
    #my .field .v{ min-width:0; margin-left:auto; text-align:right; overflow-wrap:anywhere; }
    /* 이메일·URL 등 긴 토큰 강제 줄바꿈 */
    #my .links a{ gap:10px; overflow-wrap:anywhere; }
    #my .links a .arr{ flex:none; }
    #my .offerbox{ min-width:0; }
    #my .reqrow{ padding:16px 2px; }
    #my .sup-submit .note{ min-width:0; }

    /* ── 요청 내역(.ureq) — 아이콘·간격 축소 + 제목 줄바꿈(잘림 대신) ── */
    #my .ureq{ gap:10px; padding:14px 2px; }
    #my .ureq-ic{ width:34px; height:34px; border-radius:9px; }
    #my .ureq-ic svg{ width:17px; height:17px; }
    #my .ureq-title{ white-space:normal; font-size:15px; }
    #my .ureq-r{ gap:6px; }
    #my .ureq-r .cnt{ font-size:13px; }

    /* ── 알림/설정 토글 행 — 라벨은 줄어들고 스위치는 고정 ── */
    #my .field > span:first-child{ flex:1 1 auto; min-width:0; }
    #my .field .toggle, #my .field .switch{ flex:none; }

    /* ── 고객센터 — 위험 액션(거래 문제 신고)은 시각적으로 분리 ── */
    #my .links a.danger{ margin-top:10px; }
    /* ── 개인정보 액션 행 — 좁은 폭에선 설명이 한 줄을 다 쓰고 버튼은 아랫줄 우측 ── */
    #my .actx{ min-width:0; flex-basis:100%; }
    #my .actrow .tinybtn{ margin-left:auto; }

    /* ══ 홈(#home) 모바일 ══
       원인: @media(820px)가 .steps를 1fr 1fr(2단)로 두는데 390px에선 칸이 ~100px밖에 안 남아
             STEP 카드 글자가 한 자씩 쪼개짐. .how의 세로 줄자(70px+gap40)가 폭을 더 먹음. */
    #home .how{ grid-template-columns:1fr; gap:20px; margin-top:32px; }
    #home .vtape{ display:none; }              /* 장식용 세로 줄자 — 모바일에선 폭만 차지 */
    .steps{ grid-template-columns:1fr; }       /* 2단 → 1단 (핵심 수정) */
    #home .step{ grid-template-columns:auto 1fr; gap:14px; padding:20px 18px; border-radius:16px; }
    #home .step h3{ font-size:17px; }
    #home .step p{ font-size:13.5px; }
    /* 지표(3분·8체형·0회)는 전체폭 아랫줄 → 왼쪽 대신 오른쪽 정렬 */
    #home .step .big{ justify-self:end; }

    /* 상황 칩(소개팅·면접·발표·…) — 2줄로 감기던 걸 한 줄로. 폭 부족 시 글자만 축소 */
    #home .occtokens{ flex-wrap:nowrap; gap:5px; margin-top:20px; }
    #home .occtokens .oc{ font-size:11.5px; padding:7px 8px; white-space:nowrap; flex:0 0 auto; }

    /* 히어로 CTA — 나란히 두면 버튼 폭이 좁아 글자가 깨짐 → 세로 전체폭 */
    #home .cta{ flex-direction:column; gap:10px; margin-top:28px; }
    #home .cta .btn{ width:100%; padding:15px 18px; }

    /* 8유형 칩 — 4열 유지하되 여백·글자 축소 */
    #home .types{ gap:7px; margin-top:18px; }
    #home .types .ty{ padding:9px 4px; font-size:12.5px; letter-spacing:.06em; }

    /* 푸터 — 링크가 좁게 쪼개지지 않게 */
    .site-foot .in{ padding:24px 18px 34px; gap:10px 16px; }
    .site-foot .flinks{ gap:12px 16px; flex-wrap:wrap; }

    /* 결과카드 쇼케이스 — .showpanel 좌우 52px + .cardprev 340px 고정이라 390px에서 ~100px 튀어나옴.
       패널 여백을 줄이고 카드를 유동(min())으로. 내부 iframe(392px)은 스케일 고정 + overflow:hidden 크롭. */
    #home .showpanel{ padding:24px 16px; border-radius:20px; }
    #home .showcard{ justify-self:stretch; display:flex; justify-content:center; }
    #home .showcard .cardprev{ width:min(288px,100%); height:488px; border-radius:22px; }
    #home .showcard .cardprev .cf{ transform:scale(.735); }   /* 288/392 */
    #home .showcard .lock{ padding:20px; gap:10px; }
    #home .showcard .lock b{ font-size:18px; }
    #home .showcard .lock p{ font-size:13px; }
    /* 프로모 배너도 좌우 52px → 축소 */
    #home .promo{ padding:26px 20px; border-radius:20px; gap:16px; }
    /* 하단 CTA 버튼: 위 '#home .cta{flex-direction:column}'(히어로용)이 클래스 충돌로
       promo 버튼에도 걸려 텍스트·화살표가 세로로 쌓이고 박스가 커짐 → row로 되돌리고 축소 */
    #home .promo .cta{ flex-direction:row; margin-top:0; gap:7px; padding:0 20px; min-height:48px; font-size:15px; border-radius:22px; }
    /* .sub도 .cta와 글씨·박스 크기 동일하게(모바일) */
    #home .promo .sub{ font-size:15px; padding:0 20px; min-height:48px; border-radius:22px; }
    #home .promo .act{ gap:9px; margin-top:0; }   /* 데스크톱 2단용 -38px가 모바일 1단에서 버튼을 위 문단에 겹치게 함 → 해제 */

    /* ══ 스타일리스트 찾기(#shop) 모바일 ══
       .grid도 홈 .steps와 같은 원인(820에서 2단 유지) → 1단 + 카드를 가로형으로. */
    /* 1) 목록 — 1단 + 가로형 카드 */
    .grid{ grid-template-columns:1fr; gap:12px; }
    .ecard{ display:flex; align-items:stretch; border-radius:14px; }
    .ecard:hover{ transform:none; box-shadow:0 6px 18px rgba(20,18,16,.08); }
    .ecard .cover{ width:108px; height:auto; min-height:116px; flex:none; }
    .ecard .match{ top:8px; left:8px; font-size:11px; padding:3px 8px; }
    .ecard .eb{ flex:1; min-width:0; padding:11px 12px; }
    .ecard .nm{ font-size:15px; }
    .ecard .spec{ font-size:12.5px; margin:4px 0 7px; }
    .ecard .subtags{ font-size:12px; margin:6px 0 8px; min-height:0; }
    .ecard .tags{ gap:5px; margin-bottom:8px; }
    .ecard .tags span{ font-size:11.5px; padding:3px 7px; margin:0; }
    .ecard .cardprice{ font-size:13px; }

    /* 1-b) 목록 부제 — 긴 문장이 3줄로 어색하게 끊겨 모바일용 축약본으로 교체 */
    .shoplead .wide-only{ display:none; }
    .shoplead .narrow-only{ display:inline; }

    /* 2) 필터바 — 줄바꿈 허용. 가로 스크롤이면 검색·정렬이 화면 밖에 숨어 발견이 안 됨 */
    .fbar{ flex-wrap:wrap; gap:7px; padding-bottom:2px; }
    .fbar > *{ flex:none; }
    /* 검색 + 찾기를 한 줄에, 정렬은 그 아래 한 줄 전체 */
    .search{ min-width:0; flex:1 1 auto; max-width:none; order:1; }
    .fbar .btn.sm{ order:2; flex:0 0 auto; padding:11px 18px; }
    .sort{ order:3; margin-left:0; flex:1 1 100%; }
    .sort select{ width:100%; }
    .ddbtn, .favfilter{ padding:10px 12px; font-size:13.5px; min-height:44px; }
    .ddmenu{ min-width:0; width:max-content; max-width:calc(100vw - 48px); }
    .reqbanner{ padding:16px; gap:10px; margin:18px 0; }

    /* 3) 상세 — 히어로 축소 + 액션 하단 고정
       ※ 하단 탭바(56px+safe)가 bottom:0을 이미 쓰므로 그만큼 띄운다. */
    .dhero-img{ height:180px; }
    .dhero-acts{ position:sticky; bottom:calc(56px + env(safe-area-inset-bottom)); z-index:30;
      margin:16px -18px 0; padding:12px 18px;
      background:linear-gradient(180deg, rgba(246,246,245,0), var(--bg) 26%); }

    /* 4) 견적 요청 — 요약(사이드)을 위로 축약 */
    .reqside{ order:-1; }
    .reqside-img{ height:96px; }

    /* 5) 제공 서비스 타일 — 세로 중앙정렬 카드(아이콘↑이름↑모드↑가격)라 세로로만 길어짐.
       DOM(아이콘·이름·모드·가격 4형제) 변경 없이 grid-area로 가로형 행으로 재배치. */
    .svctiles{ flex-direction:column; gap:8px; }
    .svctile{ flex:1 1 auto; max-width:none; display:grid; text-align:left;
      grid-template-columns:auto 1fr auto;
      grid-template-areas:"ic nm pr" "ic mode pr";
      align-items:center; gap:2px 12px; padding:12px 14px; border-radius:12px; }
    .svctile .svct-ic{ grid-area:ic; width:38px; height:38px; margin-bottom:0; border-radius:10px; }
    .svctile .svct-ic svg{ width:19px; height:19px; }
    .svctile .svct-nm{ grid-area:nm; font-size:15px; white-space:normal; align-self:end; }
    .svctile .svct-mode{ grid-area:mode; font-size:12.5px; margin-top:0; align-self:start; }
    .svctile .svct-pr{ grid-area:pr; font-size:15px; margin-top:0; padding-top:0; white-space:nowrap; }

    /* 콘텐츠가 탭바에 가리지 않게 + 가로 넘침 가드(index는 fitting.css를 안 써서 여기 둔다) */
    body{ padding-bottom:calc(66px + env(safe-area-inset-bottom)); overflow-x:clip; }

    /* 터치 타깃·눌림 피드백·입력 확대 방지 (fitting.css와 동일 규칙 — index는 fitting.css를 안 씀) */
    .opt, .chip, .btn, .btn-primary, .btn-line, .btn-ghost, .cb, .svc{ min-height:44px; }
    .opt:active, .chip:active, .btn:active,
    .btn-primary:active, .btn-line:active, .btn-ghost:active{ transform:scale(.97); }
    input, select, textarea{ font-size:16px; }
  }
  @media(max-width:640px) and (prefers-reduced-motion:reduce){
    .opt:active, .chip:active, .btn:active,
    .btn-primary:active, .btn-line:active, .btn-ghost:active{ transform:none; }
  }