/* =====================================================================
   260814_cafe777_duotone · duotone.css
   뷰티파마시 단독몰(bpmall-cafe777-frontend) 재렌더 — 정적 프론트엔드
   근거: docs/plan/260814_cafe24-design02 (01 추출 · 02 위젯 14종 · 03 몬드리안)
   규율: POP SYSTEM v1.0 — 타일 화이트 #F5F5F3 75% · 글로우 블루 #5BC8E4 15%(포인트)
        · 그리드 블랙 #26282A 10%(괘선·텍스트) · Marcellus + Noto Sans KR
   금지: 그린 / 레드·옐로 대면적 / 블루 대면적 / 블루 두 위계 / 라운드 / 그림자 남용
        / 사진·그리드 위 직접 타이핑(텍스트는 명판 안에)
   ===================================================================== */

/* ---------- 1. 토큰 · 베이스 ---------- */
:root{
  --tile:#F5F5F3; --blue:#5BC8E4; --blue-deep:#2A7A94; --blue-text:#12566E;
  --wash:#E9F6FA; --soft:#BFE9F4;
  --ink:#26282A; --paper:#FFFFFF; --line:#DEDEDA; --grout:rgba(38,40,42,.13);
  --m6:#5A5D60; --m9:#8E9194; --red:#B3261E;
  --b06:rgba(38,40,42,.06); --b10:rgba(38,40,42,.10); --b14:rgba(38,40,42,.14);
  --disp:'Marcellus',serif;
  --body:'Noto Sans KR','Apple SD Gothic Neo',-apple-system,sans-serif;
  --t-disp:clamp(44px,7vw,92px);
  --ls-cap:.24em; --maxw:1280px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* 260911 W-J5 — 어워드 GOLD 훅(6스킨 공통 이름, 값은 스킨이 정한다 — Awards.css·Ranking.css·GoldStrip.css·AwardsBlock.css·kurly.css 소비).
     --gold=바탕·괘선·배지  --gold-wash=밝은 면 위 칩 바탕  --gold-ink=밝은 면 위 글자(AA)  --gold-hi=어두운 면 위 글자
     --on-gold=--gold 바탕 위 글자  --gold-deep=데코 음영. 듀오톤은 금색 0 — 어워드 강조도 블루 두 위계(--blue-deep/--blue) 안에서. */
  --gold:var(--blue-deep); --gold-wash:var(--wash); --gold-ink:var(--blue-text);
  --gold-hi:var(--blue); --on-gold:var(--paper); --gold-deep:var(--blue-text);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--tile);line-height:1.65;font-size:15px;word-break:keep-all;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.bp{color:var(--blue)}
.tiles{background:
  linear-gradient(var(--grout) 1.5px,transparent 1.5px),
  linear-gradient(90deg,var(--grout) 1.5px,transparent 1.5px),
  var(--tile);
  background-size:68px 68px;background-position:center top}
.plate{background:var(--paper);border:1px solid var(--ink)}
/* 단일 헤딩 시스템 */
.ey{font-size:10.5px;font-weight:500;letter-spacing:var(--ls-cap);text-transform:uppercase;color:var(--m6)}
.sh{font-family:var(--disp);font-weight:400;font-size:clamp(25px,3vw,40px);line-height:1.22;letter-spacing:.01em;margin:10px 0 0}
.sub{color:var(--m6);font-size:14px;margin-top:12px;max-width:600px}
.sec{padding:104px 0}.sec.tight{padding:78px 0}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px;gap:24px;flex-wrap:wrap}
.morelink{font-size:12px;letter-spacing:.12em;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px;font-weight:500;white-space:nowrap}
/* 리빌 */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- 2. 마퀴 (W01) ---------- */
.marquee{background:var(--paper);border-bottom:1px solid var(--ink);overflow:hidden;white-space:nowrap;height:38px;display:flex;align-items:center;position:relative;z-index:70}
.marquee .track{display:inline-flex;gap:34px;padding-left:34px;animation:mq 28s linear infinite}
.marquee span{font-size:11px;letter-spacing:.2em;color:var(--ink);font-weight:500}
.marquee b{color:var(--blue);font-weight:400}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- 3. 헤더 · GNB (W02) ---------- */
.gnb{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.93);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid var(--b10)}
.gnb .row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:70px;max-width:var(--maxw);margin:0 auto;padding:0 40px}
/* 어워드·스토어 대탭은 로고 옆, 활성 문맥의 하위 메뉴는 별도 행에 둔다. */
#header.gnb-context .row{display:flex;flex-wrap:wrap;gap:0 24px;height:auto;min-height:70px}
/* fusion-canon의 모바일 .nav { display:none !important }보다 문맥 대탭을 우선한다. */
#header.gnb-context .nav{display:flex !important;gap:24px;flex-shrink:0}
#header.gnb-context .util{margin-left:auto}
#header.gnb-context .util .ham{display:flex}
#header.gnb-context .subnav{display:flex;gap:28px;max-width:var(--maxw);margin:0 auto;padding:14px 40px;overflow-x:auto;border-top:1px solid var(--line)}
#header.gnb-context .subnav a{flex-shrink:0;font-size:15px;color:var(--ink);white-space:nowrap}
#header.gnb-context .nav-top.on,#header.gnb-context .subnav a.on{color:var(--blue-text);font-weight:700}
@media(max-width:980px){
  #header.gnb-context .row{gap:0 14px;padding:0 22px}
  #header.gnb-context .nav{gap:16px}
  #header.gnb-context .nav .ni>a{padding:18px 0}
  #header.gnb-context .subnav{gap:20px;padding:12px 22px}
}
/* 워드마크 — 테두리·명판·마침표 없는 텍스트 로고 (260816 리파인, 실사이트 정합) */
.logo{justify-self:start;border:0;background:transparent;padding:0;text-align:left;line-height:1}
.logo .lt{font-family:var(--disp);font-size:24px;letter-spacing:.02em;color:var(--blue);white-space:nowrap}
.logo .sb{display:block;font-size:8px;letter-spacing:.3em;color:var(--ink);margin-top:5px;font-weight:500}
.nav{display:flex;gap:26px;justify-self:center}
.nav .ni{position:relative}
.nav .ni>a{display:inline-block;font-size:14px;font-weight:500;opacity:.88;position:relative;padding:24px 0}
.nav .ni>a::after{content:"";position:absolute;left:0;bottom:18px;width:0;height:1.5px;background:var(--ink);transition:width .35s var(--ease)}
.nav .ni:hover>a,.nav .ni>a.on{opacity:1}
.nav .ni:hover>a::after,.nav .ni>a.on::after{width:100%}
.nav .lnb{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);background:var(--paper);border:1px solid var(--ink);min-width:172px;padding:8px 0;opacity:0;visibility:hidden;transition:.25s var(--ease)}
.nav .ni:hover .lnb,.nav .ni:focus-within .lnb{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav .lnb a{display:block;font-size:13px;padding:8px 18px;color:var(--ink)}
.nav .lnb a:hover{background:var(--wash);color:var(--blue-text)}
.util{display:flex;gap:18px;justify-self:end;font-size:12px;font-weight:500;letter-spacing:.1em;align-items:center}
.util a{opacity:.78}.util a:hover{opacity:1}
.util .cartnum{color:var(--blue-deep);font-weight:700}
.util .lang{font-size:11px;border:1px solid var(--b14);padding:3px 8px;color:var(--m6);cursor:default}
.util .ham{display:none;flex-direction:column;gap:4px;padding:6px 2px}
.util .ham i{display:block;width:20px;height:1.5px;background:var(--ink)}
/* 풀스크린 오버레이 */
.gnbov{position:fixed;inset:0;z-index:90;background:var(--tile);display:none;flex-direction:column;overflow-y:auto}
.gnbov.open{display:flex}
.gnbov .top{display:flex;justify-content:space-between;align-items:center;padding:22px 28px;border-bottom:1px solid var(--ink)}
.gnbov .close{font-size:12px;letter-spacing:.16em;font-weight:700;border:1px solid var(--ink);background:var(--paper);padding:8px 16px}
.gnbov .menus{padding:34px 28px;display:flex;flex-direction:column;gap:6px}
.gnbov .menus>a,.gnbov .grp>b{font-family:var(--disp);font-size:clamp(24px,6vw,34px);font-weight:400;display:block;padding:8px 0;border-bottom:1px solid var(--b10)}
.gnbov .grp .subs{display:flex;gap:16px;flex-wrap:wrap;padding:8px 0 14px}
.gnbov .grp .subs a{font-size:13.5px;color:var(--m6);border:1px solid var(--line);background:var(--paper);padding:6px 14px}
.gnbov .foot{margin-top:auto;padding:22px 28px 90px;font-size:12.5px;color:var(--m6);border-top:1px solid var(--ink);line-height:2}
/* 모바일 하단 탭바(.bottom-nav) 규칙은 260825 크롬 통일로 걷어냈다 —
   전 스킨 공용 <BottomNav />(src/mall/layout/BottomNav.css)가 대신한다.
   노출 폭·본문 하단 여백(body{padding-bottom})은 아래 §15 반응형에 그대로 있다. */

/* ---------- 4. 몬드리안 히어로 (W03 × 03스터디) ---------- */
/* 히어로 초점(--hero-focus, 260913 W-L2) — 배너의 어느 지점을 잘리지 않게 둘지.
   React 몰(HeroSection·KurlyHome)은 슬라이드의 focus 값을 <img style="object-position"> 로 직접 싣는다.
   여기 var() 폴백은 ① 그 값이 없을 때의 자리별 기본값(=종전 동작)이고 ② React 가 없는 cafe24 스킨 복사본에서
   같은 토큰 한 칸으로 초점을 줄 수 있게 하는 훅이다. 하드코딩된 좌표는 더 두지 않는다. */
.hero{border-bottom:1px solid var(--ink)}
.hero .mond{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(96px,auto);gap:2px;background:var(--ink)}
.hero .c{background:var(--paper);position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:26px}
.hero .c-type{grid-column:span 3;grid-row:span 3;justify-content:center;gap:18px}
.hero .c-type .en{font-family:var(--disp);font-weight:400;font-size:var(--t-disp);line-height:.98;letter-spacing:.01em;background:var(--tile);border:1px solid var(--b10);padding:8px 16px;align-self:flex-start}
.hero .c-type .cap{background:var(--paper);border:1px solid var(--ink);padding:14px 22px;align-self:flex-start;max-width:520px}
.hero .c-type .cap .l1{font-size:16px;font-weight:700}
.hero .c-type .cap .l2{font-size:12.5px;color:var(--m6);margin-top:4px}
.hero .c-type .cta{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--ink);background:var(--paper);padding:12px 24px;font-size:12.5px;font-weight:700;letter-spacing:.08em;transition:.3s var(--ease);align-self:flex-start}
.hero .c-type .cta:hover{background:var(--ink);color:#fff;gap:16px}
.hero .c-photo{grid-column:span 2;grid-row:span 3;padding:0;background:var(--tile);overflow:hidden}
.hero .c-photo img{width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,50% 50%);transition:opacity .5s var(--ease)}
.hero .c-photo img.contain{object-fit:contain;padding:8%;mix-blend-mode:multiply}
.hero .c-blue{grid-column:span 1;background:var(--blue);justify-content:flex-start;padding:18px}
.hero .c-blue .lb{font-family:var(--disp);font-size:15px;letter-spacing:.06em;color:var(--ink)}
.hero .c-seal{grid-column:span 1;align-items:center;justify-content:center;background:var(--tile)}
.seal{width:86px;height:86px;border-radius:50%;border:1px solid var(--ink);display:flex;align-items:center;justify-content:center;text-align:center;font-size:8px;letter-spacing:.1em;color:var(--ink);background:var(--paper);line-height:1.8;font-weight:500;padding:8px}
.seal b{color:var(--blue-deep);font-family:var(--disp);font-weight:400}
.hero .c-ind{grid-column:span 1;justify-content:center;gap:8px}
.hero .c-ind .dots{display:flex;gap:5px;align-items:center}
.hero .c-ind .dots button{width:24px;height:12px;position:relative}
.hero .c-ind .dots button::after{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:var(--b14);transition:background .3s}
.hero .c-ind .dots button.on::after{background:var(--blue)}
.hero .c-ind .num{font-size:10.5px;letter-spacing:.14em;color:var(--m9)}
.hero .c-ey{grid-column:span 6;flex-direction:row;align-items:center;justify-content:space-between;background:var(--wash);padding:16px 26px;gap:14px;flex-wrap:wrap}
.hero .c-ey .t{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-text);font-weight:700}
.hero .c-ey .d{font-size:11.5px;color:var(--m6)}

/* ---------- 5. 카테고리 레일 ---------- */
.catrail{display:flex;gap:16px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.cat{flex:0 0 clamp(180px,19vw,240px);aspect-ratio:3/4;background:var(--paper);border:1px solid var(--ink);display:flex;flex-direction:column;justify-content:space-between;padding:18px;transition:transform .3s var(--ease)}
.cat:hover{transform:translateY(-4px)}
.cat .no{font-family:var(--disp);font-size:13px;color:var(--blue);letter-spacing:.08em}
.cat .imgbox{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;margin:10px 0}
.cat .imgbox img{max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.cat .en{font-size:10px;letter-spacing:.18em;color:var(--m6);text-transform:uppercase;font-weight:500}
.cat .ko{font-size:14.5px;font-weight:700;margin-top:3px}

/* ---------- 6. 모듈 A — 랭킹 가중 그리드 (W07 × 03스터디) ---------- */
.rankstrip{border-top:1px solid var(--ink);border-bottom:1px solid var(--b10)}
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap}
.cat-tabs button{font-size:12px;letter-spacing:.04em;padding:7px 16px;border:1px solid var(--b14);color:var(--m6);background:var(--paper);transition:.25s}
.cat-tabs button.on,.cat-tabs button:hover{border-color:var(--ink);color:var(--ink);font-weight:700}
/* 카테고리 문맥 행(260911 C-I4) — 행 A(대분류)·행 B(소분류) 캡션과 소분류 행의 들여쓰기. 토큰만(hex 금지). */
.cat-tabs .cat-lbl{align-self:center;font-size:11px;letter-spacing:.08em;color:var(--m6,var(--mute,inherit));margin-right:2px}
.cat-tabs.cat-sub{margin-top:8px;padding-left:12px;border-left:2px solid var(--b14,var(--line,currentColor))}
.cat-tabs button:focus-visible{outline:2px solid var(--ink,currentColor);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.cat-tabs button{transition:none}}
.rankgrid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(128px,auto);gap:2px;background:var(--ink);border:2px solid var(--ink)}
.rk{background:var(--paper);position:relative;display:flex;flex-direction:column;padding:20px;transition:background .3s}
a.rk:hover{background:var(--wash)}
.rk.f{grid-column:span 2;grid-row:span 2}
.rk .no{font-family:var(--disp);font-size:19px;color:var(--blue);letter-spacing:.04em}
.rk .ph{flex:1;display:flex;align-items:center;justify-content:center;min-height:90px;overflow:hidden}
.rk .ph img{max-height:150px;object-fit:contain;mix-blend-mode:multiply}
.rk.f .ph img{max-height:230px}
.rk .cat2{font-size:9.5px;letter-spacing:.16em;color:var(--m6);text-transform:uppercase;font-weight:500}
.rk h4{font-size:15px;font-weight:700;margin:4px 0 2px}
.rk .quote{font-size:12.5px;color:var(--m6);margin:7px 0 8px;line-height:1.55;border-left:2px solid var(--line);padding-left:10px}
.rk .sig{display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;align-items:baseline}
.rk .sig .gd{font-family:var(--disp);font-size:14px}
.rk .sig .gd span{font-size:9.5px;color:var(--m9)}
.rk .sig .st b{letter-spacing:1.5px;font-weight:400}
.rk .sig .st span{color:var(--m9);font-size:10.5px}
.rk .sig .ud{font-weight:700}
.rk.cell-blue{background:var(--blue);justify-content:flex-start}
.rk.cell-blue .lb{font-family:var(--disp);font-size:14px;color:var(--ink);letter-spacing:.06em}
.rk.cell-note{background:var(--wash);justify-content:center;gap:6px}
.rk.cell-note p{font-size:12.5px;color:var(--ink);line-height:1.6}
.rk.cell-note .k{font-size:9.5px;letter-spacing:.2em;color:var(--blue-text);font-weight:700;text-transform:uppercase}
.ranknote{margin-top:24px;font-size:13px;color:var(--m6);display:flex;align-items:center;gap:10px}
.ranknote::before{content:"";width:22px;height:1.5px;background:var(--ink);flex:0 0 auto}

/* ---------- 7. 모듈 D — 평가단 배너 ---------- */
.panelbn{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:62px 0}
.panelbn .in{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.panelbn .say{background:var(--paper);border:1px solid var(--ink);padding:32px 38px}
.panelbn h3{font-family:var(--disp);font-size:clamp(24px,2.8vw,36px);font-weight:400;letter-spacing:.01em}
.panelbn p{color:var(--m6);font-size:14px;margin-top:12px;max-width:520px}
.panelbn .meta{display:flex;gap:16px;margin-top:14px;font-size:11px;color:var(--m9);flex-wrap:wrap;letter-spacing:.04em}
.panelbn .cta-col{justify-self:end;text-align:right}
.panelbn .apply{display:inline-block;background:var(--ink);color:#fff;font-weight:700;font-size:14px;padding:16px 32px;transition:.3s;border:1px solid var(--ink)}
.panelbn .apply:hover{background:var(--paper);color:var(--ink)}
.panelbn .small{display:block;margin-top:12px;font-size:12px;color:var(--m6)}

/* ---------- 8. 상품 그리드 · 행택 카드 (W05·W06 × 인터럽트) ---------- */
.gatebar{display:flex;align-items:center;gap:12px;border:1px solid var(--ink);background:var(--wash);padding:10px 16px;margin-bottom:22px;font-size:12.5px;flex-wrap:wrap}
.gatebar b{color:var(--blue-text)}
.gatebar a{margin-left:auto;font-size:11.5px;font-weight:700;border-bottom:1px solid var(--ink);white-space:nowrap}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--ink);border:2px solid var(--ink)}
.pc{background:var(--paper);display:flex;flex-direction:column;transition:background .3s}
a.pc:hover{background:var(--wash)}
.pc .ph{aspect-ratio:3/4;background:var(--paper);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.pc .ph img{width:100%;height:100%;object-fit:contain;padding:22px;mix-blend-mode:multiply;transition:transform .5s var(--ease)}
.pc:hover .ph img{transform:scale(1.05)}
.pc .bdg{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}
.b-no{font-family:var(--disp);font-size:12px;color:var(--blue);background:var(--paper);border:1px solid var(--line);padding:1px 8px}
.b-ink{font-size:9.5px;letter-spacing:.08em;background:var(--ink);color:#fff;padding:3px 8px;font-weight:500;align-self:flex-start}
.b-line{font-size:9.5px;letter-spacing:.06em;border:1px solid var(--ink);background:var(--paper);padding:2px 8px;font-weight:700;align-self:flex-start}
.b-wash{font-size:10px;border:1px solid var(--line);background:var(--wash);color:var(--blue-text);padding:3px 9px;font-weight:700}
.pc.soldout .ph img{opacity:.35}
.pc .so{position:absolute;left:0;right:0;bottom:0;background:var(--paper);border-top:1px solid var(--line);text-align:center;font-size:10.5px;letter-spacing:.18em;color:var(--m6);padding:6px 0;font-weight:700}
.pc .tag{padding:13px 15px 15px;text-align:left}
.pc .tag .br{font-size:9px;letter-spacing:.18em;color:var(--m9);text-transform:uppercase;font-weight:500}
.pc .tag .nm{font-size:13.5px;font-weight:700;margin-top:3px}
.pc .tag .en{font-size:11px;color:var(--m9);margin-top:1px}
.pc .tag .pr{font-size:15px;font-weight:700;margin-top:7px}
.pc .tag .dc{font-size:12px;color:var(--blue-text);font-weight:700;margin-top:1px}
.pc .tag .rvw{font-size:11px;color:var(--m6);margin-top:6px;border-top:1px dashed var(--line);padding-top:6px}
.pc .tag .rvw b{letter-spacing:1px;font-weight:400}
/* 몬드리안 인터럽트 셀 — 8~12셀당 1회, 비상품 신호 전용 */
.pc.cell-copy{justify-content:center;padding:22px}
.pc.cell-copy .big{font-family:var(--disp);font-size:clamp(17px,1.8vw,23px);line-height:1.3}
.pc.cell-copy .k{font-size:9.5px;letter-spacing:.2em;color:var(--m6);text-transform:uppercase;font-weight:500;margin-bottom:8px}
.pc.cell-blue2{background:var(--paper);justify-content:flex-start;padding:0}
.pc.cell-blue2:hover{background:var(--paper)}
.pc.cell-blue2 .lb{font-family:var(--disp);font-size:clamp(17px,1.8vw,23px);color:var(--ink);letter-spacing:.06em;padding:22px;line-height:1.25}
.pc.cell-blue2::after{content:"";display:block;margin-top:auto;height:34%;background:var(--blue);border-top:1px solid var(--ink)}
.pc.cell-wash{background:var(--wash);justify-content:center;padding:22px;gap:8px}
.pc.cell-wash .k{font-size:9.5px;letter-spacing:.2em;color:var(--blue-text);font-weight:700;text-transform:uppercase}
.pc.cell-wash p{font-size:12.5px;color:var(--ink);line-height:1.6}

/* ---------- 9. 홈 하부 섹션 ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.split .txt{padding:88px 72px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.split .txt .big{font-family:var(--disp);font-size:clamp(34px,4.4vw,58px);line-height:1.04;background:var(--tile);border:1px solid var(--b10);padding:8px 18px;align-self:flex-start}
.split .txt .cap{background:var(--paper);border:1px solid var(--ink);padding:16px 24px;align-self:flex-start}
.split .txt .cap .l1{font-size:15px;font-weight:700}
.split .txt .cap .l2{font-size:13px;color:var(--m6);margin-top:4px}
.split .txt .cap .l2 em{font-style:normal;color:var(--blue-text);font-weight:700}
.split .vis{min-height:460px;overflow:hidden;border-left:1px solid var(--ink)}
.split .vis img{width:100%;height:100%;object-fit:cover}
.numbers{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--ink);border:2px solid var(--ink);margin-top:44px}
.numbers .n{background:var(--paper);padding:26px 22px;text-align:center}
.numbers .n .v{font-family:var(--disp);font-size:clamp(30px,3.6vw,48px);line-height:1}
.numbers .n .v i{font-style:normal;color:var(--blue)}
.numbers .n .k{font-size:11.5px;color:var(--m6);margin-top:8px;letter-spacing:.04em}
.mani{border-top:1px solid var(--ink)}
.mani .eywrap{background:var(--paper);border:1px solid var(--line);padding:6px 12px;display:inline-block;margin-bottom:22px}
.mani .disp{font-family:var(--disp);font-size:clamp(30px,4.6vw,62px);line-height:1.08;background:var(--paper);border:1px solid var(--ink);padding:22px 34px;display:inline-block}
.mani .lede{margin-top:20px;font-size:15px;color:var(--m6);max-width:640px;background:var(--paper);border:1px solid var(--line);padding:12px 18px}
.mani .lede b{color:var(--ink)}
.cards4{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--ink);border:2px solid var(--ink);margin-top:44px}
.cards4 .c{background:var(--paper);padding:24px 24px 26px}
.cards4 .c .k{font-family:var(--disp);font-size:14px;color:var(--blue);letter-spacing:.06em}
.cards4 .c h4{font-size:15.5px;font-weight:700;margin:8px 0 6px}
.cards4 .c p{font-size:12.5px;color:var(--m6);line-height:1.6}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink);border:2px solid var(--ink)}
.g3 .card{background:var(--paper);padding:24px;display:flex;flex-direction:column;gap:8px;transition:background .3s}
.g3 .card:hover{background:var(--wash)}
.g3 .card .tagk{font-size:9.5px;letter-spacing:.2em;color:var(--blue-text);font-weight:700;text-transform:uppercase}
.g3 .card h4{font-size:16px;font-weight:700;line-height:1.45}
.g3 .card .dt{font-size:11.5px;color:var(--m9);margin-top:auto}
.axis3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--ink);border:2px solid var(--ink)}
.axis3 .a{background:var(--paper);padding:28px 26px}
.axis3 .a .k{font-size:10px;letter-spacing:.2em;color:var(--blue-text);font-weight:700;text-transform:uppercase}
.axis3 .a p{font-size:13.5px;color:var(--m6);margin:10px 0 14px;line-height:1.6}
.axis3 .a a{font-size:12px;font-weight:700;border-bottom:1px solid var(--ink);letter-spacing:.06em}
.instagrid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--ink);border:1.5px solid var(--ink)}
.instagrid .f{aspect-ratio:1;background:var(--paper);overflow:hidden;position:relative}
.instagrid .f img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.instagrid .f:hover img{transform:scale(1.06)}
.instagrid .acc{background:var(--wash);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:10px}
.instagrid .acc .h{font-family:var(--disp);font-size:clamp(11px,1.2vw,15px);color:var(--blue-deep)}
.instagrid .acc .fw{font-size:9px;letter-spacing:.14em;color:var(--m6);font-weight:700}
/* CONTACT */
.contact .in{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--ink);border:2px solid var(--ink)}
.contact .lft{background:var(--paper);padding:44px 40px;display:flex;flex-direction:column;gap:16px}
.contact .lft .big{font-family:var(--disp);font-size:clamp(24px,2.8vw,36px);line-height:1.25}
.contact .lft .big em{font-style:normal;color:var(--blue-text)}
.contact .lft p{font-size:13.5px;color:var(--m6);max-width:440px}
.contact .lft .who{font-size:13px;border-top:1px dashed var(--line);padding-top:14px;line-height:1.9}
.contact .lft .who b{color:var(--blue-text)}
.contact form{background:var(--paper);padding:44px 40px;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.contact label,.formx label{font-size:11px;letter-spacing:.08em;color:var(--m6);font-weight:700;display:block;margin-bottom:5px}
.contact input,.contact select,.contact textarea,
.formx input,.formx select,.formx textarea{width:100%;border:1px solid var(--b14);background:var(--tile);padding:10px 12px;font-size:13px;color:var(--ink)}
.contact :focus,.formx :focus{outline:none;border-color:var(--ink);background:var(--paper)}
.formx input[type="checkbox"],.contact input[type="checkbox"]{width:auto;flex:0 0 auto;accent-color:var(--blue-deep)}
.contact .full{grid-column:1/-1}
.contact textarea{min-height:90px;resize:vertical}
.btn-ink{background:var(--ink);color:#fff;font-weight:700;font-size:14px;padding:15px 28px;border:1px solid var(--ink);transition:.3s;display:inline-block;text-align:center}
.btn-ink:hover{background:var(--paper);color:var(--ink)}
.btn-ghost{background:var(--paper);color:var(--ink);font-weight:700;font-size:14px;padding:15px 28px;border:1px solid var(--ink);transition:.3s;display:inline-block;text-align:center}
.btn-ghost:hover{background:var(--ink);color:#fff}
.form-ok{grid-column:1/-1;border:1px solid var(--ink);background:var(--wash);padding:14px 18px;font-size:13.5px;display:none}
.form-ok.show{display:block}

/* ---------- 10. 푸터 (W12) · 백탑 — 다크 그라운드 + 라이트 워드마크 (260816) ---------- */
footer.ft{border-top:2px solid var(--ink);padding:64px 0 46px;background:var(--ink) !important;color:#A9ADB0}
footer.ft.tiles{background-image:none !important}
footer.ft .in{display:flex;flex-direction:column;gap:34px}
footer.ft .top{display:flex;justify-content:space-between;gap:44px;flex-wrap:wrap}
footer.ft .bmark{align-self:flex-start}
footer.ft .bmark .lt{font-family:var(--disp);font-size:clamp(26px,3vw,34px);line-height:1;letter-spacing:.02em;color:var(--tile)}
footer.ft .bmark .sb{display:block;font-size:8.5px;letter-spacing:.32em;margin-top:8px;font-weight:500;color:#8E9194}
footer.ft .blurb{font-size:13px;color:#9FA3A6;max-width:320px;margin-top:16px}
footer.ft .cols{display:flex;gap:52px;flex-wrap:wrap}
footer.ft h5{font-size:10.5px;letter-spacing:.22em;color:#7E8286;text-transform:uppercase;margin-bottom:10px;font-weight:700}
footer.ft li{list-style:none;margin:5px 0;font-size:13px}
footer.ft li a{color:#C9CCCE}
footer.ft li a:hover{color:var(--blue)}
footer.ft .comp{font-size:11.5px;color:#84888B;line-height:1.9;border-top:1px solid rgba(255,255,255,.12);padding-top:20px}
footer.ft .comp b{color:#B9BDBF}
footer.ft .comp a{color:#A9ADB0}
footer.ft .comp a:hover{color:var(--blue)}
footer.ft .word{font-family:var(--disp);font-size:clamp(40px,8vw,110px);line-height:1;color:#fff;opacity:.05;text-align:center;letter-spacing:.04em;margin-top:10px;user-select:none}
.backtop{position:fixed;right:20px;bottom:20px;z-index:50;width:44px;height:44px;background:var(--paper);border:1px solid var(--ink);font-family:var(--disp);font-size:15px;opacity:0;visibility:hidden;transition:.3s}
.backtop.show{opacity:1;visibility:visible}
.backtop:hover{background:var(--ink);color:#fff}

/* ---------- 11. 서브페이지 공통 ---------- */
.pagehead{border-bottom:1px solid var(--ink);padding:52px 0 40px}
.pagehead .crumb{font-size:11px;letter-spacing:.1em;color:var(--m6);margin-bottom:14px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pagehead .crumb a{color:var(--blue-text)}
.pagehead .crumb i{font-style:normal;color:var(--m9)}
.pagehead .crumb-node{display:inline-flex;gap:8px;align-items:baseline;min-width:0;max-width:100%}
.pagehead .crumb-node>a,.pagehead .crumb-node>span,.pagehead .crumb-container{min-width:0;overflow-wrap:anywhere}
.metabar{display:flex;gap:0;border:1px solid var(--ink);background:var(--paper);flex-wrap:wrap;margin-top:22px}
.metabar span{padding:9px 16px;font-size:12px;border-right:1px solid var(--line);color:var(--m6)}
.metabar span b{color:var(--ink)}
.metabar span:last-child{border-right:0}

/* ---------- 12. 랭킹 페이지 (모듈 B · W07) ---------- */
.rrows{border:2px solid var(--ink);background:var(--ink);display:flex;flex-direction:column;gap:1px;margin-top:8px}
.rrow{display:grid;grid-template-columns:64px 90px 1.3fr 1.5fr .65fr 1fr .5fr .6fr;background:var(--paper);font-size:12.5px;transition:background .25s}
.rrow:hover{background:var(--wash)}
.rrow>div{padding:14px;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.rrow>div:last-child{border-right:0}
.rrow .no{font-family:var(--disp);font-size:18px;color:var(--blue)}
.rrow .thumb{padding:6px;align-items:center}
.rrow .thumb img{max-height:64px;object-fit:contain;mix-blend-mode:multiply}
.rrow .catk{font-size:9px;letter-spacing:.14em;color:var(--m6);text-transform:uppercase}
.rrow .nm{font-weight:700;font-size:13.5px}
.rrow .qt{color:var(--m6);font-size:11.5px;line-height:1.5;border-left:2px solid var(--line);padding-left:9px}
.rrow .sc{font-family:var(--disp);font-size:16px}
.rrow .sc span{font-size:10px;color:var(--m9)}
.rrow .glabel{font-size:9px;letter-spacing:.12em;color:var(--m6)}
.rrow .st{font-size:11.5px}
.rrow .st b{letter-spacing:1px;font-weight:400}
.rrow .st span{color:var(--m9);font-size:10px}
.rrow .pend{font-size:11px;color:var(--m9)}
.rrow .ud{font-weight:700}
.rrow .ud small{display:block;font-weight:400;color:var(--m9);font-size:9.5px}
.rrow .go a{color:var(--blue-text);font-weight:700;font-size:11.5px;white-space:nowrap}
.rrow.head{background:var(--paper)}
.rrow.head>div{padding:9px 14px;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--m6);font-weight:700;border-bottom:1.5px solid var(--ink)}
/* 하단 고정 블록 */
.fixedcopy{border:1px solid var(--ink);background:var(--paper);padding:18px 22px;position:relative;margin:16px 0}
.fixedcopy::before{content:"고정 카피 — 임의 수정 금지";position:absolute;top:-9px;left:14px;background:var(--ink);color:#fff;font-size:9.5px;letter-spacing:.14em;padding:2px 8px}
.fixedcopy p{font-size:14px}
.fixedcopy .key{font-size:10px;letter-spacing:.12em;color:var(--blue-text);display:block;margin-top:4px}
.gradeguide{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--ink);border:2px solid var(--ink);margin:16px 0}
.gradeguide .g{background:var(--paper);padding:18px 20px}
.gradeguide .g .k{font-family:var(--disp);font-size:13px;color:var(--blue)}
.gradeguide .g h5{font-size:13.5px;font-weight:700;margin:5px 0 3px}
.gradeguide .g p{font-size:11.5px;color:var(--m6);line-height:1.55}
.dontlist{border:1px solid var(--ink);background:var(--paper);padding:16px 20px;margin:14px 0}
.dontlist b{display:block;font-size:13px;margin-bottom:6px}
.dontlist li{list-style:none;font-size:13px;color:var(--m6);padding-left:16px;position:relative;margin:4px 0}
.dontlist li::before{content:"—";position:absolute;left:0;color:var(--blue-deep)}
.awardband{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:78px;gap:2px;background:var(--ink);border:2px solid var(--ink);margin:24px 0}
.awardband>div{background:var(--paper);padding:12px 16px;display:flex;flex-direction:column;justify-content:flex-end}
.awardband .ey2{font-size:8.5px;letter-spacing:.2em;color:var(--m6);text-transform:uppercase;margin-bottom:3px}
.awardband .big2{font-family:var(--disp);font-size:17px;line-height:1.2}
.awardband .b-blue3{background:var(--blue);justify-content:flex-start}
.awardband .b-blue3 b{font-family:var(--disp);font-size:12px;letter-spacing:.06em;color:var(--ink);font-weight:400}
.awardband .b-wash3{background:var(--wash)}
.awardband .s3{grid-column:span 3}.awardband .s2{grid-column:span 2}.awardband .r2{grid-row:span 2}

/* ---------- 13. 상품상세 (모듈 C · W08·W09) ---------- */
.pd{display:grid;grid-template-columns:1.05fr .95fr;gap:2px;background:var(--ink);border:2px solid var(--ink);margin-top:26px}
.pd .gal{background:var(--paper);display:flex;align-items:center;justify-content:center;min-height:480px;position:relative;padding:40px}
.pd .gal img{max-height:520px;object-fit:contain;mix-blend-mode:multiply}
.pd .gal .seal{position:absolute;right:22px;top:22px}
.pd .info{background:var(--paper);padding:40px 44px;display:flex;flex-direction:column;gap:18px}
.pd .info .cat3{font-size:10px;letter-spacing:.2em;color:var(--m6);text-transform:uppercase;font-weight:500}
.pd .info h1{font-size:clamp(21px,2.2vw,28px);font-weight:700;line-height:1.3;margin-top:-8px}
.pd .info .en2{font-size:13px;color:var(--m9);margin-top:-12px}
.pd .info .strow{font-size:12.5px;color:var(--m6)}
.pd .info .strow b{letter-spacing:1.5px;font-weight:400;color:var(--ink)}
/* 페이퍼 행택 — 4줄 규격 */
.hangtag{border:1px solid var(--ink);background:var(--paper);padding:18px 22px;position:relative;max-width:320px}
.hangtag::before{content:"";position:absolute;top:10px;right:14px;width:10px;height:10px;border:1px solid var(--line);border-radius:50%}
.hangtag .nm{font-weight:700;font-size:14px}
.hangtag .en{color:var(--m9);font-size:11.5px;margin-top:1px}
/* 권장소비자가 삭선(260914 지시 2) — 판매가 위에 얹는다. 언제나 삭선이고, 없을 때만 안 그린다. */
.hangtag .pd-orig{color:var(--m9);font-size:12.5px;margin-top:6px;text-decoration:line-through;text-decoration-color:currentColor}
.hangtag .pr{font-weight:700;font-size:22px;margin-top:10px}
.hangtag .dc{color:var(--blue-text);font-weight:700;font-size:13px;margin-top:1px}
.pd .ctarow{display:flex;gap:10px;flex-wrap:wrap}
.pd .ctarow .btn-ink,.pd .ctarow .btn-ghost{flex:1;min-width:150px}
/* 모듈 C 등급 위젯 — 가격 아래 */
.gw{background:var(--paper);border:1px solid var(--ink);padding:18px 20px;max-width:420px}
.gw .t{display:flex;align-items:baseline;gap:8px}
.gw .t .v{font-family:var(--disp);font-size:32px}
.gw .t .u{font-size:11px;color:var(--m9)}
.gw .t .l{margin-left:auto;font-size:9px;letter-spacing:.16em;color:var(--m6)}
.gw .ax{display:grid;grid-template-columns:74px 1fr 28px;gap:8px;align-items:center;margin:7px 0;font-size:11.5px}
.gw .cells{display:flex;gap:3px}
.gw .cells i{flex:1;height:9px;border:1px solid var(--line);background:var(--paper)}
.gw .cells i.f{background:var(--blue);border-color:var(--blue)}
.gw .vv{font-family:var(--disp);font-size:12.5px;text-align:right}
.gw .lim{border-top:1px dashed var(--line);margin-top:10px;padding-top:9px;font-size:10.5px;color:var(--m6);line-height:1.55}
.gw .more{display:inline-block;margin-top:8px;font-size:10.5px;letter-spacing:.08em;border-bottom:1px solid var(--ink);font-weight:700}
.gw.pending{display:flex;align-items:center;gap:12px}
.gw.pending .b-wash{flex:0 0 auto}
.gw.pending p{font-size:12px;color:var(--m6)}
/* 약사 한마디 */
.pharm-note{background:var(--paper);border:1px solid var(--ink);padding:18px 22px;max-width:420px}
.pharm-note .q{font-size:13.5px;line-height:1.65}
.pharm-note .who{font-size:11px;color:var(--m6);margin-top:8px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pharm-note .who b{color:var(--ink)}
.pharm-note .rule{font-size:10px;color:var(--m9);border-top:1px dashed var(--line);margin-top:10px;padding-top:8px}
/* ---------- 상세 · 전문가 채점 라이브(260828 — P-04 §5·6·9·10 배선) ---------- */
.pd-rate{background:var(--paper);border:1px solid var(--ink);padding:18px 22px;max-width:460px;margin-top:16px}
.pd-rate-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.pd-rate-head b{font-size:15px;letter-spacing:.04em}
.pd-rate-head span{font-size:11.5px;color:var(--m6)}
.pd-axes{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pd-axes li{display:grid;grid-template-columns:74px 1fr 30px;gap:8px;align-items:center;font-size:11.5px}
.pd-axes .lb{color:var(--m6)}
.pd-axes .tr{display:block;height:5px;background:var(--wash);border:1px solid var(--b10);overflow:hidden}
.pd-axes .tr i{display:block;height:100%;background:var(--blue-deep,var(--blue))}
.pd-axes b{font-size:11px;text-align:right}
.pd-memos{margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.pd-memos blockquote{margin:0 0 10px;padding:0}
.pd-memos blockquote p{font-size:13px;line-height:1.6;margin:0}
.pd-memos footer{font-size:11px;color:var(--m6);margin-top:4px;display:flex;gap:8px}
.pd-memos footer b{color:var(--ink)}
.pd-memos .rule{font-size:10px;color:var(--m9);margin:2px 0 0}
.pd-compare table .mine td{background:var(--wash);font-weight:700}
.pd-jrail{margin-top:56px}
.pd-jcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pd-jcard{display:flex;gap:12px;align-items:center;border:1px solid var(--line);background:var(--paper);padding:12px;color:var(--ink)}
.pd-jcard img{width:72px;height:72px;object-fit:cover;flex:none}
/* 라벨 클래스는 jc- 접두 — 홈 문법의 .cat(카테고리 카드, aspect-ratio 3/4)와 충돌 금지 */
.pd-jcard .jc-cat{display:block;font-size:10px;letter-spacing:.12em;color:var(--blue-text,var(--m6))}
/* 어워드 수상 보드 스타일은 페이지 스코프(src/mall/pages/custom/Awards.css)로 이관(260902) —
   260829 원판·260829b 'GOLD 원장' 2벌이 여기 겹쳐 있던 것을 정리했다. */
.pd-jcard b{display:block;font-size:13.5px;line-height:1.45;margin:3px 0}
.pd-jcard .meta{display:block;font-size:11px;color:var(--m6)}
@media(max-width:980px){
  .pd-jcards{grid-template-columns:1fr}
}
/* 상세 하부 블록 */
.pdblocks{margin-top:2px;border:2px solid var(--ink);border-top:0;background:var(--ink);display:flex;flex-direction:column;gap:1px}
.pdb{background:var(--paper);padding:30px 40px}
.pdb h3{font-family:var(--disp);font-weight:400;font-size:19px;margin-bottom:12px}
.pdb p{font-size:13.5px;color:var(--m6);max-width:720px}
.pdb table{width:100%;max-width:720px;border-collapse:collapse;font-size:12.5px;margin-top:10px;border:1px solid var(--line)}
.pdb th{text-align:left;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--m6);border-bottom:1.5px solid var(--ink);padding:7px 10px;font-weight:700}
.pdb td{border-bottom:1px solid var(--line);padding:8px 10px}
.pdb.legal{background:var(--wash)}
.pdb.legal p{color:var(--ink)}
.relrail{margin-top:64px}

/* ---------- 14. 평가단 페이지 (W5) ---------- */
.formx{background:var(--paper);border:2px solid var(--ink);padding:40px 44px;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px}
.formx .full{grid-column:1/-1}
.formx fieldset{border:1px solid var(--line);padding:14px 16px;grid-column:1/-1}
.formx legend{font-size:11px;letter-spacing:.08em;color:var(--m6);font-weight:700;padding:0 8px}
.formx .chks{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}
.formx .chks label{display:flex;align-items:center;gap:6px;font-weight:400;font-size:13px;letter-spacing:0;color:var(--ink);margin:0}
.formx .agree{display:flex;flex-direction:column;gap:8px;font-size:13px}
.formx .agree label{display:flex;align-items:center;gap:8px;font-weight:400;letter-spacing:0;color:var(--ink);margin:0;font-size:13px}
.formx .agree .req{color:var(--blue-text);font-weight:700}
.formx .note2{grid-column:1/-1;font-size:12px;color:var(--m9)}
.panel-done{border:2px solid var(--ink);background:var(--paper);padding:44px;text-align:center;margin-top:26px;display:none}
.panel-done.show{display:block}
.panel-done .big{font-family:var(--disp);font-size:clamp(22px,3vw,32px)}
.panel-done p{font-size:13.5px;color:var(--m6);margin-top:12px}

/* ---------- 15. 반응형 ---------- */
/* 981~1420px 중간 폭 — 중앙 내비(auto)와 좌우 1fr 트랙이 맞닿아
   'SEARCH'가 커뮤니티에 붙고 '약사 로그인'이 두 줄로 꺾이던 밀림 보정(260828).
   column-gap 이 내비·유틸 사이 최소 간격을 보장하고, nowrap 이 라벨 두 줄 꺾임을 막는다. */
/* 셀렉터가 #header.gnb .row 인 이유 — 레거시 mall-inline.css(≥1024 grid·gap:0)와
   fusion-canon.css(padding 0 32px)가 ID 특이도로 클래스 규칙을 이기므로 같은 특이도로 되받는다. */
@media(max-width:1420px) and (min-width:981px){
  #header.gnb .row{column-gap:20px}
  .nav{gap:18px}
  .util{gap:12px;letter-spacing:.06em}
  .util a{white-space:nowrap}
}
@media(max-width:1180px) and (min-width:981px){
  /* 1fr auto 1fr 은 좌우 트랙이 같은 폭이라 유틸이 트랙을 넘쳐 내비를 침범한다 —
     이 폭에서는 내용 폭 3열 + space-between 으로 간격을 보장하고 로고를 한 단계 줄인다 */
  #header.gnb .row{grid-template-columns:auto auto auto;justify-content:space-between;padding:0 24px}
  .nav{gap:13px}
  .nav .ni>a{font-size:13.5px}
  .util{gap:10px;font-size:11.5px;letter-spacing:.04em}
  .logo .lt{font-size:20px}
  .logo .sb{font-size:7px;letter-spacing:.24em}
}
@media(max-width:1080px) and (min-width:981px){
  /* ≤980 모바일 전환과 같은 정리 — SEARCH 텍스트 링크를 먼저 접는다 */
  .util .u-search{display:none}
}
@media(max-width:1080px){
  .rrow{grid-template-columns:52px 74px 1.2fr 1.2fr .6fr .9fr .5fr .6fr}
}
@media(max-width:980px){
  .wrap{padding:0 22px}
  .gnb .row{padding:0 22px;grid-template-columns:auto 1fr auto}
  .nav{display:none}
  .util .ham{display:flex}
  .util .lang{display:none}
  /* 하단 탭바 노출 폭 — 데스크톱 내비(.nav)가 사라지는 폭과 같다.
     탭바 자체(.bpnav)는 공용 BottomNav.css 가 같은 980px 에서 켠다. */
  body{padding-bottom:58px}
  .hero .mond{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .c-type{grid-column:span 2}
  .hero .c-blue{grid-column:1}
  .hero .c-seal{grid-column:2}
  .hero .c-photo{grid-column:span 2;min-height:300px}
  .hero .c-ind{grid-column:span 2;flex-direction:row;align-items:center;gap:14px}
  .hero .c-ey{grid-column:span 2}
  .util{gap:12px;font-size:11px}
  .util .u-search{display:none}
  .rankgrid,.pgrid{grid-template-columns:repeat(2,1fr)}
  .numbers,.cards4,.gradeguide{grid-template-columns:repeat(2,1fr)}
  .g3,.axis3,.split,.panelbn .in,.contact .in,.pd,.formx{grid-template-columns:1fr}
  .split .vis{border-left:0;border-top:1px solid var(--ink);min-height:320px}
  .split .txt{padding:56px 28px}
  .instagrid{grid-template-columns:repeat(4,1fr)}
  .panelbn .cta-col{justify-self:start;text-align:left}
  .pd .info{padding:28px 24px}
  .pdb{padding:24px 22px}
  .rrows{overflow-x:auto}
  .rrow{min-width:860px}
  .awardband{grid-template-columns:repeat(3,1fr)}
  .backtop{bottom:70px}
}
@media(max-width:560px){
  .util .u-cart{display:none}
  .hero .c{padding:18px}
  .hero .c-photo{padding:0}
  .seal{width:70px;height:70px;font-size:7px;line-height:1.7}
  .rankgrid{grid-template-columns:1fr}
  .rk.f{grid-column:span 1;grid-row:span 1}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .numbers,.cards4,.gradeguide{grid-template-columns:1fr 1fr}
  .instagrid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- 16. 레거시 공존 호환 레이어 (bpmall 이식 전용 — 원본 목업에는 없음) ----------
   fusion 체인(28파일)이 같은 클래스 노드에 걸어 두는 선언 중 duotone이 명시하지 않아
   새 마크업으로 새어 들어오는 것들을 명시적으로 되돌린다. 레거시 페이지에는 이 클래스
   마크업이 없으므로(홈·크롬 전용) 부작용이 없다. */
html body .marquee{position:relative !important;top:auto !important;height:38px}
html body #header.gnb,html body .gnb{top:0 !important;height:auto}
.gnb .row{height:70px}
.hero{height:auto !important;min-height:0 !important;max-height:none !important;overflow:visible !important;background:none !important;position:relative}
.hero .seal{position:static;right:auto;top:auto;bottom:auto;box-shadow:none;overflow:visible}
.split{min-height:0;background:var(--ink);color:var(--ink);overflow:visible;position:relative}
.split .txt{color:var(--ink)}
.catrail{background:none;border:0;cursor:auto}
.catrail .cat{flex:0 0 clamp(180px,19vw,240px);aspect-ratio:3/4;margin:0;position:relative;overflow:visible}
.mani{text-align:left}
.mani .disp em{color:inherit}
.numbers .n .v{font-weight:400;letter-spacing:0}
html body .gnbov{display:none !important;position:fixed !important;inset:0 !important;transform:none !important;visibility:visible !important;
  background:var(--tile) !important;color:var(--ink) !important;padding:0 !important;z-index:90 !important;flex-direction:column !important;overflow-y:auto}
html body .gnbov.open{display:flex !important}
.logo{font-weight:400;font-size:inherit;letter-spacing:0;transition:none;white-space:normal;display:inline-block}
.contact .ey{font-family:var(--body);letter-spacing:var(--ls-cap);color:var(--m6)}
.ey{font-family:var(--body)}
.sub{color:var(--m6)}
/* bp-pop의 자동 마침표(.sh::after) — duotone 마크업은 마침표를 명시하므로 중복 방지 */
.sh::after{content:none !important}
.pgrid{gap:2px}
.instagrid .f{margin:0}
/* 레거시 체인의 .rv(reveal)와 동일 계약 — fusion-canon 의 .rv 정의와 충돌 없음(동일 의미) */

/* ---------- 17. 오버레이 히어로(타이포-온-이미지) — beautypharmacy.co.kr 실사이트 스캔 정합 (260816 재구축)
   실측: 풀블리드 cover 이미지 + 좌→우 다크 베일 그라디언트, 명판 없는 화이트 타이포(대문자 디스플레이),
   고스트 CTA, 좌하단 대시 인디케이터, 우하단 페이지 번호. ---------- */
.hero-ov .ovbox{position:relative;min-height:min(88vh,780px);overflow:hidden;border-bottom:1px solid var(--ink);background:#0a0a0a}
.hero-ov .ovbox>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,70% center)}
.hero-ov .ovbox>img.contain{object-fit:contain;padding:6%;background:#101112}
.hero-ov .veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.32) 30%,rgba(10,10,10,.05) 58%,rgba(0,0,0,0) 76%)}
.hero-ov .ovcap{position:absolute;left:6vw;top:50%;transform:translateY(-50%);z-index:2;max-width:720px;
  display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.hero-ov .ovcap .ey2{font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.85)}
.hero-ov .ovcap .en{font-family:var(--body);font-weight:700;text-transform:uppercase;font-size:clamp(52px,7.2vw,104px);
  line-height:.96;letter-spacing:.02em;color:rgba(255,255,255,.62)}
.hero-ov .ovcap .en .bp{display:none} /* 실사이트 디스플레이 타이포는 마침표 없음 */
.hero-ov .ovcap .l1{font-size:clamp(22px,2.4vw,32px);font-weight:700;color:#fff;letter-spacing:-.01em}
.hero-ov .ovcap .l1 .bp{color:var(--blue)}
.hero-ov .ovcap .l2{font-size:13.5px;color:rgba(255,255,255,.78);max-width:540px;line-height:1.8}
.hero-ov .ovcap .cta{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.85);background:transparent;
  color:#fff;padding:14px 30px;font-size:12.5px;font-weight:700;letter-spacing:.12em;transition:.3s var(--ease);margin-top:6px}
.hero-ov .ovcap .cta:hover{background:#fff;color:var(--ink);gap:16px}
.hero-ov .ovind{position:absolute;left:6vw;bottom:7%;z-index:2;display:flex;gap:14px;align-items:center}
.hero-ov .ovind .dots{display:flex;gap:10px}
.hero-ov .ovind .dots button{width:34px;height:14px;position:relative}
.hero-ov .ovind .dots button::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:rgba(255,255,255,.35);transition:.3s}
.hero-ov .ovind .dots button.on::after{background:#fff;height:3px;top:5.5px}
.hero-ov .num{position:absolute;right:6vw;bottom:7%;z-index:2;font-size:11px;letter-spacing:.22em;color:rgba(255,255,255,.65)}
@media(max-width:980px){
  .hero-ov .ovbox{min-height:64vh}
  .hero-ov .ovcap{left:22px;right:22px;max-width:none}
  .hero-ov .ovcap .en{font-size:clamp(40px,11vw,64px)}
  .hero-ov .ovind{left:22px}
  .hero-ov .num{right:22px}
}
/* 타이포-온-이미지 셀 — 몬드리안 그리드 안에서 이미지 위에 타이포 오버레이 (260816) */
.hero .c-typeimg{position:relative;padding:0;overflow:hidden;color:#fff;background:#0a0a0a}
.hero .c-typeimg .tbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,50% 50%)}
.hero .c-typeimg .tveil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.28) 45%,rgba(0,0,0,0) 78%)}
.hero .c-typeimg .tcap{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:flex-end;height:100%;padding:26px 28px}
.hero .c-typeimg .en{font-family:var(--body);font-weight:700;text-transform:uppercase;font-size:clamp(30px,3.6vw,54px);line-height:.96;letter-spacing:.02em;color:rgba(255,255,255,.66)}
.hero .c-typeimg .l1{font-size:17px;font-weight:700;color:#fff}
.hero .c-typeimg .l1 .bp{color:var(--blue)}
.hero .c-typeimg .cta{display:inline-flex;border:1px solid rgba(255,255,255,.85);color:#fff;padding:10px 20px;font-size:11.5px;font-weight:700;letter-spacing:.1em;transition:.3s var(--ease)}
.hero .c-typeimg .cta:hover{background:#fff;color:var(--ink)}

/* 레이어 겹침(260816) — 글(text) 셀이 그림(base) 셀 위에 얹힐 때: 셀 배경을 비우고
   POP 명판 규칙(그리드/이미지 위 텍스트는 명판 안에)으로 가독성을 지킨다 */
.hero .mond .c.on-img{background:transparent !important;background-image:none !important}
.hero .c-type.on-img .cap{background:rgba(255,255,255,.88);border:1px solid var(--b10);padding:10px 16px;backdrop-filter:blur(4px)}
.hero .c-seal.on-img,.hero .c-ind.on-img{background:rgba(255,255,255,.8) !important;backdrop-filter:blur(3px)}

/* fusion .section.path — 우측 클리핑('홈/마이쇼핑' 가림) 수정: 콘텐츠 폭 안 좌측 정렬 크럼 (260816) */
.section.path{display:block !important;width:auto !important;max-width:1080px;margin:18px auto 0 !important;padding:0 24px !important;
  position:static !important;float:none !important;text-align:left !important;font-size:12px;color:var(--m6);overflow:visible !important;height:auto !important}
.section.path>span{display:none}
.section.path ol{display:flex !important;gap:0;justify-content:flex-start !important;float:none !important;margin:0 !important;flex-wrap:wrap}
.section.path li{list-style:none;display:flex;align-items:center;background:none !important;padding:0 !important}
.section.path li a,.section.path li strong{color:var(--m6);font-weight:500;position:static !important;display:inline !important;
  width:auto !important;height:auto !important;text-indent:0 !important;overflow:visible !important;background:none !important;font-size:12px}
.section.path li strong{color:var(--blue-deep);font-weight:700}
.section.path li+li::before{content:"/";margin:0 7px;color:var(--m9)}

/* 스튜디오 미리보기 프레임 — 실제 홈 히어로를 축소 렌더 */
/* 셀 그리드 편집 캔버스 */
.sg-canvas{position:relative;border:2px solid var(--ink);background:var(--ink);display:grid;gap:2px;user-select:none}
.sg-cell{position:relative;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:.06em;
  color:var(--m6);cursor:grab;overflow:hidden;min-height:0}
.sg-cell.sel{outline:3px solid var(--blue-deep);outline-offset:-3px;z-index:2}
.sg-cell.txt{outline:1px dashed var(--blue-deep);outline-offset:-1px;backdrop-filter:blur(1px)}
.sg-cell.txt.sel{outline:3px solid var(--blue-deep);outline-offset:-3px}
.sg-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.sg-cell .k{position:relative;z-index:1;background:rgba(255,255,255,.85);border:1px solid var(--b14);padding:1px 7px;font-weight:700}
.sg-empty{background:var(--tile);opacity:.45}

/* ---------- 원본(classic) 스킨 — beautypharmacy.co.kr 실측 재매핑 (260821) ----------
   과거 실측의 클래식 액센트는 보관하며, 260922 공통 소프트/라인은 블루 #D7EEF5/#5BC8E4로 통일한다.
   잉크 #0A0A0A, 미스트 #F5F5F5, 라운드 0, 그라우트 격자 없음, 디스플레이 Albert Sans.
   듀오톤 전용 모듈(랭킹 그리드·평가단 배너·인스타 피드)은 원본 홈에 없어 숨긴다. */
[data-fskin="classic"]{
  --blue:#E0479A; --blue-deep:#C12878; --blue-text:#C12878;
  --wash:#D7EEF5; --soft:#5BC8E4;
  --tile:#F5F5F5; --ink:#0A0A0A; --line:#E4E4E4;
  --grout:transparent;
  --disp:'Albert Sans','Pretendard',sans-serif;
  /* 260911 W-J5 — GOLD 훅은 핑크(재매핑된 --blue) · POP 토큰 --bp/--bp-d 는 :root(bp-pop.css)에 항상 정의돼
     var() 폴백이 안 타므로 여기서 핑크로 재매핑(kurly-pages.css §0 과 같은 관행) — 종전엔 CTA·괘선이 청록으로 남았다. */
  --gold:var(--blue); --gold-wash:var(--wash); --gold-ink:var(--blue-text);
  --gold-hi:var(--blue); --on-gold:var(--ink); --gold-deep:var(--blue-deep);
  --bp:var(--blue); --bp-d:var(--blue-deep);
}
[data-fskin="classic"] .sh{font-family:'Albert Sans','Pretendard',sans-serif;font-weight:700;letter-spacing:-.01em}
[data-fskin="classic"] .plate,[data-fskin="classic"] .btn-ink{border-radius:0}
[data-fskin="classic"] .rankstrip,
[data-fskin="classic"] .panelbn,
[data-fskin="classic"] #media,
[data-fskin="classic"] .numbers{display:none}

/* (260829b 'GOLD 원장' 어워드 보드 규칙도 Awards.css 로 이관 — 260902) */

/* ── 260830 비컬리 홈 저널 3열(P-01 §5) — 듀오톤 문법: 라운드 0·그림자 0·헤어라인 괘선, 전 색상 토큰 경유 ── */
.home-journal .sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px}
.home-journal .morelink{font-size:12.5px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--ink)}
.home-journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.home-journal-card{display:flex;flex-direction:column;gap:8px;padding:18px 18px 20px;border-right:1px solid var(--line);color:var(--ink);min-width:0;transition:background .2s var(--ease,ease)}
.home-journal-card:last-child{border-right:0}
.home-journal-card:hover{background:var(--wash,var(--surface-2,#f3f4f6))}
.hj-cover{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--wash,#f3f4f6);border:1px solid var(--line)}
.hj-cover img{width:100%;height:100%;object-fit:cover;display:block}
.hj-cat{font-size:10.5px;letter-spacing:.14em;color:var(--m6);text-transform:uppercase}
.hj-title{font-family:var(--disp);font-weight:400;font-size:18px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hj-lead{font-size:12.5px;color:var(--m6);line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:900px){.home-journal-grid{grid-template-columns:1fr 1fr}.home-journal-card:nth-child(2){border-right:0}}
@media(max-width:560px){.home-journal-grid{grid-template-columns:1fr}.home-journal-card{border-right:0;border-bottom:1px solid var(--line)}}
/* 260911 — 모션 축소 환경에서는 마퀴 무한 반복을 멈춘다(길이만 줄이면 iterations:Infinity 가 남는다) */
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none!important;transform:none}}

/* W-H2: 운영자 히어로 배너는 선명하게 공개한다. 문구 잠금은 HeroSection이 처리한다. */