/* PaRaSOL 스토어프론트 기본 스타일 — 색·라운드·서체는 tokens.css 변수만 참조한다(하드코딩 금지).
   화면별 스타일은 각 템플릿의 layout:fragment="head" 안이 아니라 static/css/{screen}.css 로 분리한다. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:16px;line-height:1.5;
  color:var(--foreground);
  background:var(--background);
}
h1,h2,h3{font-family:var(--font-display);line-height:1.5;margin:0 0 .5em}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
button{font:inherit;cursor:pointer}
/* hidden 속성은 언제나 숨김 — UA의 [hidden]{display:none}은 작성자 규칙보다 약해, 클래스가 display(flex·grid·inline-flex)를 주는 요소는
   hidden을 달아도 보였다(접힌 메뉴·모달 입력 묶음·송장 수정 폼 — 5a-2·5a-3 실측). 요소별 가드 대신 여기 한 줄(관리자·스토어·체크아웃 공통 로드).
   hidden을 CSS로 되살리는 규칙은 두지 않는다 — 보이려면 JS가 hidden을 뗀다(HiddenAttributeCssContractTest가 잠근다) */
[hidden]{display:none !important}

/* 접근성: 포커스 링 상시 가시(KWCAG) — outline 제거 금지 */
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.skip-link{
  position:absolute;left:-999px;top:0;padding:8px 12px;
  background:var(--primary);color:var(--primary-foreground);z-index:1000
}
.skip-link:focus{left:8px;top:8px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ── 본문 폭 규약 ──────────────────────────────────────────────────────────────
   본문 폭은 .container 한 곳에서만 정한다. 화면 클래스(.home·.terms·.notice…)는 폭·중앙정렬을
   스스로 갖지 않는다 — 화면마다 제각각 max-width만 갖고 margin-inline:auto가 빠져 좌측에 붙던 원인이다.

   레이아웃(layout/default.html)의 <main id="main" class="page" tabindex="-1">에서 class는 화면이
   <main class="X">를 쓰는 순간 통째로 덮인다(Layout Dialect 4는 콘텐츠 쪽 속성으로 치환한다 —
   id·tabindex는 레이아웃 것이 남고 class만 사라진다. 렌더 실측 고정: StoreShellLayoutRenderTest).
   그래서 화면 템플릿은 <main layout:fragment="content">에 class를 두지 않고(=.page 유지)
   본문을 <div class="container {화면클래스}">로 감싼다 — 헤더·푸터가 쓰는 바로 그 컨테이너다.

   전체 폭 배경이 필요하면 <section>을 전폭으로 두고 그 안쪽만 .container로 감싼다
   ('배경은 전체 폭, 콘텐츠는 컨테이너' — 메인의 히어로·띠배너·진열 섹션이 이 형태).

   좁은 문서형 화면은 아래 폭 변형으로 최대폭만 줄인다 — 중앙정렬·거터는 그대로 .container 몫.
   변형 값은 Next 화면 래퍼의 max-w-[N] 그대로다 — 거터를 padding으로 갖는 같은 상자 모델이라 환산이 필요 없다.

   거터(좌우 여백)는 16px → 40px(≥768px). Next·목업이 모든 셸·화면 래퍼에 px-4 md:px-10을 붙이는 값이다.
   폭에서 빼는 방식(width:min(1200px,100% - 32px))은 768~1279px 구간에서 거터가 16px로 굳어
   화면 끝에 24px씩 더 붙었다 — 그래서 width가 아니라 padding-inline으로 갖는다(box-sizing:border-box).

   남은 예외 둘(이번 정리에서 손대지 않음): .auth는 420px 폼 카드 자체가 상자라 자기 폭을 갖고,
   story/detail은 히어로가 전폭이어야 해서(Next와 동일) 본문 .story-article__body만 좁힌다. */
.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:16px}
.container--doc{max-width:1040px}     /* 약관·정책 — Next max-w-[1040px] */
.container--story{max-width:960px}    /* 이야기 목록 — Next max-w-[960px] */
.container--article{max-width:820px}  /* 공지·FAQ·고객센터 — Next max-w-[820px] */
.container--form{max-width:720px}     /* 1:1 문의·단체구매 — Next max-w-[720px] */
.container--order-done{max-width:760px} /* 주문완료 — Next order/complete/page.tsx max-w-[760px] */
/* 체크아웃은 폭 변형을 쓰지 않는다 — Next checkout/page.tsx도 장바구니와 같은 max-w-[1280px]다 */
@media (min-width:768px){.container{padding-inline:40px}}
/* 상하 여백도 .page 한 곳에서 준다. 기본값 24/56은 Next 서브 화면 여덟이 쓰는 pt-6 pb-14이고
   (공지·공지상세·약관·고객센터·FAQ·1:1 문의·통합검색·기획전 목록), 다른 값을 쓰는 화면만 아래에서 덮는다.
   덮을 때 자식(.plist·.pdetail·.cart…)에 padding을 얹으면 .page 값 위에 더해져 이중 계산이 된다 —
   실측(1차): 상품목록 24+16=40px(Next 16px) · 상품상세 42px(Next 18px) · 장바구니 42px(Next 18px) · 로그인 56px(Next 32px).
   그래서 자식이 아니라 .page 자신을 :has()로 덮는다(:has() 미지원 브라우저는 기본값 24/56으로 안전하게 떨어진다). */
.page{min-height:60vh;padding-block:24px 56px}
.page:has(> .plist){padding-block:16px 40px}     /* Next products/page.tsx:151 pt-4 pb-10 */
.page:has(> .pdetail){padding-block:18px 0}      /* Next products/[slug]/page.tsx:49 pt-[18px] — 하단 선언 없음(스티키 구매바가 끝) */
.page:has(> .cart){padding-block:18px 40px}      /* Next cart/page.tsx:18 pt-[18px] pb-10 */
.page:has(> .checkout){padding-block:18px 40px}  /* Next checkout/page.tsx:18 pt-[18px] pb-10 — 장바구니와 같은 값 */
.page:has(> .order-done){padding-block:18px 40px} /* Next order/complete/page.tsx:24 pt-[18px] pb-10 */
.page:has(> .mypage){padding-block:16px 56px}    /* Next mypage/page.tsx:30 pt-4 pb-14 */
.page:has(> .event){padding-block:16px 56px}     /* Next events/[slug]/page.tsx:59 pt-4 pb-14 */
.page:has(> .story){padding-block:26px 56px}     /* Next story/page.tsx:113 pt-[26px] pb-14 */
.page:has(> .bulk){padding-block:26px 56px}      /* Next bulk-inquiry/page.tsx:14 pt-[26px] pb-14 */
.page:has(> .auth){padding-block:32px 56px}      /* Next login/page.tsx:39 pt-8 pb-14 */
/* 히어로가 전폭·최상단이라 위 여백이 없다(Next story/[slug]/page.tsx:43 <article> 첫 자식) — 아래 여백은 본문이 갖는다 */
.page:has(> .story-article){padding-block:0}
/* 404·500은 .state--page가 자기 상하 여백(clamp)을 갖는다 */
.page:has(.state--page){padding-block:0}
@media (min-width:768px){.page:has(> .auth){padding-top:48px}}  /* Next login/page.tsx:39 md:pt-12 */

/* 헤더 */
.site-header{border-bottom:1px solid var(--border);background:var(--card)}
/* 줄 높이는 48px 인풋이 만든다 — min-height를 따로 주면 Next(gap-3 py-3)보다 낮아진다 */
.site-header__row{display:flex;align-items:center;gap:12px;padding-block:12px}
.site-header__brand{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-family:var(--font-display);font-weight:800;font-size:23px;letter-spacing:-.01em;color:var(--foreground)}
/* 우측 액션은 아이콘 버튼만 — 계정 진입점은 유틸 줄이 갖는다(Next store-header.tsx 'ml-auto … gap-0.5').
   글자 액션 여섯 개가 채우던 자리를 아이콘 하나가 대신하므로, 오른쪽 끝에 붙이는 건 auto 마진 몫이다 */
.site-header__actions{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.inline-form{display:inline-flex;align-items:center;gap:6px;margin:0}
/* 브랜드 마크 — 색은 토큰만(layout/fragments/brand.html이 유일한 도형 정의) */
.brand-mark{flex:0 0 auto}
.brand-mark__canopy{fill:var(--accent)}
.brand-mark__handle{stroke:var(--foreground)}

/* 버튼 — 색은 토큰 */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 18px;border-radius:calc(var(--radius) - 4px);
  border:1px solid transparent;font-weight:700
}
.btn--primary{background:var(--primary);color:var(--primary-foreground)}
.btn--outline{background:var(--card);border-color:var(--border);color:var(--foreground)}
.btn--ghost{background:transparent;color:var(--muted-foreground)}

/* ── 푸터 — 4컬럼(브랜드·고객지원·쇼핑정보·고객센터) + 구분선 법정 표기. 모바일 2컬럼. Next store-footer.tsx 대조 ── */
.site-footer{margin-top:clamp(16px,3vw,32px);padding-block:clamp(28px,4vw,44px);border-top:1px solid var(--border);
  background:var(--muted);color:var(--muted-foreground);font-size:13px}
.site-footer__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 18px}
.site-footer__brand-row{display:flex;align-items:center;gap:8px;color:var(--foreground)}
.site-footer__wordmark{font-family:var(--font-display);font-weight:800;font-size:20px}
.site-footer__tagline{margin:12px 0 0;max-width:34ch;line-height:1.7}
.site-footer__pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.site-footer__pay-chip{display:inline-flex;align-items:center;padding:4px 7px;border:1px solid var(--border);
  border-radius:calc(var(--radius) - 4px);font-size:11px;font-weight:700;line-height:1.5}
.site-footer__group-title{margin:0 0 12px;font-family:inherit;font-size:13px;font-weight:800;color:var(--foreground)}
.site-footer__list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
/* 모바일은 44px 터치 타겟, 데스크톱은 목업대로 9px 간격으로 좁힌다 */
.site-footer__list a{display:flex;align-items:center;min-height:44px}
.site-footer__list a:hover{color:var(--primary)}
.site-footer__cs-phone{display:inline-flex;align-items:center;min-height:44px;
  font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:.01em;color:var(--foreground)}
.site-footer__cs-hours{margin-top:6px;font-size:12px;line-height:1.7}
.site-footer__cs-hours span{display:block}
.site-footer__cs-email{display:inline-flex;align-items:center;min-height:44px;font-size:12px}
.site-footer__legal{margin-top:28px;padding-top:20px;border-top:1px solid var(--border);font-size:12px;line-height:1.9}
/* 축약 푸터(체크아웃 전용 셸) — 링크 4열이 없어 구분선·위 여백이 필요 없다. 법정 표기는 같은 조각을 쓴다 */
.site-footer--compact{padding-block:clamp(20px,3vw,28px)}
.site-footer--compact .site-footer__legal{margin-top:0;padding-top:0;border-top:0}
.site-footer__business{font-style:normal}
.site-footer__legal-line{display:block}
.site-footer__copy{display:inline-block;margin:8px 0 0}
@media (min-width:768px){
  .site-footer__grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px}
  .site-footer__list{gap:9px}
  .site-footer__list a,.site-footer__cs-phone,.site-footer__cs-email{min-height:0}
}

/* ── 헤더 v2: 유틸 줄 · 브랜드/검색/액션 · 대분류 내비 ── */
/* 유틸 줄 — 계정 진입점(로그인·회원가입·마이페이지·로그아웃)이 사는 곳.
   데스크톱 전용이라는 점은 Next(hidden md:flex)와 같지만, 감추는 조건에 html[data-drawer-ready]를 하나 더 건다:
   모바일의 계정 진입점을 드로어가 통째로 넘겨받으므로, 드로어가 실제로 배선됐을 때만 넘겨줘야 한다.
   static/js/drawer.js가 트리거·패널을 찾은 뒤 그 표시를 세운다 — 스크립트가 없거나 죽으면 표시가 서지 않아 이 줄이 그대로 남는다.
   남을 때를 위해 좁은 화면과 터치 기기의 히트영역은 44px로 유지한다. */
.site-header__util{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px 14px;
  padding-top:9px;font-size:12px;line-height:16px;color:var(--muted-foreground)}
@media (max-width:767.98px){
  html[data-drawer-ready] .site-header__util{display:none}
}
.site-header__util a,.site-header__util-button{display:inline-flex;min-height:44px;align-items:center}
.site-header__util a:hover,.site-header__util-button:hover{color:var(--primary)}
.site-header__util-button{padding:0;border:0;background:transparent;color:inherit;text-decoration:none}
.site-header__util-button:hover{text-decoration:underline}
/* 검색은 남는 폭 가운데 — Next 'mx-auto … max-w-[520px] flex-1'과 같은 auto 마진 배분 */
.site-search{position:relative;flex:1 1 320px;max-width:520px;margin-inline:auto;display:none}
/* 배경은 헤더와 같은 --card다(--background는 살짝 노란 오프화이트라 헤더 위에서 톤이 어긋난다) */
.site-search__input{width:100%;height:48px;padding:0 52px 0 18px;border:1px solid var(--input);border-radius:999px;
  background:var(--card);color:var(--foreground);font-family:inherit;font-size:15px}
.site-search__btn{position:absolute;top:5px;right:5px;width:38px;height:38px;border:0;border-radius:50%;
  background:var(--primary);color:var(--primary-foreground);display:inline-flex;align-items:center;justify-content:center}
/* 터치 기기에서만 44px로 키우고 오프셋을 2px로 줄여 48px 인풋 안에 그대로 앉힌다(KWCAG · Next pointer-coarse:size-11) */
@media (pointer:coarse){.site-search__btn{top:2px;right:2px;width:44px;height:44px}}
/* 모바일 전용 두 번째 검색 폼 — 브랜드 줄 아래 전폭(Next StoreSearchForm formLayout="mobile" 'pb-3 md:hidden').
   데스크톱 폼은 768px 미만에서 숨으므로, 이게 없으면 모바일에 검색 진입점이 사라진다 */
.site-search--mobile{display:flex;flex:0 0 auto;max-width:none;margin-inline:0;padding-bottom:12px}
.site-search--mobile .site-search__input{padding-right:50px;padding-left:16px}
/* 아이콘 버튼 — 44×44(터치 타겟). 이름은 aria-label이 갖는다(내용이 SVG뿐이라 보이는 글자가 없다) */
.site-header__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  color:var(--foreground)}
.site-header__icon:hover{color:var(--primary)}
.site-header__icon--wishlist:hover{color:var(--accent)}   /* 하트만 accent — Next store-header.tsx:328 hover:text-accent(카트는 primary) */
.site-cats{display:none;flex-wrap:wrap;gap:6px;border-top:1px solid var(--border)}
.site-cats__link{display:inline-flex;align-items:center;min-height:46px;padding-inline:12px;font-size:14px;font-weight:600;color:var(--foreground)}
.site-cats__link:hover{color:var(--primary);text-decoration:none}
/* 현재 위치는 색만으로 전달하지 않는다(KWCAG) — 모바일 레일이 굵기+바를 쓰는 것과 같은 이유 */
.site-cats__link[aria-current="page"]{color:var(--primary);font-weight:800}

/* ── 모바일 대분류 탭 레일 (헤더 바깥 형제) ── */
.cat-rail{position:relative;border-bottom:1px solid var(--border);background:var(--card)}
.cat-rail__scroller{display:flex;overflow-x:auto;scrollbar-width:none;padding:0 40px 0 12px;-webkit-overflow-scrolling:touch}
.cat-rail__scroller::-webkit-scrollbar{display:none}
.cat-rail__tab{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;height:46px;padding-inline:12px;
  font-size:14.5px;white-space:nowrap;color:var(--muted-foreground)}
.cat-rail__tab:hover{text-decoration:none}
.cat-rail__tab:active{opacity:.6}
.cat-rail__tab[aria-current="page"]{font-weight:700;color:var(--foreground)}
.cat-rail__tab[aria-current="page"]::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2.5px;border-radius:2px;background:var(--primary)}
/* 어포던스 ① 페이드 — 레일이 놓인 배경색으로 만든다(헤더 탭 레일은 card, 상품목록 칩 레일은 background).
   다른 색으로 만들면 배경 위에 회색 띠가 얹힌 것처럼 보인다(Next scroll-rail.tsx surface prop) */
.cat-rail::before,.cat-rail::after{content:"";position:absolute;top:0;bottom:0;width:28px;pointer-events:none;opacity:1;transition:opacity .15s}
.cat-rail::before{left:0;background:linear-gradient(to right,var(--card),transparent)}
.cat-rail::after{right:40px;background:linear-gradient(to left,var(--card),transparent)}
.cat-rail.is-at-start::before{opacity:0}
.cat-rail.is-at-end::after{opacity:0}
/* ② 우측 화살표 — 의도적으로 Next와 다르다. Next scroll-rail.tsx:151은 28px 원형 + aria-hidden + tabIndex={-1}
   순수 장식이지만, 여기서는 44×46 실제 컨트롤로 두고 aria-label을 붙였다(탭 순서에 들어간다).
   근거: 장식으로 내리면 포인터 사용자가 레일을 밀 수단이 화살표뿐인데 그 타깃이 28px이 되어 WCAG 2.5.8에 미달한다.
   ★이 결정이 우측 페이드의 시작점(right:40px)·폭(28px)과 한 묶음이다 — 셋을 함께 바꾸지 않으면 어긋난다. */
.cat-rail__arrow{position:absolute;top:0;right:0;width:44px;height:46px;border:0;background:var(--card);color:var(--foreground);
  display:inline-flex;align-items:center;justify-content:center}
.cat-rail.is-at-end .cat-rail__arrow,.cat-rail:not(.is-scrollable) .cat-rail__arrow{display:none}
/* ③ 진행 트랙 — 상품목록 칩 레일에만 둔다. 헤더 탭 레일은 aria-current 밑줄이 이미 현재 위치를 알려주므로
   트랙을 쓰지 않는다(Next store-header.tsx:420 showTrack={false} · 핸드오프도 탭 레일엔 트랙이 없다).
   그래서 마크업 자체가 product/list.html에만 있다 — 헤더 조각에는 없다. */
.cat-rail__track{position:absolute;left:12px;right:12px;bottom:0;height:3px;background:transparent}
.cat-rail__thumb{position:absolute;top:0;height:3px;border-radius:2px;background:var(--primary);opacity:.35;transition:left .1s}
.cat-rail:not(.is-scrollable) .cat-rail__track{display:none}
/* 트랙이 있는 레일만 페이드가 3px을 비워 준다(::after가 실제 자식보다 늦게 그려져 트랙을 덮는다) */
.cat-rail--chips::before,.cat-rail--chips::after{bottom:3px}
/* 칩 레일은 .container 위(=--background)에 놓인다 — 페이드도 그 색이라야 띠로 보이지 않는다(Next surface="background") */
.cat-rail--chips::before{background:linear-gradient(to right,var(--background),transparent)}
.cat-rail--chips::after{background:linear-gradient(to left,var(--background),transparent)}

@media (min-width:768px){
  .site-search,.site-cats{display:flex}
  .site-search--mobile{display:none}
  /* 데스크톱에서 감추는 건 헤더 탭 레일뿐이다 — 대분류 내비(.site-cats)가 그 자리를 대신하기 때문.
     상품목록 칩 레일(.cat-rail--chips)은 데스크톱에서도 카테고리 필터라 계속 보여야 한다
     (선택자를 좁히기 전에는 이 규칙이 칩 레일까지 꺼서 ≥768px에서 필터가 통째로 사라졌다). */
  .cat-rail:not(.cat-rail--chips){display:none}
}
/* Next 헤더의 텍스트 행은 16px 높이이며 위쪽 패딩 9px을 더해 25px이다.
   터치 기기의 44px 타깃은 유지하고 정밀 포인터에서만 이 높이를 적용한다. */
@media (min-width:768px) and (pointer:fine){
  .site-header__util a,.site-header__util-button{min-height:0}
}

/* ── 모바일 전체 메뉴 드로어 (조각 layout/fragments/drawer.html · 동작 static/js/drawer.js) ──
   규격은 핸드오프 'PaRaSOL 기획전.dc.html' 203~247 + Next store-mobile-nav.tsx/ui/sheet.tsx.
   층위 스케일: 토스트 600 > 모달·바텀시트 500 > 드로어 400 — 드로어 위에서 확인 모달이 뜰 자리를 비워 둔다(Next sheet.tsx 주석). */
/* 트리거 — Next Button size="icon-sm"(44px·라운드 10px) + -ml-2. 768px 이상은 대분류 내비가 대신하므로 감춘다 */
.drawer-trigger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;margin-inline-start:-8px;border:0;border-radius:calc(var(--radius) - 2px);
  background:transparent;color:var(--foreground)}
.drawer-trigger:hover{color:var(--primary)}
@media (min-width:768px){.drawer-trigger{display:none}}

.drawer{position:fixed;inset:0;z-index:400}
.drawer__overlay{position:absolute;inset:0;background:color-mix(in oklch,var(--foreground) 45%,transparent);
  animation:drawer-fade .15s ease}
.drawer__panel{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;
  width:min(320px,84vw);background:var(--card);color:var(--card-foreground);
  box-shadow:8px 0 40px rgba(0,0,0,.2);animation:drawer-in .26s cubic-bezier(.22,1,.36,1)}
/* 열린 상태가 기본값이고 애니메이션은 장식이다 — 모션 감소 설정에서 전역 animation:none이 걸려도 패널이 화면 밖에 남지 않는다 */
@keyframes drawer-fade{from{opacity:0}to{opacity:1}}
@keyframes drawer-in{from{transform:translateX(-100%)}to{transform:none}}
/* 닫히는 200ms 동안 오버레이가 아직 화면을 덮고 있다 — 그 사이 누른 배경 링크를 삼키지 않게 클릭을 통과시킨다 */
.drawer.is-closing .drawer__overlay{animation:drawer-fade .2s ease reverse;pointer-events:none}
.drawer.is-closing .drawer__panel{animation:drawer-in .2s ease reverse}

.drawer__header{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto;
  padding:16px 18px;border-bottom:1px solid var(--border)}
.drawer__brand{display:flex;align-items:center;gap:8px}
.drawer__wordmark{font-family:var(--font-display);font-weight:800;font-size:19px}
/* 목업은 38px이지만 터치 타깃 44px로 올린다(KWCAG) — Next SheetCloseButton도 같은 이유로 size-11이다 */
.drawer__close{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;border:0;border-radius:999px;background:var(--muted);color:var(--foreground)}
.drawer__close:hover{filter:brightness(.95)}

.drawer__account{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin:14px 16px;padding:14px;
  border-radius:calc(var(--radius) - 3px);background:var(--secondary);color:var(--secondary-foreground)}
.drawer__account:hover{filter:brightness(.98);text-decoration:none}
.drawer__account-text{flex:1;font-size:14px;font-weight:700}

.drawer__body{flex:1;overflow-y:auto;padding:4px 8px 16px;-webkit-overflow-scrolling:touch}
.drawer__label{margin:0;padding:10px 10px 6px;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--muted-foreground)}
.drawer__label--divided{margin-top:10px;padding-top:16px;border-top:1px solid var(--border)}
/* 행 하나의 공통 규격 — 링크·토글 버튼·로그아웃 줄이 같은 상자를 쓴다 */
.drawer__row{display:flex;align-items:center;gap:10px;width:100%;padding-inline:10px;border:0;
  background:transparent;border-radius:calc(var(--radius) - 5px);color:var(--foreground);text-align:left}
.drawer__row:hover{background:var(--muted);text-decoration:none}
.drawer__row--cat{min-height:48px;font-size:15px;font-weight:700}
.drawer__row--quick{min-height:44px;font-size:14px;font-weight:600}
.drawer__row-label{flex:1}
.drawer__row-icon{display:flex;flex:0 0 auto;color:var(--muted-foreground)}
.drawer__chevron{flex:0 0 auto;color:var(--muted-foreground);transition:transform .2s}
.drawer__toggle[aria-expanded="true"] .drawer__chevron{transform:rotate(180deg)}
/* 2depth — 목업 40px을 44px로 올린다(터치 전용 목록 · Next도 같은 상향) */
.drawer__sub{display:flex;flex-direction:column;padding:2px 0 8px 40px}
.drawer__sub-link{display:flex;align-items:center;min-height:44px;padding-inline:10px;
  border-radius:calc(var(--radius) - 6px);font-size:14px;color:var(--muted-foreground)}
.drawer__sub-link:hover{background:var(--muted);color:var(--foreground);text-decoration:none}
.drawer__logout{margin-top:10px;padding-top:16px;border-top:1px solid var(--border);
  min-height:44px;font-size:14px;font-weight:600;color:var(--muted-foreground)}
.drawer__logout-form{display:flex;flex:1;margin:0}
/* 버튼이 남는 폭 전체를 채운다 — 글자 폭만 눌리면 모바일에서 빗나간다(Next [&>button]:flex-1 [&>button]:py-2.5).
   min-height는 버튼 자신이 가져야 한다: 부모 .drawer__row는 align-items:center라 자식을 늘이지 않아
   padding(10+10)+줄높이(14×1.55≈22)=약 42px에 그친다 — 눌리는 상자가 44px이라야 RULE-11을 만족한다.
   왼쪽 아이콘 칸은 장식(aria-hidden SVG)이라 버튼 밖에 남는다 */
.drawer__logout-button{display:flex;align-items:center;flex:1;min-height:44px;padding:10px 0;
  border:0;background:transparent;color:inherit;font-size:14px;font-weight:600;text-align:left}

/* 시각적으로만 숨김(스크린리더용) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── 이미지 플레이스홀더 — 조각 layout/fragments/media.html :: imagePlaceholder ──
   Next image-placeholder.tsx와 같은 규격: muted 배경 · 32px 이미지 아이콘 · muted-foreground 50% · stroke 1.5.
   '자리'(절대위치·비율·라운드)는 호출한 화면 클래스가 갖고, 배경·아이콘 색만 여기서 준다 —
   그래야 히어로·만든사람들·상품카드·장바구니·갤러리·이야기가 같은 그림을 쓰면서 자리만 각자 정한다. */
.media-placeholder{display:flex;align-items:center;justify-content:center;
  background:var(--muted);color:color-mix(in oklch,var(--muted-foreground) 50%,transparent)}
/* 이미지가 있던 자리를 그대로 채우는 변형 — position:relative 상자(카드·썸네일·갤러리·히어로) 안에서 쓴다 */
.media-placeholder--fill{position:absolute;inset:0}

/* ── 상품목록 ── */
/* 상하 여백은 .page:has(> .plist)가 준다 — 여기서 padding-top을 또 주면 이중 계산이 된다 */
.crumbs{display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--muted-foreground)}
.crumbs a:hover{color:var(--primary);text-decoration:none}
.crumbs [aria-current]{font-weight:600;color:var(--foreground)}
.plist__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;margin:10px 0 18px}
.plist__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(22px,3.4vw,32px);letter-spacing:-.01em}
.plist__count{font-size:14px;color:var(--muted-foreground)}
.plist__count b{color:var(--foreground)}
.plist__controls{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.plist__controls .cat-rail{flex:1 1 auto;min-width:0;border-bottom:0}
.plist__controls .cat-rail__scroller{gap:8px;padding:0 40px 0 2px}
/* 데스크톱에서는 칩 레일이 스크롤 대신 줄바꿈으로 펴지고 장식(페이드·화살표·트랙)을 끈다
   — Next product-list-controls.tsx:93~101의 decorationsMobileOnly + md:flex-wrap md:overflow-visible */
@media (min-width:768px){
  .plist__controls .cat-rail::before,.plist__controls .cat-rail::after,
  .plist__controls .cat-rail__arrow,.plist__controls .cat-rail__track{display:none}
  .plist__controls .cat-rail__scroller{flex-wrap:wrap;overflow-x:visible;padding-right:2px}
}
.chip{display:inline-flex;align-items:center;min-height:44px;flex:0 0 auto;padding:0 15px;border:1px solid var(--border);border-radius:999px;
  background:var(--card);font-size:13px;white-space:nowrap;color:var(--foreground);transition:background .1s,transform .1s}
.chip:hover{background:var(--muted);text-decoration:none}
.chip:active{transform:scale(.96)}
.chip[aria-current]{border-color:var(--primary);background:var(--secondary);color:var(--primary);font-weight:600}
.plist__sort{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.plist__sort-label{font-size:13px;color:var(--muted-foreground)}
.select{min-height:44px;padding:0 12px;border:1px solid var(--input);border-radius:calc(var(--radius) - 4px);background:var(--card);color:var(--foreground);font:inherit}
/* 정렬 '적용' 버튼은 JS가 살아 있을 때만 감춘다 — select의 onchange 제출이 그때만 동작하기 때문이다.
   조건 없이 감추면 JS가 꺼진 환경에서 정렬을 바꿀 수단이 아예 없어진다(폼의 유일한 제출 수단이 이 버튼이다).
   표시는 product/list.html의 head 인라인 스크립트가 세운다 */
html[data-js-ready] .plist__sort-apply{display:none}
@media (max-width:767px){.plist__sort-label{display:none}}
/* 그리드 2/3/4열 */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (min-width:600px){.pgrid{grid-template-columns:repeat(3,1fr);gap:16px}}
@media (min-width:1080px){.pgrid{grid-template-columns:repeat(4,1fr);gap:20px}.plist .pgrid{gap:18px}}
/* 카드 */
/* 카드 모서리는 --radius 그대로(12px) — Next product-card.tsx:112 rounded-lg = --radius-lg = var(--radius) */
.pcard{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.pcard__media{position:relative;aspect-ratio:1/1;background:var(--muted)}
.pcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pcard__badges{position:absolute;top:8px;left:8px;display:flex;flex-wrap:wrap;gap:4px;max-width:82%}
/* 뱃지 — Next ui/badge.tsx의 기본 조합(badgeSize="md" + badgeShape="tag")이 기본값이다:
   px-2 py-0.5(=2px 8px 컴파운드) · 12px · font-bold · rounded-sm(= --radius - 4px = 8px). 공지 분류 칩이 이 규격.
   상품 카드·'중요' 칩처럼 더 작은 자리는 .badge--xs(Next badgeSize="xs"), 품절 칩은 .badge--xl이 덮는다. */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:calc(var(--radius) - 4px);font-size:12px;font-weight:700;line-height:1.5}
.badge--xs{padding:3px 8px;font-size:11px;font-weight:800}   /* Next badgeSize="xs" px-2 py-[3px] text-[11px] font-extrabold */
.badge--muted{background:var(--muted);color:var(--muted-foreground)}   /* Next badgeTone="muted" — 공지 분류 칩 */
.badge--primary{background:var(--primary);color:var(--primary-foreground)}
.badge--destructive{background:var(--destructive);color:var(--destructive-foreground)}
.badge--accent{background:var(--accent);color:var(--accent-foreground)}
.badge--inverse{background:var(--foreground);color:var(--background)}
/* 품절 칩만 각형이 아니라 필형이다 — Next는 badgeShape 기본값이 pill(rounded-full)이고 품절 칩이 그 기본값을 쓴다 */
.badge--xl{padding:6px 16px;border-radius:999px;font-size:14px}
.badge--lg{padding:4px 12px;border-radius:999px;font-size:13px}   /* Next badgeSize="lg" px-3 py-1 text-[13px] — 찜 목록 품절 칩 */
.pcard__soldout{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:color-mix(in oklch,var(--background) 52%,transparent)}
.pcard__body{display:flex;flex:1;flex-direction:column;gap:6px;padding:12px 12px 14px}
.pcard__maker{font-size:12px;color:var(--muted-foreground)}
.pcard__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em;font-size:15px;line-height:1.35;font-weight:600}
.pcard__name::after{content:"";position:absolute;inset:0;z-index:1}
.pcard__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:auto;padding-top:4px}
.pcard__discount{font-size:16px;font-weight:800;color:var(--destructive)}
.pcard__selling{font-size:17px;font-weight:800}
.pcard__compare{font-size:12px;color:var(--muted-foreground)}
/* 카드 CTA는 Next Button size="sm-44" 규격 — min-h-44 · rounded-md(= --radius - 2px = 10px) · 14px · font-bold.
   공용 .btn의 8px·상속 15px과 다른 자리라 여기서만 덮는다(.btn 기본값을 바꾸면 sm-46·admin-* 계열까지 같이 커진다) */
.pcard__cta{position:relative;z-index:2;margin-top:4px;width:100%;min-height:44px;border-radius:calc(var(--radius) - 2px);font-size:14px}
.btn--soft{background:var(--secondary);color:var(--secondary-foreground)}
.btn--soft:hover{filter:brightness(.97);text-decoration:none}
.pcard__cta--soldout{background:var(--muted);color:var(--muted-foreground)}
.pcard__cta--soldout:hover{border-color:var(--foreground);text-decoration:none}
/* 빈 상태(panel) */
.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);text-align:center}
.empty__icon{font-size:40px;line-height:1}
.empty__title{margin:4px 0 0;font-size:18px;font-weight:800}
.empty__desc{margin:0 0 8px;font-size:14px;color:var(--muted-foreground)}
/* 페이지네이션 */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:32px}
.pager__item{display:inline-flex;align-items:center;justify-content:center;height:44px;min-width:44px;padding:0 4px;border-radius:4px;font-size:14px;font-weight:600;color:var(--foreground)}
.pager__item:hover{background:var(--muted);text-decoration:none}
.pager__item--current{background:var(--primary);color:var(--primary-foreground)}
.pager__item--disabled{opacity:.4;cursor:not-allowed}

/* ── 상품 상세 ── */
/* 상하 여백은 .page:has(> .pdetail)가 준다(이중 계산 방지) */
.pdetail__crumbs{margin-bottom:16px;flex-wrap:wrap}
.pdetail__grid{display:block}
/* ≥768px 전 구간 1fr|360px·gap 32px = Next 실제 렌더값. Next 소스의 min-[1040px]:408px·gap-11은 Tailwind 4가 px 임의 브레이크포인트 블록을
   rem(md=48rem) 블록보다 앞에 출력해 md 값에 덮인다(컴파일 CSS 실측). 408px를 따르면 갤러리가 60px 줄어 구매정보 스티키 이동 거리가 짧아진다 */
@media (min-width:768px){.pdetail__grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start}}
.gallery{margin-bottom:24px}
@media (min-width:768px){.gallery{margin-bottom:0}}
.gallery__main{position:relative;aspect-ratio:1/1;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--muted)}
.gallery__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:10px}
.gallery__thumb{aspect-ratio:1/1;overflow:hidden;border:2px solid transparent;border-radius:4px;background:var(--muted);padding:0}
.gallery__thumb[aria-pressed="true"]{border-color:var(--primary)}
.gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 줄높이 1.5 = Next 상속값(preflight html). 패널 높이가 Next와 같아야 스티키 이동 거리(갤러리 높이 − 패널 높이)가 같다 */
.buy{min-width:0;line-height:1.5}
@media (min-width:768px){.buy{position:sticky;top:16px}}
.buy__maker{font-size:13px;font-weight:600;color:var(--muted-foreground)}
.buy__name{margin:6px 0 10px;font-family:var(--font-display);font-size:clamp(22px,3.2vw,30px);line-height:1.25;font-weight:800;letter-spacing:-.01em}
.buy__rating{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:16px}
.buy__stars{font-size:15px;letter-spacing:1px;color:var(--accent)}
.buy__rating-num{font-size:14px;font-weight:700}
.buy__review-link{font-size:13px;color:var(--muted-foreground)}
.buy__review-link:hover{color:var(--primary)}
.buy__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.buy__discount{font-size:clamp(22px,3vw,28px);font-weight:800;color:var(--destructive)}
.buy__selling{font-size:clamp(22px,3vw,28px);font-weight:800}
.buy__compare{font-size:15px;color:var(--muted-foreground)}
.buy__basis{margin-left:auto;font-size:13px;color:var(--muted-foreground)}
.buy__hint{margin:0;padding-top:16px;border-top:1px solid var(--border);font-size:13px;color:var(--muted-foreground)}
.opts{display:flex;flex-direction:column;gap:18px;padding:18px 0}
.opts__name{margin-bottom:10px;font-size:13px;font-weight:800}
.opts__values{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 16px;border:1.5px solid var(--border);border-radius:calc(var(--radius) - 4px);
  background:var(--card);font-size:14px;font-weight:600;color:var(--foreground)}
.opt[aria-pressed="true"]{border-color:var(--primary);background:var(--secondary);color:var(--primary)}
/* 품절 옵션값 — disabled가 아니라 고를 수 있다(품절 조합을 확정해야 품절 박스·재입고 알림 신청이 열린다, 4-c). 표시는 색+취소선+'품절' 태그(KWCAG).
   선택되면 .opt[aria-pressed="true"](특이도가 높다)가 테두리·배경·글자색을 선택 표시로 바꾸고, 점선·취소선·'품절' 태그는 남아 품절임이 계속 보인다 */
.opt--soldout{border-style:dashed;color:var(--muted-foreground);text-decoration:line-through}
.opt__soldout{font-size:11px;font-weight:700;text-decoration:none}
.confirmed{padding-top:16px;border-top:1px solid var(--border)}
.confirmed__chip{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:calc(var(--radius) - 4px);background:var(--secondary)}
.confirmed__label{font-size:14px;font-weight:700;color:var(--secondary-foreground)}
.confirmed__stock{margin:3px 0 0;font-size:12px;font-weight:700;color:var(--secondary-foreground)}
.confirmed__reset{position:relative;flex:0 0 auto;border:0;background:none;font-size:12px;font-weight:600;color:var(--secondary-foreground);text-decoration:underline;padding:0}
.confirmed__reset::after{content:"";position:absolute;inset:-14px -10px}
.soldout-box{margin-top:14px;padding:14px 16px;border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);background:var(--muted)}
.soldout-box__title{margin:0;font-size:14px;font-weight:700}
.soldout-box__desc{margin:4px 0 12px;font-size:13px;color:var(--muted-foreground)}
.soldout-box .btn{width:100%;min-height:48px}
.qty{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.qty__label{font-size:13px;font-weight:700}
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--border);border-radius:calc(var(--radius) - 6px);overflow:hidden;background:var(--card)}
.stepper__btn{width:44px;min-height:44px;border:0;background:var(--card);font-size:18px;color:var(--foreground)}
.stepper__btn:disabled{opacity:.35;cursor:not-allowed}
.stepper__input{width:52px;border:0;border-left:1px solid var(--border);border-right:1px solid var(--border);text-align:center;font:inherit;font-weight:700;background:var(--card)}
.stepper__val{display:inline-flex;align-items:center;justify-content:center;min-width:40px;font-weight:700}
.stepper--sm .stepper__btn{width:38px;min-height:40px}
.addons{margin-top:16px;padding:14px;border:1px dashed var(--border);border-radius:calc(var(--radius) - 4px)}
.addons__title{margin-bottom:8px;font-size:13px;font-weight:800}
.addons__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.addon{display:flex;align-items:center;justify-content:space-between;gap:10px}
.addon__info{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;font-size:13px}
.addon__name{font-weight:600}
.addon__price{color:var(--muted-foreground)}
.addon__soldout{font-size:11px;font-weight:700;color:var(--destructive)}
.total{display:flex;align-items:baseline;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid var(--border)}
.total__label{font-size:14px;font-weight:700}
.total__count{font-size:14px;font-weight:600;color:var(--muted-foreground)}
.total__amount{font-family:var(--font-display);font-size:clamp(22px,3vw,28px);font-weight:800}
.buy__cta{display:none;gap:10px;margin-top:20px}
@media (min-width:768px){.buy__cta{display:flex}}
.buy__cta .btn{flex:1}
.btn--xl{min-height:56px;font-size:16px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn--ghost{background:transparent;color:var(--muted-foreground)}
/* 탭 */
.ptabs{margin-top:clamp(32px,5vw,56px);padding-bottom:48px;scroll-margin-top:16px}
.ptabs__list{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--border)}
.ptabs__tab{flex:1 0 96px;min-height:54px;padding-inline:4px;border:0;border-bottom:2px solid transparent;background:none;font:inherit;font-size:15px;font-weight:700;white-space:nowrap;color:var(--muted-foreground)}
.ptabs__tab[aria-selected="true"]{color:var(--foreground);border-bottom-color:var(--primary)}
.ptabs__panel{padding:28px 0}
.ptabs__h2{margin:0 0 6px;font-size:14px;font-weight:800}
.ptabs__p{margin:0 0 16px;font-size:14px;line-height:1.7;color:var(--foreground)}
.desc__summary{margin:0;font-size:16px;line-height:1.8;font-weight:400}
.desc__html{font-size:16px;line-height:1.8}
.desc__html img{max-width:100%;height:auto}
.desc__images{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.desc__images img{width:100%;height:auto;border-radius:calc(var(--radius) - 4px)}
.desc__empty{color:var(--muted-foreground)}
/* 리뷰 */
.rv__summary{display:grid;gap:16px;padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
@media (min-width:768px){.rv__summary{grid-template-columns:auto 1fr auto;align-items:center}}
.rv__avg{display:flex;align-items:baseline;gap:8px}
.rv__avg-num{font-family:var(--font-display);font-size:34px;font-weight:800}
.rv__stars{color:var(--primary);letter-spacing:1px}   /* 별 색은 Next(text-primary)를 따라 마이페이지 리뷰 목록·작성 폼과 같은 토큰(검토 RV-PARITY-01) */
.rv__stars--sm{font-size:13px}
.rv__total{font-size:13px;color:var(--muted-foreground)}
.rv__bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;min-width:220px}
.rv__bar{display:grid;grid-template-columns:32px 1fr 28px;align-items:center;gap:8px;font-size:12px}
.rv__bar-track{height:8px;border-radius:4px;background:var(--muted);overflow:hidden}
.rv__bar-fill{display:block;height:100%;background:var(--primary)}
.rv__bar-count{text-align:right;color:var(--muted-foreground)}
.rv__filters{display:flex;gap:8px}
.rv__empty,.qna__empty{padding:32px 0;text-align:center;color:var(--muted-foreground)}
.rv__footer{margin:16px 0 0;text-align:center;font-size:12px;color:var(--muted-foreground)}   /* 작성 경로 안내(4-d) */
.rv__footer-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
.rv__list,.qna__list{list-style:none;margin:16px 0 0;padding:0}
.rv__item,.qna__item{padding:16px 0;border-bottom:1px solid var(--border)}
.rv__head,.qna__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px}
.rv__author{font-weight:600}
.rv__date,.qna__meta{color:var(--muted-foreground);font-size:12px}
.rv__option{margin-top:4px;font-size:12px;color:var(--muted-foreground)}
.rv__tags{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.rv__tag{padding:2px 8px;border-radius:999px;background:var(--secondary);color:var(--secondary-foreground);font-size:12px;font-weight:600}
.rv__content,.qna__content{margin:8px 0 0;font-size:14px;line-height:1.65;white-space:pre-wrap}
.rv__images{display:flex;gap:8px;margin-top:8px;overflow-x:auto}
.rv__images img{width:96px;height:96px;object-fit:cover;border-radius:6px;flex:0 0 auto}
.rv__reply,.qna__answer{margin-top:10px;padding:12px 14px;border-radius:calc(var(--radius) - 4px);background:var(--muted);font-size:13px}
.rv__reply-head,.qna__answer-head{margin-bottom:4px;font-weight:700}
.rv__reply p,.qna__answer p{margin:0;white-space:pre-wrap}
.pager--sm{margin-top:16px}
/* 문의 */
.qna__intro{margin:0;font-size:14px}
.qna__note{margin:6px 0 0;font-size:12px;color:var(--muted-foreground)}
.qna__status{padding:2px 8px;border-radius:4px;background:var(--muted);color:var(--muted-foreground);font-size:11px;font-weight:700}
.qna__status--done{background:var(--secondary);color:var(--secondary-foreground)}
.qna__title{font-weight:600}
/* 모바일 하단 구매바 */
.buybar{position:sticky;bottom:0;z-index:150;margin:24px -16px 0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--card)}
@media (min-width:768px){.buybar{display:none}}
.buybar__total{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.buybar__count{font-size:12px;font-weight:600;color:var(--muted-foreground)}
.buybar__amount{font-size:18px;font-weight:800}
.buybar__actions{display:flex;gap:8px}
.buybar__actions .btn{flex:1;min-height:50px}
.buybar__buy{flex:1.4 !important}
/* 토스트(단순) — 오버레이 층위의 맨 위(600 > 모달·바텀시트 500 > 드로어 400, Next ui/sheet.tsx 주석).
   드로어와 같은 400이던 시절엔 '나중에 그려진 쪽이 이긴다'는 DOM 순서에만 기대고 있었다.
   건너뛰기 링크(.skip-link, 1000)는 이 스케일 밖이다 — 오버레이가 떠도 접근성 진입점은 그 위에 남아야 한다 */
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(10px);max-width:calc(100% - 32px);padding:10px 14px;border-radius:999px;
  background:var(--foreground);color:var(--background);font-size:13px;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;z-index:600}
.toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
/* 상태 화면(404/500) */
.state{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
/* 좌우 거터는 감싸는 .container(16→40px) 몫이라 여기서 다시 주지 않는다 — 겹치면 32/56px가 된다.
   상하는 Next ui/empty-state.tsx:26 page 티어 값(pt-[clamp(30px,7cqw,80px)] pb-[clamp(40px,8cqw,96px)]) */
.state--page{padding-block:clamp(30px,7vw,80px) clamp(40px,8vw,96px)}
.state__code{font-size:12px;font-weight:800;letter-spacing:.08em;color:var(--muted-foreground)}
.state__icon{display:flex;align-items:center;justify-content:center;width:96px;height:96px;border-radius:50%;font-size:40px;background:var(--muted)}
.state__icon--brand{background:var(--secondary);color:var(--primary)}
.state__title{margin:4px 0 0;font-family:var(--font-display);font-size:clamp(22px,3.4vw,28px);font-weight:800}
.state__desc{margin:0;max-width:36em;color:var(--muted-foreground)}
.state__actions{display:flex;gap:10px;margin-top:8px}
.state__foot{margin:8px 0 0;font-size:12px;color:var(--muted-foreground)}

/* ===== 통합 검색 (search/index.html) ===== */
.search__title{margin:0;font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.01em}
.search__results{display:flex;flex-direction:column;gap:40px;margin-top:24px}
.search__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.search__heading{margin:0;font-family:var(--font-display);font-size:18px;font-weight:800}
.search__count{font-size:13px;color:var(--muted-foreground)}
.search__more{margin:16px 0 0;text-align:center;font-size:13px}
.search__more a{font-weight:600;color:var(--primary);text-underline-offset:2px}
.search__more a:hover{text-decoration:underline}
.doc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.doc{display:block;padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:inherit;text-decoration:none;transition:border-color .15s}
.doc:hover{border-color:var(--primary);text-decoration:none}
.doc:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.doc__kind{font-size:12px;font-weight:700;color:var(--primary)}
.doc__title{display:block;margin-top:2px;font-size:14px;font-weight:700}
.doc__excerpt{display:block;margin-top:4px;font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
.empty + .empty,.search .empty{margin-top:24px}

/* ===== 이야기 (story/index.html · story/detail.html) ===== */
.story__intro{margin-bottom:24px}
.story__title{margin:0 0 8px;font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3.6vw,32px);letter-spacing:-.01em}
.story__lead{margin:0;font-size:14px;line-height:1.7;color:var(--muted-foreground)}
/* 배경·아이콘은 .media-placeholder가 준다 — 여기는 자리(비율·라운드)만 정한다 */
.story__placeholder{width:100%;aspect-ratio:16/10;border-radius:var(--radius)}
/* 아래 둘은 .story__placeholder와 함께 쓰지 않고 단독으로 쓴다 —
   Thymeleaf 조각 인자에 클래스 두 개를 한 문자열로 넘기면 `__…__`가 전처리 표현식으로 해석돼 렌더가 깨진다(실측) */
.story__placeholder--hero{width:100%;aspect-ratio:16/7}   /* Next story/[slug]/page.tsx:45 aspect-[16/7] */
/* 목록 카드는 피처드(16/10)와 비율·라운드가 다르다 — Next story/page.tsx:65 aspect-[4/3] rounded-[calc(--radius - 2px)] */
.scard__placeholder{width:100%;aspect-ratio:4/3;border-radius:calc(var(--radius) - 2px)}
.story-meta{font-size:12px;color:var(--muted-foreground)}
.story-feat{display:grid;gap:16px;margin-bottom:28px;padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:inherit;text-decoration:none}
.story-feat:hover{text-decoration:none;border-color:var(--primary)}
.story-feat__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius)}
.story-feat__kicker{display:flex;align-items:center;gap:6px;margin-bottom:10px;font-size:12px;font-weight:700;color:var(--primary)}
.story-feat__dot{width:8px;height:8px;border-radius:50%;background:var(--primary)}
.story-feat__title{margin:0 0 10px;font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.8vw,26px);line-height:1.3;text-wrap:balance}
.story-feat__summary{margin:0 0 12px;font-size:14px;line-height:1.7;color:var(--muted-foreground)}
.story__chips{margin-bottom:20px}
.story__empty{margin:40px 0;text-align:center;font-size:14px;color:var(--muted-foreground)}
.story-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(1,1fr);gap:20px}
.scard{display:block;color:inherit;text-decoration:none}
.scard:hover{text-decoration:none}
.scard:hover .scard__title{color:var(--primary)}
.scard__img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:calc(var(--radius) - 2px)}
.scard__cat{margin-top:10px;font-size:12px;font-weight:700;color:var(--primary)}
.scard__title{margin-top:4px;font-size:16px;font-weight:800;line-height:1.4}
.scard__summary{margin:6px 0 8px;font-size:13px;line-height:1.6;color:var(--muted-foreground);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 전폭 히어로 — 본문이 바로 맞닿는 자리라 아래 경계선이 구조를 만든다(Next story/[slug]/page.tsx:45 border-b) */
.story-article__hero{border-bottom:1px solid var(--border)}
.story-article__hero-img{display:block;width:100%;aspect-ratio:16/7;object-fit:cover}
/* 이 화면만 .container 밖이라(히어로가 전폭이어야 한다) 좌우 거터를 스스로 갖는다 — 없으면 본문이 화면 끝에 붙는다.
   폭·여백은 Next story/[slug]/page.tsx:57 'max-w-[680px] px-4 pt-7 pb-14 md:px-10'과 같은 상자 모델(border-box)이다.
   목업 'PaRaSOL 이야기.dc.html' 아티클 뷰도 같은 값(L161 pad 28/56 + [data-r="pad"] 16→40px · L162 max-width 680px). */
.story-article__body{max-width:680px;margin:0 auto;padding:28px 16px 56px}
@media (min-width:768px){.story-article__body{padding-inline:40px}}
.story-article__back{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:13px;font-weight:600;color:var(--muted-foreground)}
.story-article__cat{margin-top:8px;font-size:13px;font-weight:700;color:var(--primary)}
.story-article__title{margin:6px 0 14px;font-family:var(--font-display);font-weight:800;font-size:clamp(24px,3.6vw,34px);line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.story-article__meta{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:16px;border-bottom:1px solid var(--border);font-size:13px;color:var(--muted-foreground)}
.story-article__content{padding:24px 0;font-size:16px;line-height:1.9}
.prose h2{margin:32px 0 14px;font-family:var(--font-display);font-weight:800;font-size:20px}
.prose p{margin:0 0 18px}
.prose blockquote{margin:24px 0;padding:4px 0 4px 16px;border-left:3px solid var(--primary);color:var(--muted-foreground)}
.prose img{max-width:100%;height:auto;border-radius:var(--radius)}
.prose figure{margin:24px 0}
.prose figcaption{margin-top:6px;font-size:12px;color:var(--muted-foreground);text-align:center}
/* 썸네일 64×64 · 라운드 --radius - 5px · 보더 — Next story/[slug]/page.tsx:110 'size-16 rounded-[calc(var(--radius)-5px)] border' */
.story-product{display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:14px;margin-top:8px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.story-product__img{display:block;width:64px;height:64px;object-fit:cover;border:1px solid var(--border);border-radius:calc(var(--radius) - 5px)}
.story-product .story__placeholder{width:64px;height:64px;aspect-ratio:auto;border:1px solid var(--border);border-radius:calc(var(--radius) - 5px)}
.story-product__kicker{font-size:12px;color:var(--muted-foreground)}
.story-product__name{margin-top:2px;font-size:14px;font-weight:700}
.story-others{margin-top:40px}
.story-others__title{margin:0 0 16px;font-family:var(--font-display);font-weight:800;font-size:18px}
.story-others__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
/* 썸네일 64×52 · 라운드 --radius - 6px · 보더 — Next story/[slug]/page.tsx:145 'h-[52px] w-16 rounded-[calc(var(--radius)-6px)] border' */
.story-others__item{display:grid;grid-template-columns:64px 1fr 16px;align-items:center;gap:12px;padding:10px;border-radius:var(--radius);color:inherit;text-decoration:none}
.story-others__item:hover{background:var(--muted);text-decoration:none}
.story-others__thumb{width:64px;height:52px;border:1px solid var(--border);border-radius:calc(var(--radius) - 6px)}
.story-others__cat{font-size:12px;color:var(--primary);font-weight:700}
.story-others__name{font-size:14px;font-weight:700}
@media (min-width:768px){.story-feat{grid-template-columns:1.2fr 1fr;align-items:center;padding:20px}.story-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.story-grid{grid-template-columns:repeat(3,1fr)}}

/* ===== 기획전 (promotion/index.html · promotion/detail.html) ===== */
.events__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:24px;line-height:32px}
/* 기획전 빈 상태는 제목 바로 아래, 테두리 없는 중앙 정렬 영역이다. */
.events .empty{gap:0;padding:80px 20px;border:0;background:transparent}
.events .empty__title{margin:0 0 8px;font-size:20px;line-height:1.3}
.events .empty__desc{margin:0;font-size:14px;line-height:1.6}
.events .empty__actions{margin-top:22px}
.events .empty__actions .btn{min-height:48px;padding-inline:20px;font-size:15px}
.event-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
.ecard{display:block;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:inherit;text-decoration:none}
.ecard:hover{text-decoration:none;border-color:var(--primary)}
/* 이미지 없는 자리는 상품 카드·이야기와 같은 muted다(Next events/page.tsx:48 bg-muted) — secondary면 이 카드만 연녹색으로 튄다 */
.ecard__media{position:relative;aspect-ratio:21/9;background:var(--muted)}
.ecard__picture{display:block;width:100%;height:100%}
.ecard__img{display:block;width:100%;height:100%;object-fit:cover}
/* 5px은 Next events/page.tsx:59도 리터럴(rounded-[5px])이다 — 토큰 파생으로 맞출 값이 없다 */
.ecard__badge{position:absolute;top:10px;left:10px;padding:2px 8px;border-radius:5px;background:var(--foreground);color:var(--background);font-size:12px;font-weight:700}
.ecard__body{padding:14px 16px}
.ecard__title{display:block;font-size:16px;font-weight:800}
.ecard__desc{margin:4px 0 0;font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.ecard__meta{margin:8px 0 0;font-size:12px;color:var(--muted-foreground)}
.event-hero{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--secondary);color:var(--secondary-foreground)}
.event-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.event-hero--image .event-hero__body{background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,.15));color:#fff}
.event-hero__body{position:relative;padding:28px 20px 24px}
.event-hero__period{margin:0 0 8px;font-size:13px;font-weight:700;opacity:.85}
.event-hero__title{margin:0 0 12px;font-family:var(--font-display);font-weight:800;font-size:clamp(28px,5.5vw,48px);line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.event-hero__desc{margin:0 0 16px;font-size:15px;line-height:1.7;max-width:560px}
.event-hero__state{margin:0;font-size:14px;font-weight:700}
.countdown__label{margin:0 0 6px;font-size:12px;font-weight:700;opacity:.85}
.countdown__pieces{display:flex;gap:8px}
.countdown__piece{display:flex;flex-direction:column;align-items:center;min-width:56px;padding:8px 6px;border-radius:var(--radius);background:rgba(255,255,255,.18)}
.countdown__piece b{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.countdown__piece span{font-size:11px;opacity:.85}
.coupon-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:14px 16px;border:1px dashed var(--primary);border-radius:var(--radius);background:var(--card)}
.coupon-strip__benefit{display:block;font-size:16px;font-weight:800;color:var(--primary)}
.coupon-strip__cond{display:block;margin-top:2px;font-size:13px;color:var(--muted-foreground)}
.event-products{margin-top:32px}
.event-grades{margin-top:40px}
.event-grades__title{margin:0 0 16px;font-family:var(--font-display);font-weight:800;font-size:clamp(18px,2.4vw,22px)}
.event-grades__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.event-grades__item{padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.event-grades__name{display:block;font-size:16px;font-weight:800}
.event-grades__req{margin:4px 0 0;font-size:13px;color:var(--muted-foreground)}
.event-grades__bonus{margin:8px 0 0;font-size:14px;font-weight:700;color:var(--primary)}
@media (min-width:768px){.event-list{grid-template-columns:repeat(2,1fr)}.event-hero__body{padding:48px 40px 40px}.event-grades__list{grid-template-columns:repeat(3,1fr)}}

/* ===== 약관 (terms/index.html) ===== */
/* 폭은 .container--doc(1040px, Next terms/page.tsx:65 max-w-[1040px]) — 화면 클래스는 폭을 갖지 않는다(본문 폭 규약) */
.terms__title{margin:0 0 16px;font-family:var(--font-display);font-weight:800;font-size:clamp(22px,3vw,28px)}
.pills{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.pills::-webkit-scrollbar{display:none}
.pill{display:inline-flex;align-items:center;flex-shrink:0;min-height:44px;padding:0 16px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--foreground);font-size:13px;font-weight:700;white-space:nowrap;text-decoration:none;transition:border-color .15s}
.pill:hover{border-color:var(--foreground);text-decoration:none}
.pill[aria-current]{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}
.terms__doc{margin-top:20px}
.terms__doc-title{margin:0 0 6px;font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.6vw,24px)}
.terms__meta{margin:0 0 20px;font-size:13px;color:var(--muted-foreground)}
.terms__content{font-size:15px;line-height:1.85;white-space:pre-line}

/* ===== 고객센터 허브 (support/index.html) ===== */
.support__title{margin:0 0 18px;font-family:var(--font-display);font-weight:800;font-size:22px}
.support-contact{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;gap:16px;padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
@media (min-width:768px){.support-contact{flex-direction:row;align-items:center;padding:24px}}
.support-contact__label{margin:0;font-size:13px;font-weight:700;color:var(--muted-foreground)}
.support-contact__phone{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--foreground)}
@media (min-width:768px){.support-contact__phone{min-height:0}}
.support-contact__hours{display:flex;flex-direction:column;margin-top:4px;font-size:13px;line-height:1.7;color:var(--muted-foreground)}
.support-contact > .btn{min-height:48px;font-size:15px}
.support-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.support-quick__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:96px;padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--foreground);font-size:14px;line-height:20px;font-weight:700;text-decoration:none}
.support-quick__item:hover{border-color:var(--primary);text-decoration:none}
.support-quick__item svg{width:24px;height:24px;color:var(--primary)}
.support-faq{margin-top:32px}
.support-faq__head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}
.support-faq__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:18px;line-height:28px}
.support-faq__more{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:600;color:var(--primary)}
@media (min-width:768px){.support-faq__more{min-height:0}}
.support-faq__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.support-faq__list li{border-bottom:1px solid var(--border)}
.support-faq__row{display:flex;align-items:center;gap:10px;min-height:54px;padding:12px 6px;color:var(--foreground);text-decoration:none}
.support-faq__row:hover{background:var(--muted);text-decoration:none}
.support-faq__q{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--primary)}
.support-faq__question{flex:1;font-size:15px;font-weight:600}
.support-faq__row svg{color:var(--muted-foreground)}

/* ===== FAQ (support/faq.html) ===== */
/* 폭은 .container--article(820px, Next support/faq/page.tsx max-w-[820px]) */
.faq__title{margin:0 0 18px;font-family:var(--font-display);font-weight:800;font-size:22px}
.faq__search{position:relative;margin-bottom:12px}
.faq__search-input{width:100%;height:46px;padding:0 44px 0 16px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:14px;color:var(--foreground)}
.faq__search-input:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.faq__search-icon{position:absolute;right:16px;top:50%;width:19px;height:19px;transform:translateY(-50%);color:var(--muted-foreground);pointer-events:none}
.faq__chips{margin-bottom:8px}
.chips .chip[aria-pressed="true"]{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}
.faq-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-item__trigger{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:18px 6px;border:0;background:none;text-align:left;color:var(--foreground);cursor:pointer;font:inherit}
.faq-item__trigger:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.faq-item__q{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--primary)}
.faq-item__question{flex:1;font-size:15px;font-weight:600}
.faq-item__cat{padding:2px 8px;border-radius:999px;background:var(--muted);font-size:11px;font-weight:700;color:var(--muted-foreground);white-space:nowrap}
.faq-item__chevron{width:18px;height:18px;color:var(--muted-foreground);transition:transform .2s}
.faq-item--open .faq-item__chevron{transform:rotate(180deg)}
.faq-item__answer{display:flex;gap:10px;padding:0 6px 18px 6px}
.faq-item__a{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--muted-foreground)}
.faq-item__answer-text{margin:0;font-size:14px;line-height:1.75;color:var(--muted-foreground);white-space:pre-line}
.empty--inline{padding:28px 16px}
@media (prefers-reduced-motion:reduce){.faq-item__chevron{transition:none}}

/* ===== 공지사항 (notice/index.html · notice/detail.html) ===== */
/* 폭은 .container--article(820px, Next notice/page.tsx:88 max-w-[820px]) */
.notice__title{margin:0 0 18px;font-family:var(--font-display);font-weight:800;font-size:22px}
.notice-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--foreground)}
.notice-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:56px;padding:18px 6px;border-bottom:1px solid var(--border);color:var(--foreground);text-decoration:none}
.notice-row:hover{background:var(--muted);text-decoration:none}
.notice-row__title{flex:1 1 240px;font-size:15px;font-weight:600}
.notice-row__date{font-size:13px;color:var(--muted-foreground)}
.notice-row__chevron{width:18px;height:18px;color:var(--muted-foreground)}
.notice-detail__back{display:inline-flex;align-items:center;gap:4px;min-height:44px;font-size:13px;color:var(--muted-foreground)}
.notice-detail__head{padding-bottom:16px;border-bottom:1px solid var(--border)}
.notice-detail__meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;color:var(--muted-foreground)}
.notice-detail__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.6vw,26px);line-height:1.35}
.notice-detail__body{padding:20px 0 8px}
.notice-detail__p{margin:0 0 16px;font-size:15px;line-height:1.85}
.notice-detail__foot{display:flex;justify-content:center;padding-top:8px}
@media (max-width:640px){.support-quick{grid-template-columns:repeat(3,1fr)}}

/* ===== 폼 공통 (1:1 문의 · 단체구매) ===== */
.form{display:flex;flex-direction:column;gap:18px;max-width:720px}
.form__grid{display:grid;grid-template-columns:1fr;gap:16px}
.form__error{margin:0;padding:12px 14px;border:1px solid var(--destructive);border-radius:var(--radius);background:var(--card);font-size:13px;font-weight:600;color:var(--destructive)}
.form__note{margin:0;font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.form__note--center{text-align:center}
.form__actions{display:flex;justify-content:flex-end;gap:10px;padding-top:16px;border-top:1px solid var(--border)}
.field{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;border:0;min-width:0}
.field__label{font-size:13px;font-weight:700}
.field__req{color:var(--primary)}
.field__input,.field__textarea{width:100%;padding:0 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);font:inherit;font-size:14px;color:var(--foreground)}
.field__input{height:46px}
.field__textarea{min-height:150px;padding:12px 14px;line-height:1.6;resize:vertical}
.field__input:focus-visible,.field__textarea:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.field__input[aria-invalid="true"],.field__textarea[aria-invalid="true"]{border-color:var(--destructive)}
.field__error{margin:0;font-size:12px;font-weight:600;color:var(--destructive)}
.field__hint{margin:0;font-size:12px;color:var(--muted-foreground)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg__input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}
.seg__item{position:relative;display:inline-flex}
.seg__label{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--card);font-size:13px;font-weight:600;cursor:pointer}
.seg__item:has(.seg__input:checked) .seg__label{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}
.seg__item:has(.seg__input:focus-visible) .seg__label{outline:2px solid var(--ring);outline-offset:2px}
.tcards{display:grid;grid-template-columns:1fr;gap:8px}
.tcard{position:relative;display:flex;cursor:pointer}
.tcard__body{display:flex;flex-direction:column;gap:2px;width:100%;min-height:54px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.tcard__name{font-size:14px;font-weight:700}
.tcard__summary{font-size:12px;color:var(--muted-foreground)}
.tcard:has(.seg__input:checked) .tcard__body{border-color:var(--primary);background:var(--secondary)}
.tcard:has(.seg__input:focus-visible) .tcard__body{outline:2px solid var(--ring);outline-offset:2px}
/* 고를 수 없는 카드(못 쓰는 쿠폰 등) — 라디오가 화면에 보이지 않으므로 카드 자체가 상태를 보여야 한다.
   색만으로 알리지 않는다: 카드 안에 이미 사유 문장이 있다(KWCAG) */
.tcard:has(.seg__input:disabled){cursor:not-allowed}
.tcard:has(.seg__input:disabled) .tcard__body{background:var(--muted);opacity:.65}
.check{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.check__input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
.check__box{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex-shrink:0;border:1.5px solid var(--border);border-radius:6px;background:var(--card)}
.check:has(.check__input:checked) .check__box{border-color:var(--primary);background:var(--primary)}
.check:has(.check__input:checked) .check__box::after{content:"";width:6px;height:11px;margin-top:-3px;border:solid var(--primary-foreground);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.check:has(.check__input:focus-visible) .check__box{outline:2px solid var(--ring);outline-offset:2px}
.check__label{font-size:14px;font-weight:600}
.check__link{font-size:13px;color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.done{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);text-align:center}
.done__icon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:var(--primary);color:var(--primary-foreground)}
.done__title{margin:8px 0 0;font-family:var(--font-display);font-weight:800;font-size:20px}
.done__title:focus{outline:none}
.done__desc{margin:0 0 8px;font-size:14px;color:var(--muted-foreground)}
.done__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--border)}
.tabs__tab{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;margin-bottom:-1px;border-bottom:2px solid transparent;font-size:14px;font-weight:700;color:var(--muted-foreground);text-decoration:none}
.tabs__tab:hover{color:var(--foreground);text-decoration:none}
.tabs__tab[aria-current]{color:var(--primary);border-bottom-color:var(--primary)}
/* 폭은 .container--form(720px, Next support/qna/page.tsx max-w-[720px]) */
.qna-page__title{margin:0 0 16px;font-family:var(--font-display);font-weight:800;font-size:22px}
.qna-history__notfound{margin:16px 0 0;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--muted);font-size:14px}
.qna-cards{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.qna-card{padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.qna-card__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.qna-card__status{padding:2px 6px;border:1px solid var(--border);border-radius:5px;font-size:11px;font-weight:700;color:var(--muted-foreground)}
.qna-card__status--done{border-color:var(--primary);color:var(--primary)}
.qna-card__title{flex:1;font-size:15px}
.qna-card__date{font-size:12px;color:var(--muted-foreground)}
.qna-card__content{margin:10px 0 0;font-size:14px;line-height:1.7;white-space:pre-line}
.qna-card__answer{margin-top:12px;padding:12px;border-radius:var(--radius);background:var(--muted)}
.qna-card__answer b{font-size:13px;color:var(--primary)}
.qna-card__answer p{margin:6px 0;font-size:14px;line-height:1.7;white-space:pre-line}
/* 폭은 .container--form(720px, Next bulk-inquiry/page.tsx:14 max-w-[720px]) */
.bulk__title{margin:0 0 8px;font-family:var(--font-display);font-weight:800;font-size:clamp(24px,4vw,36px);line-height:1.25}
.bulk__lead{margin:0 0 24px;font-size:14px;line-height:1.7;color:var(--muted-foreground)}
/* .tcards--stack: 3열로 쪼개지 않는 목록(배송지·쿠폰) — 카드가 2~3줄짜리라 3분할 칸에서 줄바꿈이 심해진다 */
@media (min-width:640px){.form__grid{grid-template-columns:1fr 1fr}.tcards{grid-template-columns:repeat(3,1fr)}.tcards--stack{grid-template-columns:1fr}}

/* ===== 메인 (main/index.html) ===== */
/* Next의 @container와 동일하게 스크롤바를 제외한 본문 폭으로 메인 레이아웃을 계산한다. */
.home{display:flex;flex-direction:column;width:100%;max-width:1280px;margin-inline:auto;container:home / inline-size}
.home .container{padding-inline:16px}
.home .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@container home (min-width:600px){.home .pgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@container home (min-width:1000px){.home .pgrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.hero-wrap{padding-top:16px}
.hero{position:relative;overflow:hidden;border-radius:var(--radius)}
.hero__track{display:flex;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.hero__slide{flex:0 0 100%;min-width:0}
/* 여백은 텍스트 칸만 갖는다 — 미디어 칸은 카드 모서리까지 꽉 찬다(Next hero-banner.tsx·목업 L218) */
.hero__inner{display:grid;grid-template-columns:1fr;background:var(--secondary);color:var(--secondary-foreground)}
/* 자식 간격은 요소별 마진이 아니라 칼럼의 gap 하나로 준다(Next 'flex flex-col justify-center gap-3.5') */
.hero__text{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:clamp(30px,5cqw,56px) 16px}
/* kicker는 맨 글자가 아니라 accent 24% 배경의 알약이다(목업 L208 · Next hero-banner.tsx).
   align-self: 텍스트 칸이 flex 컬럼이라 이게 없으면 알약이 칼럼 폭만큼 늘어난다 */
.hero__kicker{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;
  padding:5px 12px;border-radius:999px;background:color-mix(in oklch,var(--accent) 24%,transparent);
  color:var(--secondary-foreground);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.02em}
.hero__kicker svg path{fill:var(--accent)}
.hero__title{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(27px,5.4cqw,46px);line-height:1.1;letter-spacing:-.02em;white-space:pre-line}
.hero__subtitle{margin:0;max-width:44ch;font-size:clamp(14px,1.5cqw,17px);line-height:1.55;opacity:.82}
/* gap 14px 위에 6px을 더해 Next의 mt-1.5와 같은 20px을 만든다 */
.hero__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
/* 히어로 CTA는 공용 .btn(44px)보다 큰 전용 규격 — 목업 L216·Next Button size="md-48" */
.hero__actions .btn{min-height:48px;padding-inline:22px;border-radius:calc(var(--radius) - 2px);font-size:15px}
.hero__actions .btn--outline{padding-inline:20px}
/* 라운드는 바깥 .hero(overflow:hidden)가 담당 — 이미지에 다시 주면 이중 모서리가 된다 */
.hero__media{position:relative;min-height:clamp(200px,42cqw,420px);background:var(--muted)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 이미지 위에 얹히는 컨트롤이라 반투명 카드색 + 테두리다(목업 L227·L230 / Next hero-banner.tsx) */
.hero__arrow,.hero__pause{border:1px solid var(--border);background:color-mix(in oklch,var(--card) 90%,transparent);
  color:var(--foreground);box-shadow:0 2px 10px rgba(0,0,0,.1)}
.hero__arrow{position:absolute;top:50%;display:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;transform:translateY(-50%);cursor:pointer}
.hero__arrow--prev{left:12px}.hero__arrow--next{right:12px}
.hero__arrow:focus-visible,.hero__dot:focus-visible,.hero__pause:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
/* 시각 점(8px, 활성 24px 알약)은 ::before가 그리고, 버튼은 히트 영역만 갖는다.
   간격은 컨테이너 gap이 아니라 버튼의 좌우 padding으로 만든다(Next hero-banner.tsx:194도 같은 구조) —
   gap:7px + 버튼 폭 24px 조합이면 점 사이 여백이 8+7+8=23px로 벌어진다(1차 실측).

   [padding 8px = 히트영역 24×44px인 이유 — 여기만 Next(px-[3.5px], 15px)와 다르다]
   버튼 폭은 곧 인접 타깃의 피치다. 3.5px이면 15×44px가 되어 WCAG 2.5.8(AA, 24×24)에 미달하고,
   피치도 15px이라 '24px 원이 겹치지 않는다'는 Spacing 예외도 성립하지 않는다.
   Equivalent 예외(같은 기능의 44px 컨트롤)도 모바일에서는 못 쓴다 — .hero__arrow가 <768px에서 display:none이고
   스와이프 핸들러도 없어, 손가락으로 슬라이드를 고르는 유일한 수단이 이 점이다.
   화살표를 모바일에 노출하는 대안은 top:50%·left:12px이 세로 배치의 텍스트·CTA 위에 얹혀 탭을 가로막는다.
   그래서 시각 규격(점 8px·활성 24px 알약)은 원본 그대로 두고 히트영역만 24px로 넓혔다 —
   대가는 점 사이 시각 여백이 7px이 아니라 16px이라는 것이다(원본 대비 유일한 잔여 차이). */
.hero__dots{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:center}
.hero__dot{display:flex;align-items:flex-end;justify-content:center;height:44px;padding:0 8px 14px;border:0;background:none;cursor:pointer}
.hero__dot::before{content:"";width:8px;height:8px;border-radius:999px;
  border:1px solid color-mix(in oklch,var(--foreground) 25%,transparent);
  background:color-mix(in oklch,var(--card) 60%,transparent);transition:width .3s,background-color .3s}
.hero__dot[aria-current]::before{width:24px;border-color:var(--primary);background:var(--primary)}
.hero__pause{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;cursor:pointer}
.trust{padding:14px 0}
/* 4등분 그리드가 아니라 가운데 정렬 flex-wrap — 항목 수·문구 길이가 바뀌어도 가운데 모인다(목업 L240) */
.trust__list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 24px;padding:14px 18px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.trust__item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.trust__item svg{color:var(--primary);flex-shrink:0}
.shelf{padding:clamp(26px,5cqw,48px) 0}
.shelf__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.shelf__kicker{font-size:12px;line-height:16px;font-weight:800;letter-spacing:.06em;color:var(--primary)}
.shelf__title{margin:5px 0 0;font-family:var(--font-display);font-weight:800;font-size:clamp(21px,3cqw,29px);letter-spacing:-.01em}
.shelf__more{flex-shrink:0;font-size:13px;font-weight:600;color:var(--muted-foreground);white-space:nowrap}
.shelf__more:hover{color:var(--primary)}
.strips{padding:8px 0}
.strips__list{display:flex;flex-direction:column;gap:12px}
.strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:clamp(16px,3cqw,22px) clamp(18px,3cqw,28px);border-radius:var(--radius);color:inherit;text-decoration:none}
.strip:hover{text-decoration:none;filter:brightness(.97)}
.strip--accent{background:var(--accent);color:var(--accent-foreground)}
.strip--primary{background:var(--primary);color:var(--primary-foreground)}
.strip--foreground{background:var(--foreground);color:var(--background)}
.strip__body{display:flex;align-items:center;gap:14px}
.strip__title{font-family:var(--font-display);font-weight:800;font-size:clamp(16px,2.4cqw,22px)}
.strip__sub{margin-top:2px;font-size:13px;opacity:.85}
.strip__cta{font-weight:700;white-space:nowrap}
.makers{padding:clamp(26px,5cqw,48px) 0}
.makers__inner{display:grid;grid-template-columns:1fr;gap:20px;align-items:center}
/* 배경·아이콘은 .media-placeholder가 준다(Next page.tsx:150 'aspect-[16/11] overflow-hidden rounded-lg bg-muted') */
.makers__media{aspect-ratio:16/11;overflow:hidden;border-radius:var(--radius)}
/* 자식 간격은 요소별 마진이 아니라 칼럼의 gap 하나로 준다(Next page.tsx:152 'flex flex-col gap-3.5' = 14px).
   마진을 남긴 채 gap을 얹으면 간격이 두 번 더해진다 */
.makers__body{display:flex;flex-direction:column;gap:14px}
/* kicker는 진열 섹션(.shelf__kicker)과 같은 규격이다 — Next는 두 자리에 같은 클래스 문자열
   'text-xs font-extrabold tracking-[0.06em] text-primary'를 쓴다(page.tsx:153 MAKERS · :184 진열) */
.makers__kicker{font-size:12px;line-height:16px;font-weight:800;letter-spacing:.06em;color:var(--primary)}
.makers__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(22px,3.2cqw,31px);line-height:1.2;letter-spacing:-.01em;white-space:pre-line}
.makers__copy{margin:0;max-width:52ch;font-size:15px;line-height:1.75;color:var(--muted-foreground)}
/* CTA만 공용 .btn(44px·18px·15px 상속)과 규격이 다르다 — Next page.tsx:166 Button size="sm-46"
   (ui/button.tsx:68 min-h-[46px] rounded-sm px-4 text-[14px]). 반경은 .btn 기본값이 이미 rounded-sm과 같다.
   .btn 자체를 올리지 않는 이유: Next는 sm-44·sm-46·admin 계열이 갈려 있어 기본값을 올리면 무관한 버튼 22곳이 커진다 */
.makers__cta{min-height:46px;padding-inline:16px;font-size:14px}
/* 만든 사람들도 히어로와 같은 1.05fr .95fr — 이미지 칸이 넓은 쪽이다(목업 [data-r="story"] · Next page.tsx) */
@container home (min-width:768px){.home .container{padding-inline:40px}.hero__inner{grid-template-columns:1.05fr .95fr}.hero__text{padding-inline:40px}.hero__arrow{display:flex}
  .makers__inner{grid-template-columns:1.05fr .95fr;gap:44px}}
@media (prefers-reduced-motion:reduce){.hero__track{transition:none}}

/* ===== 로그인·회원가입 (auth/login.html) — 핸드오프 PaRaSOL 로그인.dc.html + Next auth-view ===== */
/* 상하 여백은 .page:has(> .auth)가 준다(32/56, ≥768px는 48/56) — 여기서 또 주면 위가 24+32=56px이 된다.
   좌우 거터만 스스로 갖는다: .container가 아니라 420px 폼 카드 자체가 상자라서(Next login/page.tsx:39도 md:px-10이 없다) */
.auth{width:100%;max-width:420px;margin-inline:auto;padding-inline:16px}
.auth__card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card);padding:clamp(20px,4vw,30px)}
/* 균등분할 2px 레일 탭 — 비활성도 레일 유지, 활성은 primary + aria-current */
.auth-tabs{display:flex;margin-bottom:20px}
.auth-tabs__tab{flex:1;display:inline-flex;align-items:center;justify-content:center;min-height:48px;border-bottom:2px solid var(--border);font-size:15px;font-weight:700;color:var(--muted-foreground);text-decoration:none}
.auth-tabs__tab:hover{color:var(--foreground);text-decoration:none}
.auth-tabs__tab[aria-current]{color:var(--foreground);border-bottom-color:var(--primary)}
.auth-panel{padding-top:16px}
.auth-panel__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:19px}
.auth-panel__desc{margin:6px 0 16px;font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.auth-form{display:flex;flex-direction:column;gap:12px}
/* 50px 인풋 변형(목업 .au-input) — 포커스는 링 그림자, 오류는 destructive 테두리 */
.field__input--auth{height:50px;border-color:var(--input);border-radius:calc(var(--radius) - 3px);font-size:15px}
.field__input--auth:focus-visible{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px color-mix(in oklch,var(--ring) 26%,transparent)}
.field__input--auth[aria-invalid="true"]{border-color:var(--destructive)}
.pw-field{position:relative}
.pw-field__input{padding-right:46px}
/* 38×38 실측 + ::after로 히트 영역 44px(KWCAG) */
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;background:none;border:none;color:var(--muted-foreground);cursor:pointer}
.pw-toggle::after{content:"";position:absolute;inset:-3px}
.pw-toggle:hover{color:var(--foreground)}
.form-alert{margin:0;font-size:13px;font-weight:600;color:var(--destructive)}
.btn--lg52{width:100%;min-height:52px;margin-top:2px;border-radius:calc(var(--radius) - 2px);font-size:16px;font-weight:800}
.btn--lg52.btn--primary{border-color:var(--primary)}
.btn--lg52.btn--primary:hover{filter:brightness(.94)}
.btn--lg52.btn--outline{font-size:15px;font-weight:700}
.btn--lg52.btn--outline:hover{background:var(--muted)}
/* 아이디·비밀번호 찾기(준비 중 안내) — 44px ghost 버튼 두 개 + 가운데 점. 누르면 아래 안내 문단·1:1 문의 링크(44px) */
.auth-find{display:flex;align-items:center;justify-content:center;margin-top:8px}
.auth-find__btn{min-height:44px;padding:0 10px;font-size:13px;font-weight:600}
.auth-find__dot{font-size:13px;color:var(--muted-foreground)}
.auth-find-notice{display:flex;flex-direction:column;align-items:center}
.auth-find-notice__text{margin:0;text-align:center;font-size:12px;line-height:1.6;color:var(--muted-foreground)}
.auth-link{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;font-size:13px;font-weight:700;color:var(--primary);text-decoration:underline;text-underline-offset:2px}
/* 소셜 로그인 블록(Phase 2-3) — 구분선 '소셜 계정으로' + 50px 버튼(9px 간격, <a>) + 안내문. Next auth-view LoginPanel 규격 */
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;font-size:12px;font-weight:600;color:var(--muted-foreground)}
.auth-divider__line{flex:1;height:1px;background:var(--border)}
.social-list{display:flex;flex-direction:column;gap:9px;list-style:none;margin:0;padding:0}
.social-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:50px;border:1px solid transparent;border-radius:calc(var(--radius) - 2px);font-size:15px;font-weight:700;text-decoration:none;cursor:pointer;transition:filter .15s}
.social-btn:hover{filter:brightness(.97);text-decoration:none}
/* 카카오·네이버 색은 각 사 공식 CI 규정값(목업·Next 리터럴 동일) — 리스킨 대상이 아니라 토큰화하지 않는다(RULE-11 브랜드 하드코딩 금지의 명시적 예외).
   구글은 별도 색 규정이 없어 토큰(card/border/foreground)을 쓴다 */
.social-btn--kakao{background:#FEE500;color:#191600}
.social-btn--naver{background:#03C75A;color:#fff}
.social-btn--google{background:var(--card);border-color:var(--border);color:var(--foreground)}
.social-btn--google:hover{filter:none;background:var(--muted)}
.social-hint{margin:12px 0 0;text-align:center;font-size:12px;line-height:1.6;color:var(--muted-foreground)}
.social-hint a{text-decoration:underline;text-underline-offset:2px}

/* ===== 마이페이지 (mypage/layout.html · profile.html 외 섹션 화면) — 핸드오프 PaRaSOL 마이페이지.dc.html + Next mypage-view ===== */
/* 하단 여백은 .page(56px = Next mypage pb-14) 몫 — 화면 클래스가 다시 주면 겹친다 */
/* 프로필 요약 카드: 52px 아바타(secondary 원) · 이름 17px · 이메일 13px · 우측 스탯(18px display) */
.mypage-summary{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:20px;padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.mypage-summary__avatar{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex-shrink:0;border-radius:999px;background:var(--secondary);color:var(--primary)}
.mypage-summary__body{flex:1;min-width:0}
.mypage-summary__name{font-size:17px;font-weight:700}
.mypage-summary__sub{margin:2px 0 0;font-size:13px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mypage-summary__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* 등급 뱃지(Next: primary 테두리·11px) — 배치가 정한 저장값. 보너스가 있을 때만 %가 붙는다 */
.mypage-summary__grade{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--primary);border-radius:999px;font-size:11px;font-weight:700;color:var(--primary)}
.mypage-summary__next{margin:2px 0 0;font-size:12px;color:var(--muted-foreground)}
.mypage-summary__next b{color:var(--foreground)}
/* 스탯은 섹션 링크(적립금 → /mypage/points, 쿠폰 → /mypage/coupons). 배치는 Next(mypage-view.tsx:2018~2039): 라벨 위 · 값 아래 · 우측 정렬 · 구분선 없음
   (목업 stat3의 값 위·라벨 아래·가운데·border-left가 아니다 — 정본 순서 Next > 설계 > 목업). 터치 44px */
.mypage-summary__stats{display:flex;gap:8px;margin:0 0 0 auto}
.mypage-summary__stat{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;min-height:44px;padding:4px 12px;border-radius:calc(var(--radius) - 4px);text-align:right;color:var(--foreground);text-decoration:none}
.mypage-summary__stat:hover{background:var(--muted);text-decoration:none}
.mypage-summary__stat-value{margin:0;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mypage-summary__stat-label{font-size:12px;color:var(--muted-foreground)}
/* 섹션 내비 — 모바일은 가로 스크롤 칩(활성 primary 배경, 목업 [data-chip]), 데스크톱은 220px 스티키 세로 목록(활성 secondary 배경, 목업 [data-navitem]) */
.mypage-grid{display:block}
.mypage-chips{display:flex;gap:8px;list-style:none;margin:0 -16px 16px;padding:0 16px 4px;overflow-x:auto;scrollbar-width:none}
.mypage-chips::-webkit-scrollbar{display:none}
.mypage-chips .chip[aria-current]{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}
.mypage-nav__list{display:none;list-style:none;margin:0;padding:0;flex-direction:column;gap:4px}
.mypage-nav__item{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:0 14px;border-radius:calc(var(--radius) - 4px);font-size:14px;font-weight:600;color:var(--foreground);text-decoration:none}
.mypage-nav__item:hover{background:var(--muted);text-decoration:none}
.mypage-nav__item[aria-current="page"]{background:var(--secondary);color:var(--secondary-foreground)}
@media (min-width:768px){
  .mypage-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}
  .mypage-nav{position:sticky;top:16px}
  .mypage-chips{display:none}
  .mypage-nav__list{display:flex}
}
.mypage-section{min-width:0}
.mypage-section__title{margin:0 0 14px;font-family:var(--font-display);font-weight:800;font-size:20px;outline:none}
.mypage-section__intro{margin:0;font-size:14px;line-height:1.7;color:var(--muted-foreground)}
.mypage-section__stack{display:flex;flex-direction:column;gap:24px}
/* 로그인 수단 카드(Next LoginMethodsCard): 행 56px, 아이디 행 열쇠 아이콘, 소셜 행 18px 상태 점(연동 시 primary) + 텍스트 병기 */
.login-methods{padding:16px 20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.login-methods__title{margin:0;font-size:15px;font-weight:700}
.login-methods__desc{margin:4px 0 0;font-size:12.5px;color:var(--muted-foreground)}
.login-methods__alert{margin-top:10px}
.login-methods__list{list-style:none;margin:8px 0 0;padding:0}
.login-methods__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:56px;padding:10px 0}
.login-methods__row + .login-methods__row{border-top:1px solid var(--border)}
.login-methods__icon{flex-shrink:0;color:var(--muted-foreground)}
.login-methods__dot{width:18px;height:18px;flex-shrink:0;border:1px solid var(--border);border-radius:50%;background:var(--muted)}
.login-methods__dot--linked{border-color:var(--primary);background:var(--primary)}
.login-methods__body{flex:1;min-width:0}
.login-methods__name{font-size:14px;font-weight:600}
.login-methods__state{font-size:12.5px;color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-methods__blocked{flex-basis:100%;margin:0;font-size:12px;color:var(--muted-foreground)}
.btn--sm44{padding:0 18px;font-size:13px;font-weight:700;text-decoration:none}
.btn--sm44:hover{text-decoration:none}
.btn--md48{min-height:48px;font-size:15px;font-weight:700;text-decoration:none}
.btn--md48:hover{text-decoration:none}
.btn--danger-hover{color:var(--muted-foreground)}
.btn--danger-hover:hover{border-color:var(--destructive);color:var(--destructive);background:var(--card)}
.btn--destructive{border-color:var(--destructive);background:var(--destructive);color:var(--destructive-foreground)}
.btn--destructive:hover{filter:brightness(.94)}
/* 비밀번호 설정/변경 인라인 패널(Next LocalCredentialDialog 360px 규격을 카드 안에) · 연동 해제 확인(오버레이모음 확인 모달 규격, 인라인) */
.credential-panel,.confirm-panel{margin-top:14px;padding:20px;max-width:400px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);animation:fadeIn .15s ease}
.credential-panel__title,.confirm-panel__title{margin:0 0 6px;font-family:var(--font-display);font-weight:800;font-size:18px;outline:none}
.credential-panel__desc,.confirm-panel__desc{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--muted-foreground)}
.credential-form{gap:14px;max-width:none}
.credential-panel__actions,.confirm-panel__actions{display:flex;gap:10px;margin:6px 0 0}
.credential-panel__actions .btn,.confirm-panel__actions .btn{flex:1;border-radius:calc(var(--radius) - 3px)}
.confirm-panel__icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:14px;border-radius:50%;background:color-mix(in oklch,var(--destructive) 12%,var(--card));color:var(--destructive)}
/* 기본 정보 폼 — 420px, 하단 구분선 위 '저장' */
.profile-form{max-width:420px}

/* ===== 회원가입 위저드 (auth/signup.html · auth/signup-complete.html) — 핸드오프 PaRaSOL 로그인.dc.html 가입 스텝 + Next SignupWizard ===== */
/* 스텝 인디케이터: 26px 점 + 3px 연결바 + 11px 라벨(장식은 aria-hidden, 상태는 라벨 + aria-current) */
.steps{display:flex;list-style:none;margin:0 0 20px;padding:0}
.steps__item{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px}
.steps__track{display:flex;align-items:center;width:100%}
.steps__bar{flex:1;height:3px;background:var(--border)}
.steps__bar--done{background:var(--primary)}
.steps__bar--edge{background:transparent}
.steps__dot{display:flex;align-items:center;justify-content:center;width:26px;height:26px;flex-shrink:0;border:1px solid var(--border);border-radius:50%;background:var(--card);font-size:12px;font-weight:800;color:var(--muted-foreground)}
.steps__dot--reached{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}
.steps__label{font-size:11px;font-weight:700;color:var(--muted-foreground)}
.steps__label--current{color:var(--primary)}
/* 스텝 패널 — JS가 hidden으로 전환(숨김은 상단 공용 [hidden] 규칙) */
.signup-form{display:flex;flex-direction:column;gap:12px}
.step-panel{animation:fadeIn .15s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.step-title{margin:0;font-family:var(--font-display);font-weight:800;font-size:19px;outline:none}
.step-desc{margin:6px 0 0;font-size:13px;color:var(--muted-foreground)}
.step-next{margin-top:16px}
/* 약관: 전체 동의(52px secondary 띠, 24px 체크) + 항목 행(44px, [필수]/[선택] 색+텍스트) */
.agree-all{margin-top:16px;min-height:52px;padding:0 14px;border-radius:calc(var(--radius) - 3px);background:var(--secondary);color:var(--secondary-foreground)}
.agree-all__label{font-size:15px;font-weight:800}
.check__box--lg{width:24px;height:24px}
.agree-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.agree-list__row{display:flex;align-items:center;gap:8px}
.agree-item{flex:1;min-height:44px;padding:0 4px}
.agree-tag{flex-shrink:0;font-size:12px;font-weight:700}
.agree-tag--required{color:var(--primary)}
.agree-tag--optional{color:var(--muted-foreground)}
.agree-label{font-size:13px;font-weight:400}
.agree-item__link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.agree-error{margin-top:8px}
/* 계정 정보 */
.signup-fields{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.phone-warning{border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:var(--muted);padding:14px 16px}
.phone-warning__title{margin:0;font-size:13px;font-weight:700;color:var(--foreground)}
.phone-warning__desc{margin:4px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted-foreground)}
.phone-warning__link{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:13px;font-weight:700;color:var(--primary);text-decoration:underline;text-underline-offset:2px}
.wizard-actions{display:flex;gap:8px;margin-top:4px}
.wizard-actions .btn--lg52{width:auto;margin-top:0}
.wizard-actions__prev{flex:1}
.wizard-actions__submit{flex:1.6}
/* 완료: 카드 안 무테두리, 70px secondary 원 + 21px 제목 */
.signup-done{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 0;text-align:center}
.signup-done__icon{display:flex;align-items:center;justify-content:center;width:70px;height:70px;border-radius:50%;background:var(--secondary);color:var(--primary)}
.signup-done__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:21px;outline:none}
.signup-done__desc{margin:0;font-size:14px;line-height:1.6;color:var(--muted-foreground)}
.signup-done .btn--lg52{margin-top:8px}

/* ===== 장바구니 (cart/index.html) ===== */
/* 상하 여백은 .page:has(> .cart)가 준다(이중 계산 방지) */
.cart__title{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.6vw,24px);letter-spacing:-.01em}
.cart-steps{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;padding-bottom:14px;border-bottom:1px solid var(--border);font-size:13px}
.cart-steps__current{font-weight:800;color:var(--primary)}
.cart-steps__dash{color:var(--border)}
.cart-steps__next{color:var(--muted-foreground)}
/* 빈 카트 — 404/500보다 여백이 넓고 아이콘이 작은 섹션 티어 */
.state--section{padding:80px 20px}
.state__icon--sm{width:88px;height:88px}
.state__title--sm{font-size:20px}
.cart-empty__cta{min-height:48px;padding-inline:22px}
/* 목록 + 요약 2열 */
.cart-grid{display:block}
@media (min-width:768px){.cart-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}}
@media (min-width:1040px){.cart-grid{grid-template-columns:minmax(0,1fr) 372px;gap:40px}}
.cart-list{min-width:0}
.cart-list__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:2px solid var(--foreground)}
.cart-list__all{gap:9px}
.cart-list__all .check__label{font-size:14px;font-weight:700}
.cart-list__all:has(.check__input:disabled){opacity:.4;cursor:not-allowed}
.cart-list__count{color:var(--muted-foreground);font-weight:600}
.cart-list__remove{padding:0 12px;font-size:13px;font-weight:600;color:var(--muted-foreground)}
.cart-list__remove:hover{border-color:var(--foreground);color:var(--foreground)}
/* 품목 행 */
.cart-rows{list-style:none;margin:0;padding:0}
.cart-row{display:flex;align-items:flex-start;gap:12px;padding:18px 0;border-bottom:1px solid var(--border)}
.cart-row__check{flex-shrink:0;margin-top:22px}
.cart-row__check:has(.check__input:disabled){opacity:.4;cursor:not-allowed}
.cart-row__thumb{position:relative;width:88px;height:88px;flex-shrink:0;overflow:hidden;border:1px solid var(--border);border-radius:calc(var(--radius) - 3px);background:var(--muted)}
.cart-row__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cart-row__overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in oklch,var(--background) 55%,transparent)}
.cart-row__tag{padding:3px 10px;border-radius:999px;background:var(--foreground);color:var(--background);font-size:12px;font-weight:700}
.cart-row__body{display:flex;flex:1;flex-direction:column;gap:7px;min-width:0}
.cart-row__top{display:flex;align-items:flex-start;gap:8px}
.cart-row__names{flex:1;min-width:0}
.cart-row__maker{font-size:12px;color:var(--muted-foreground)}
.cart-row__name{display:block;margin-top:2px;font-size:15px;font-weight:600;line-height:1.35}
.cart-row__name:hover{color:var(--primary)}
.cart-row__remove{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;background:transparent;color:var(--muted-foreground)}
.cart-row__remove::after{content:"";position:absolute;inset:-6px}
.cart-row__remove:hover{color:var(--destructive)}
.cart-row__meta{padding:8px 11px;border-radius:calc(var(--radius) - 5px);background:var(--muted);font-size:12px;line-height:1.6;color:var(--muted-foreground)}
.cart-row__meta-warn{font-weight:700;color:var(--destructive)}
.cart-row__warn{margin:0;font-size:13px;font-weight:700;color:var(--destructive)}
.cart-row__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:4px}
.cart-row__unavail{font-size:13px;font-weight:700;color:var(--destructive)}
.cart-row__total{margin-left:auto;text-align:right;font-size:17px;font-weight:800}
/* 요청 중에도 포커스를 잃지 않도록 hard disabled 대신 aria-disabled를 쓴다 */
.cart-stepper .stepper__btn[aria-disabled="true"]{opacity:.35;cursor:not-allowed}
.stepper__val--cart{min-width:44px;height:40px;border-left:1px solid var(--border);border-right:1px solid var(--border);font-size:14px}
.cart-continue{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;padding-top:16px;font-size:14px;font-weight:600;color:var(--muted-foreground)}
.cart-continue:hover{color:var(--foreground);text-decoration:none}
/* 결제 예정 금액 */
.cart-summary{margin-top:28px}
@media (min-width:768px){.cart-summary{position:sticky;top:16px;margin-top:0;align-self:start}}
.cart-summary__card{padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.cart-summary__title{margin:0 0 16px;font-family:var(--font-display);font-size:17px;font-weight:800}
.cart-summary__rows{display:flex;flex-direction:column;gap:10px;margin:0;font-size:14px}
.cart-summary__row{display:flex;justify-content:space-between;gap:10px}
.cart-summary__row dt{color:var(--muted-foreground)}
.cart-summary__row dd{margin:0;font-weight:600}
.cart-summary__free{margin:12px 0 0;padding:10px 12px;border-radius:calc(var(--radius) - 5px);background:var(--secondary);color:var(--secondary-foreground);font-size:12px;font-weight:700;line-height:1.5}
.cart-summary__total{display:flex;align-items:baseline;justify-content:space-between;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.cart-summary__total-label{font-size:15px;font-weight:800}
.cart-summary__total-amount{font-family:var(--font-display);font-size:clamp(22px,3vw,26px);font-weight:800}
.cart-summary__cta{display:none;margin-top:18px}
@media (min-width:768px){.cart-summary__cta{display:block}}
.cart-summary__cta .btn{width:100%;min-height:54px;border-radius:calc(var(--radius) - 2px);font-size:16px;font-weight:800}
/* 모바일 하단 결제 바(.buybar 재사용) */
.cart-bar{margin-top:16px}
.cart-bar__cta{width:100%;min-height:52px;border-radius:calc(var(--radius) - 3px);font-size:16px;font-weight:800}
/* 헤더 장바구니 뱃지 — 값은 라인 수(수량 합이 아니다), 0이면 감춘다 */
.site-header__icon--cart{position:relative}
.count-badge{position:absolute;top:4px;right:2px;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--destructive);color:var(--destructive-foreground);font-size:11px;font-weight:700;line-height:1}
/* 토스트 실행취소 — .toast는 pointer-events:none이라 버튼만 다시 켠다 */
.toast__undo{position:relative;margin-left:8px;padding:0;border:0;background:transparent;color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px;pointer-events:auto}
.toast__undo::after{content:"";position:absolute;inset:-14px -10px}
.toast__undo:focus-visible{outline:2px solid var(--background);outline-offset:2px}

/* ===== 소셜 간편가입 위저드 (auth/social-signup.html) — Next social-signup-view.tsx. 카드·탭 없이 보이는 h1 + 3칸 인디케이터 + 단계 패널.
   약관·정보·완료 패널은 로컬 가입 클래스(.steps/.step-panel/.agree-*/.signup-fields/.wizard-actions/.signup-done)를 그대로 쓴다 ===== */
.auth__title{margin:0 0 16px;font-family:var(--font-display);font-weight:800;font-size:clamp(22px,4vw,26px);line-height:1.3}
.auth--social .auth-panel{padding-top:0}
/* "1단계 / 2단계" — 제목 위 작은 primary 카운트(소셜 전용) */
.step-count{margin:0 0 4px;font-size:12px;font-weight:700;color:var(--primary)}
.wizard-actions__prev.btn{display:inline-flex;text-decoration:none}
/* 기존 계정 확인 — 연결 수단 문장(라벨은 굵게) → 인라인 로그인 → 연결된 소셜 버튼 → 고객센터 → 새 계정(상단 구분선) */
.existing__desc{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.existing__desc b{font-weight:700;color:var(--foreground)}
.existing__note{margin:8px 0 0;font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.existing-login{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.existing__social{margin-top:16px}
.existing__alert{margin-top:16px}
.existing__help{display:flex;flex-direction:column;align-items:flex-start;margin-top:16px}
.existing__help-text{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted-foreground)}
.existing__new{margin-top:20px;padding-top:16px;border-top:1px solid var(--border)}
.existing__new .btn--lg52{margin-top:12px}

/* ===== 주문완료 (order/complete.html) — Next order-complete-view.tsx. 폭은 .container--order-done(760px), 상하 여백은 .page:has(> .order-done).
   카드 규격은 장바구니 요약 카드와 같은 상자(1px border + var(--radius) + 20px padding)를 쓴다 ===== */
.order-done__title{margin:0;font-family:var(--font-display);font-size:clamp(20px,2.6vw,24px);font-weight:800}
.order-done__body{display:flex;flex-direction:column;gap:24px;margin-top:24px}

/* 헤드라인 3분기 */
.order-done__head{text-align:center}
.order-done__headline{margin:0;font-family:var(--font-display);font-size:clamp(20px,3vw,26px);font-weight:800}
.order-done__lead{margin:8px 0 0;font-size:14px;color:var(--muted-foreground)}
.order-done__no{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding:10px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.order-done__no-label{font-size:13px;color:var(--muted-foreground)}
.order-done__no-value{font-family:var(--font-display);font-size:16px;font-weight:800}
.order-done__status{margin:8px 0 0;font-size:13px}
.order-done__status-label{color:var(--muted-foreground)}
.order-done__status-value{font-weight:700}

/* 카드(입금 계좌·결제 정보·배송지·주문 상품·가입 유도) */
.order-done__card{padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.order-done__card--vbank{border-color:var(--primary);background:var(--secondary)}
.order-done__card--invite{background:var(--muted)}
.order-done__card-title{margin:0;font-family:var(--font-display);font-size:16px;font-weight:800}
.order-done__card-title--vbank{color:var(--primary)}
.order-done__count{font-size:13px;font-weight:400;color:var(--muted-foreground)}

.order-done__rows{display:flex;flex-direction:column;gap:8px;margin:12px 0 0;font-size:13px}
.order-done__rows--paymeta{padding-bottom:12px;border-bottom:1px solid var(--border)}
.order-done__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.order-done__row dt{color:var(--muted-foreground)}
.order-done__row dd{margin:0;font-weight:700}
/* 할인 행은 색만이 아니라 '-' 부호로도 구분된다(KWCAG — 색만으로 정보 전달 금지) */
.order-done__row-minus{color:var(--destructive)}
.order-done__row-strong{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--primary)}
.order-done__account{display:flex;align-items:center;gap:8px}
.order-done__account-no{font-family:var(--font-display);font-size:16px;font-weight:800}
.order-done__note{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted-foreground)}

.order-done__total{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.order-done__total-label{font-size:14px;font-weight:700}
.order-done__total-amount{font-family:var(--font-display);font-size:18px;font-weight:800}

/* 배송지 */
.order-done__recipient{margin:12px 0 0;font-size:14px;font-weight:700}
.order-done__address{margin:4px 0 0;font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.order-done__memo{margin:8px 0 0;font-size:13px;color:var(--muted-foreground)}

/* 주문 상품(스냅샷) */
.order-done__items{display:flex;flex-direction:column;gap:12px;margin:12px 0 0;padding:0;list-style:none}
.order-done__item{display:flex;align-items:flex-start;gap:12px}
.order-done__thumb{position:relative;flex:0 0 64px;width:64px;height:64px;overflow:hidden;border:1px solid var(--border);border-radius:calc(var(--radius) - 4px)}
.order-done__img{width:100%;height:100%;object-fit:cover}
.order-done__item-body{flex:1 1 auto;min-width:0}
.order-done__maker{margin:0;font-size:12px;color:var(--muted-foreground)}
.order-done__name{margin:0;font-size:14px;font-weight:700}
.order-done__meta{margin:0;font-size:13px;color:var(--muted-foreground)}
.order-done__addon{margin:0;font-size:12px;color:var(--muted-foreground)}
.order-done__item-total{flex:0 0 auto;font-size:14px;font-weight:700}

.order-done__invite-cta{margin-top:12px}
.order-done__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}

/* ===== 체크아웃 (checkout/index.html + 조각 5종) — Next checkout-view.tsx / 목업 'PaRaSOL 체크아웃.dc.html'.
   폭은 .container(1280px) 그대로, 상하 여백은 .page:has(> .checkout). 2열 구간과 요약 카드 폭은 목업 값(344 → 376). ===== */
.checkout__title{margin:0;font-family:var(--font-display);font-size:clamp(20px,2.6vw,24px);font-weight:800}
.checkout__grid{display:block;margin-top:20px}
@media (min-width:768px){.checkout__grid{display:grid;grid-template-columns:minmax(0,1fr) 344px;gap:32px;align-items:start}}
@media (min-width:1040px){.checkout__grid{grid-template-columns:minmax(0,1fr) 376px;gap:40px}}
.checkout__main{display:flex;flex-direction:column;gap:24px;min-width:0}

/* 영역 — 첫 영역만 구분선이 없다(제목 바로 아래라 선이 겹친다) */
.checkout-sec{padding-top:20px;border-top:1px solid var(--border)}
.checkout-sec--first{padding-top:0;border-top:0}
.checkout-sec__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px}
.checkout-sec__title{margin:0 0 12px;font-family:var(--font-display);font-size:18px;font-weight:800}
.checkout-sec__head .checkout-sec__title{margin-bottom:0}
.checkout-sec__head + .checkout-fields,.checkout-sec__head + .tcards,.checkout-sec__head ~ .checkout-items{margin-top:12px}
.checkout-sec__aside{margin:0;font-size:13px;color:var(--muted-foreground)}
.checkout-mode{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.checkout-mode__current{align-self:center}
.checkout-guest-note{margin:12px 0 0;padding:12px 14px;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);
  background:var(--secondary);color:var(--secondary-foreground);font-size:13px;line-height:1.7}

/* 입력 */
.checkout-fields{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.checkout-zip{display:flex;gap:8px}
.checkout-zip__input{max-width:140px}
/* 우편번호 레이어 — 평소엔 비어 있어 높이가 0이다(선택하면 스스로 비운다) */
.checkout-postcode{margin-top:8px;overflow:hidden;border-radius:calc(var(--radius) - 4px)}
.checkout-postcode:not(:empty){height:420px;border:1px solid var(--border)}
.checkout-addresses{margin-bottom:14px}
.checkout-address__default{margin-left:6px;border:1px solid var(--primary);background:transparent;color:var(--primary)}
.checkout-memo{display:block;margin-top:12px}
.checkout-memo__select{width:100%;height:46px}

/* 주문 상품 */
.checkout-items{display:flex;flex-direction:column;gap:12px;margin:12px 0 0;padding:0;list-style:none}
.checkout-item{display:flex;align-items:flex-start;gap:12px}
.checkout-item__thumb{position:relative;flex:0 0 64px;width:64px;height:64px;overflow:hidden;
  border:1px solid var(--border);border-radius:calc(var(--radius) - 4px)}
.checkout-item__img{width:100%;height:100%;object-fit:cover}
.checkout-item__body{flex:1 1 auto;min-width:0}
.checkout-item__maker{margin:0;font-size:12px;color:var(--muted-foreground)}
.checkout-item__name{margin:0;font-size:14px;font-weight:700}
.checkout-item__meta{margin:0;font-size:13px;color:var(--muted-foreground)}
.checkout-item__total{flex:0 0 auto;font-size:14px;font-weight:700}

/* 적립금 */
.checkout-point{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:12px}
.checkout-point__input{flex:1 1 160px;min-width:160px}
.checkout-point__rule{margin:8px 0 0;font-size:12px;line-height:1.6;color:var(--muted-foreground)}
.checkout-point__error{margin:8px 0 0;font-size:12px;font-weight:600;color:var(--destructive)}
/* 비어 있으면 자리만 접는다 — display:none으로 감춘 라이브 영역에 글자가 들어가면 일부 보조기기가 알림을 놓친다 */
.checkout-point__error:empty{margin:0}

/* 결제수단 */
.checkout-ready{margin-top:12px;padding:24px 16px;border:1px dashed var(--border);border-radius:calc(var(--radius) - 2px);
  text-align:center;font-size:13px;color:var(--muted-foreground)}
.checkout-widget-agreement{margin-top:12px}
.checkout-pending-order{margin:12px 0 0;font-size:13px;color:var(--muted-foreground)}
.checkout-pending-order:empty{display:none}

/* 요약 카드 — DOM에 하나뿐이다(§10.6). 좁은 화면에서는 아래로 흐르고 CTA가 하단에 붙는다 */
.checkout-summary{margin-top:28px}
@media (min-width:768px){.checkout-summary{position:sticky;top:16px;margin-top:0;align-self:start}}
.checkout-summary__card{padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.checkout-summary__title{margin:0 0 14px;font-family:var(--font-display);font-size:17px;font-weight:800}
.checkout-summary__rows{display:flex;flex-direction:column;gap:10px;margin:0;font-size:13px}
.checkout-summary__row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.checkout-summary__row dt{color:var(--muted-foreground)}
.checkout-summary__row dd{margin:0;font-weight:700}
/* 할인 행은 색만이 아니라 '-' 부호로도 구분된다(KWCAG — 색만으로 정보 전달 금지) */
.checkout-summary__row-minus{color:var(--destructive)}
.checkout-summary__total{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}
.checkout-summary__total-label{font-size:14px;font-weight:700}
.checkout-summary__total-amount{font-family:var(--font-display);font-size:18px;font-weight:800}
.checkout-summary__alert{margin:12px 0 0;padding:10px 12px;border:1px solid var(--destructive);
  border-radius:calc(var(--radius) - 3px);font-size:13px;font-weight:600;color:var(--destructive)}
.checkout-summary__reason{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--muted-foreground)}
/* 비어 있으면 자리만 접는다(높이 0) — display:none이면 라이브 영역이 사라졌다 나타나며 알림이 묻힌다 */
.checkout-summary__reason:empty{margin:0}
.checkout-summary__cta{margin-top:12px}

/* 결제 흐름 축약 헤더(layout/checkout.html) */
.site-header--flow .site-header__flow{display:flex;align-items:center;gap:12px;padding-block:14px}
.site-header__flow-label{font-size:14px;font-weight:700;color:var(--muted-foreground)}

/* ===== 보유 쿠폰 (mypage/coupons.html) — Next mypage-view.tsx CouponsSection ===== */
.mycoupons{display:flex;flex-direction:column;gap:14px}
.mycoupons__summary{margin:0;font-size:13px;color:var(--muted-foreground)}
.mycoupons__summary b{color:var(--foreground)}
.mycoupons__list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.mycoupon{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:16px;
  border:1px solid var(--primary);border-radius:var(--radius);background:var(--card)}
/* 지난 쿠폰은 흐리게 두되 상태를 글자로도 알린다(KWCAG) */
.mycoupon--past{border-color:var(--border);background:var(--muted)}
.mycoupon__body{flex:1 1 auto;min-width:0}
.mycoupon__name{display:block;font-size:14px;font-weight:700}
.mycoupon--past .mycoupon__name{color:var(--muted-foreground)}
.mycoupon__cond{display:block;margin-top:2px;font-size:12px;color:var(--muted-foreground)}
.mycoupon__side{flex:0 0 auto;text-align:right}
.mycoupon__benefit{display:block;font-family:var(--font-display);font-size:15px;font-weight:800;color:var(--primary)}
.mycoupon--past .mycoupon__benefit{color:var(--muted-foreground)}
.mycoupon__status{font-size:12px;color:var(--muted-foreground)}

/* ===== 적립금 내역 (mypage/points.html) — Next mypage-view.tsx PointsSection · 핸드오프 적립금내역.dc.html(보유 카드 → 소멸 안내 → 내역) ===== */
.points{display:flex;flex-direction:column;gap:16px}
.points-summary{padding:20px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.points-summary__label{margin:0;font-size:13px;color:var(--muted-foreground)}
.points-summary__value{display:block;margin-top:4px;font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--primary)}
.points-summary__note{margin:4px 0 0;font-size:13px;color:var(--muted-foreground)}
/* 소멸 예정은 조용히 두지 않는다 — 강조 상자(색 + 문장) */
.points-summary__expiring{margin:12px 0 0;padding:12px 14px;border:1px solid var(--primary);border-radius:calc(var(--radius) - 2px);background:var(--secondary);color:var(--secondary-foreground);font-size:13px;font-weight:600}
.points-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.points-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.points-row__body{flex:1 1 auto;min-width:0}
.points-row__title{margin:0;font-size:14px;font-weight:600}
.points-row__meta{margin:2px 0 0;font-size:12px;color:var(--muted-foreground)}
.points-row__side{flex:0 0 auto;text-align:right}
/* 부호·sr-only 글자가 성격을 전달하고 색은 보조(KWCAG) */
.points-row__amount{display:block;font-size:14px;font-weight:700}
.points-row__amount.is-earned{color:var(--primary)}
.points-row__amount.is-deducted{color:var(--muted-foreground)}
.points-row__balance{font-size:12px;color:var(--muted-foreground)}
.points .pager{margin-top:0;justify-content:flex-start}

/* ===== 배송지 관리 (mypage/addresses.html · address-form.html · fragments/address-delete-dialog.html) — Next AddressesSection·AddressFormDialog · 목업 마이페이지.dc.html L193~216 ===== */
.addresses__alert,.address-form__alert{margin:0 0 14px}
.addresses__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.addresses__intro{margin:0;font-size:14px;color:var(--muted-foreground)}
.addresses__count--full{font-weight:700;color:var(--foreground)}
/* disabled 대신 aria-disabled(포커스 유지) — 흐리게만 하고 눌리면 서버가 이유를 토스트한다 */
.btn.is-disabled{opacity:.5}
.addresses__list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.address-card{padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
/* 기본 배송지는 테두리로도 구분하되 의미는 뱃지 글자가 전달한다 */
.address-card--default{border-color:var(--primary)}
.address-card__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.address-card__recipient{font-size:15px;font-weight:700}
.address-card__badge{padding:1px 6px;border:1px solid var(--primary);border-radius:5px;font-size:11px;font-weight:700;color:var(--primary)}
.address-card__label{margin-left:auto;font-size:12px;color:var(--muted-foreground)}
.address-card__body{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.address-card__actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.address-card__form{display:contents}
.address-form{max-width:560px}
.address-form__desc{margin:0 0 16px}
.address-form__zip{display:flex;gap:8px}
.address-form__zip-input{max-width:140px}
.address-form__actions .btn{flex:1}
/* 삭제 확인 <dialog> — 모달(showModal)일 때는 가운데 + 배경 딤, JS 없이 open 속성만 있을 때는 목록 아래 인라인 패널로 보인다 */
.confirm-dialog{width:min(400px,calc(100% - 32px));padding:0;border:0;border-radius:var(--radius);background:var(--card);color:var(--foreground);box-shadow:0 20px 60px rgba(0,0,0,.25)}
.confirm-dialog::backdrop{background:color-mix(in oklch,var(--foreground) 45%,transparent)}
.confirm-dialog[open]:not(:modal){position:static;margin:14px 0 0;border:1px solid var(--border);box-shadow:none}
.confirm-dialog__panel{padding:24px}
.confirm-dialog .confirm-panel__actions{margin-top:20px}

/* ===== 찜 하트 (product/fragments/wish-heart.html) — Next wishlist-heart-button.tsx. 상태는 색 + 채움(fill) + aria-pressed + 라벨 병행(KWCAG) ===== */
.wish-heart{cursor:pointer}
.wish-heart[aria-pressed="true"]{color:var(--destructive)}
.wish-heart[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
/* 카드 오버레이 — 목업 38px 유리 원형(top/right 6px), ::after로 히트 44px. 스트레치드 링크(z-1) 위(z-2). 비활성 색은 muted */
.wish-heart--card{position:absolute;top:6px;right:6px;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;border-radius:999px;
  background:color-mix(in oklch,var(--card) 78%,transparent);color:var(--muted-foreground);backdrop-filter:blur(4px)}
.wish-heart--card::after{content:"";position:absolute;inset:-3px;border-radius:999px}
.wish-heart--card svg{width:20px;height:20px}
/* 상세 CTA — 56px 정방 아이콘 버튼(Next size="icon"). .buy__cta .btn{flex:1}을 여기서만 되돌린다 */
.buy__cta .wish-heart--cta{flex:0 0 56px;width:56px;min-height:56px;padding:0}
.wish-heart--cta svg{width:24px;height:24px}
/* 모바일 구매바 — 50px(Next w-[50px] px-0) */
.buybar__actions .wish-heart--bar{flex:0 0 50px;width:50px;padding:0}
.wish-heart--bar svg{width:22px;height:22px}
/* 헤더 찜 목록 아이콘 — 데스크톱만(모바일은 드로어 '찜한 상품'이 진입점, store-header.tsx:111~115 hidden md:inline-flex) */
.site-header__icon--wishlist{display:none}
@media (min-width:768px){.site-header__icon--wishlist{display:inline-flex}}

/* ===== 찜 목록 (wishlist/index.html) — Next wishlist-view.tsx · 목업 'PaRaSOL 위시리스트.dc.html' ===== */
.page:has(> .wishlist){padding-block:16px 40px}   /* Next app/(store)/wishlist/page.tsx:30 pt-4 pb-10 — 스티키 담기 바 아래 여백 40px */
.wishlist__head{display:flex;align-items:baseline;gap:8px}
.wishlist__title{margin:0;font-family:var(--font-display);font-size:clamp(17px,2.4vw,20px);font-weight:800}
.wishlist__count{font-size:14px;font-weight:600;color:var(--muted-foreground)}
.wishlist-empty__cta{min-height:48px;padding-inline:22px}
/* 선택 바 — 목업 40px 실측에서 44px 상향(KWCAG) */
.wishlist__bar-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.wishlist__all{display:flex;align-items:center;gap:9px;min-height:44px;padding:0;border:0;background:transparent;font:inherit;font-size:14px;font-weight:700;color:var(--foreground);cursor:pointer}
.wishlist__all:disabled{opacity:.4;cursor:not-allowed}
.wishlist__all-count{font-weight:600;color:var(--muted-foreground)}
.wishlist__remove{padding:0 12px;font-size:13px;font-weight:600;color:var(--muted-foreground)}
.wishlist__remove:hover{border-color:var(--foreground);color:var(--foreground)}
.wishlist__remove[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
/* 표시용 체크 — 목업 [data-check] 24px·radius 7px(장바구니 .check__box 22px과 다른 이 화면 고유 규격). 눌림은 부모의 aria-pressed/aria-checked가 정한다 */
.wcheck{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border:1.5px solid var(--border);border-radius:7px;background:var(--card);color:transparent}
.wcheck--glass{background:color-mix(in oklch,var(--card) 85%,transparent)}
[aria-pressed="true"]>.wcheck,[aria-checked="true"]>.wcheck{border-color:var(--primary);background:var(--primary);color:var(--primary-foreground)}
/* 그리드 2 → 3(640px) → 4(920px), gap 14px — 목업 컨테이너 쿼리를 뷰포트로 환산(셸 선례) */
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:12px 0 0;padding:0;list-style:none}
@media (min-width:640px){.wgrid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:920px){.wgrid{grid-template-columns:repeat(4,1fr)}}
.wcard{position:relative;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.wcard.is-selected{border-color:var(--primary)}   /* 선택 + 가용일 때만 wishlist.js가 붙인다 — 의미는 aria-checked가 전달한다 */
.wcard__media{position:relative;aspect-ratio:1/1;background:var(--muted)}
.wcard__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wcard__check{position:absolute;top:10px;left:10px;z-index:2;padding:0;border:0;background:transparent;cursor:pointer}
.wcard__check::after{content:"";position:absolute;inset:-10px}   /* 24px 표시 + 히트 44px */
.wcard__check:disabled{cursor:not-allowed}
.wcard__check:disabled .wcheck{opacity:.4}
.wcard__release{position:absolute;top:8px;right:8px;z-index:2;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;border-radius:999px;
  background:color-mix(in oklch,var(--card) 85%,transparent);color:var(--destructive);backdrop-filter:blur(4px);cursor:pointer}
.wcard__release::after{content:"";position:absolute;inset:-3px;border-radius:999px}
.wcard__release[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.wcard__soldout{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none;background:color-mix(in oklch,var(--background) 55%,transparent)}
.wcard__body{display:flex;flex:1;flex-direction:column;gap:8px;padding:12px}
.wcard__maker{font-size:12px;color:var(--muted-foreground)}
.wcard__name{font-size:14px;line-height:1.35;font-weight:600;color:var(--foreground)}
.wcard__name::after{content:"";position:absolute;inset:0;z-index:1}   /* 스트레치드 링크 — 체크·하트·CTA만 z-2로 그 위 */
.wcard__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:auto}
.wcard__discount{font-size:13px;font-weight:800;color:var(--destructive)}
.wcard__selling{font-size:16px;font-weight:800}
.wcard__cta{position:relative;z-index:2;width:100%;min-height:44px;gap:6px;border-radius:calc(var(--radius) - 2px);font-size:13px;text-decoration:none}
.wcard__cta--cart{border-color:var(--primary);color:var(--primary)}   /* Next variant="primary-outline" */
.wcard__cta--cart:hover{background:var(--secondary)}
.wcard__cta--restock{color:var(--muted-foreground)}
.wcard__cta--restock:hover{border-color:var(--foreground);color:var(--foreground);text-decoration:none}
/* 하단 담기 바 — 스티키. -16/-40은 .container 패딩 상쇄 */
.wishlist__bar{position:sticky;bottom:0;z-index:150;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px -16px 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--card)}
@media (min-width:768px){.wishlist__bar{margin-inline:-40px;padding-inline:40px}}
.wishlist__bar-text{font-size:14px}
.wishlist__bar-text strong{font-weight:800}
.wishlist__bulk{min-height:50px;padding-inline:24px;font-size:15px;font-weight:800}

/* ===== 재입고 알림 다이얼로그 (product/fragments/restock-dialog.html) — .confirm-dialog 규격 재사용 ===== */
.restock-dialog .confirm-panel__title{font-size:18px}
.restock-dialog__member{margin:0;font-size:13px;color:var(--muted-foreground)}
.restock-dialog__phone .field__input{height:48px}

/* ===== 마이페이지 내 리뷰 (mypage/reviews.html) — Next my-review-view.tsx MyReviewView. 4-d ===== */
.my-reviews__group-title{margin:0;font-family:var(--font-display);font-weight:800;font-size:18px}
.my-reviews__group-desc{margin:4px 0 0;font-size:13px;color:var(--muted-foreground)}
.my-reviews__group .empty--inline{margin-top:12px}
.my-reviews__list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
/* 쓸 상품 카드: 상품명 + 메타 + 44px '리뷰 쓰기' */
.my-reviews__reviewable{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.my-reviews__product{flex:1;min-width:0;font-size:14px}
.my-reviews__product b{font-weight:600}
.my-reviews__meta{display:block;margin-top:2px;font-size:12px;color:var(--muted-foreground)}
/* 쓴 리뷰 카드: 별(장식) + n점 + 상품명 + '비공개 처리됨' + 날짜 / 본문(줄바꿈 유지) */
.my-reviews__card{padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.my-reviews__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.my-reviews__stars{font-size:14px;color:var(--primary);letter-spacing:1px}
.my-reviews__rating{font-size:13px;font-weight:700}
.my-reviews__name{flex:1;min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.my-reviews__hidden{border:1px solid var(--border)}
.my-reviews__date{font-size:12px;color:var(--muted-foreground)}
.my-reviews__content{margin:8px 0 0;font-size:13px;line-height:1.8;color:var(--muted-foreground);white-space:pre-wrap;overflow-wrap:anywhere}

/* ===== 리뷰 작성 (mypage/review-write.html) — Next ReviewWriteForm + 핸드오프 리뷰작성.dc.html 구조. 4-d ===== */
.review-write{max-width:640px;gap:20px}
.review-write__denied{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 16px;text-align:center}
.review-write__denied-text{margin:0;font-size:14px;color:var(--muted-foreground)}
.review-write__target{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.review-write__thumb{width:60px;height:60px;flex-shrink:0;border:1px solid var(--border);border-radius:calc(var(--radius) - 5px);object-fit:cover;background:var(--muted)}
.review-write__product{flex:1;min-width:0;font-size:14px}
.review-write__product b{font-weight:600}
.review-write__option{display:block;margin-top:2px;font-size:12px;color:var(--muted-foreground)}
/* 적립 안내 — secondary 상자(Next :247~253). 정책이 0이면 서버가 그리지 않는다 */
.review-write__earn{margin:0;padding:10px 14px;border-radius:calc(var(--radius) - 2px);background:var(--secondary);font-size:13px;font-weight:600;color:var(--primary)}
.review-write__alert{padding:12px 14px;border:1px solid var(--destructive);border-radius:var(--radius);background:var(--card)}
.review-write__fieldset{min-width:0}
.review-write__fieldset > legend{padding:0;margin-bottom:6px}
.review-write__optional{font-weight:400;color:var(--muted-foreground)}
/* 토글 칩 — aria-pressed로 선택 표시(색 + 테두리 + 굵기, 눌림 상태는 보조기기가 읽는다). 별점 칩은 별(장식) + 'n점' */
.review-write__choices{display:flex;flex-wrap:wrap;gap:8px}
.review-write__chip{gap:6px;cursor:pointer;font:inherit;font-size:13px;font-weight:600;color:var(--foreground)}
.review-write__chip[aria-pressed="true"]{border-color:var(--primary);background:var(--secondary);color:var(--primary);font-weight:700}
.review-write__stars{color:var(--primary);letter-spacing:1px}
/* 사진 — 80px 미리보기 + 우상단 '사진 삭제'(44px 히트는 ::after로 확보) */
.review-write__photos{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.review-write__photo{position:relative;width:84px;height:84px;flex-shrink:0}
.review-write__photo-img{width:100%;height:100%;border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);object-fit:cover;background:var(--muted)}
.review-write__photo-remove{position:absolute;top:-6px;right:-6px;display:flex;align-items:center;justify-content:center;width:26px;height:26px;padding:0;border:0;border-radius:999px;
  background:var(--foreground);color:var(--background);font-size:15px;line-height:1;cursor:pointer}
.review-write__photo-remove::after{content:"";position:absolute;inset:-9px;border-radius:999px}
.review-write__file{font-size:13px}
.review-write__file::file-selector-button{min-height:44px;margin-right:8px;padding:0 12px;border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);background:var(--card);font:inherit;font-size:13px;font-weight:700;color:var(--foreground);cursor:pointer}
.review-write__file[aria-disabled="true"]{opacity:.5}   /* 업로드 중·5장 도달 — hard disabled가 아니라 aria-disabled(포커스 유지, JS가 click을 막는다) */
/* 빈 role=status는 자리(.field gap)를 차지하지 않되 접근성 트리에는 남긴다(display:none이면 글이 들어와도 낭독되지 않는 일이 있다) — .sr-only와 같은 clip 방식 */
.review-write__photo-status:empty{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
.review-write__counter{margin:0;font-size:12px;color:var(--muted-foreground)}
.review-write__counter.is-ready{color:var(--primary)}
.review-write__actions{display:flex;gap:10px}
.review-write__actions .btn{flex:1;text-decoration:none}

/* ===== 주문 내역·상세·비회원 조회 (mypage/orders.html · order/detail.html · order/lookup.html + order/fragments 5종) — Next mypage-view.tsx OrdersSection · order-detail-view.tsx · order-lookup-view.tsx.
   카드·행·품목은 주문완료(.order-done__*)와 같은 규격을 그대로 쓴다(세 화면이 fragment를 공유). 여기는 그 화면들에만 있는 것: 목록 카드·헤더·타임라인·배지·aside·클레임 이력 ===== */
.container--order-lookup{max-width:760px}
.page:has(> .order-detail),.page:has(> .order-lookup){padding-block:18px 40px}
.order-detail__title,.order-lookup__title{margin:0;font-family:var(--font-display);font-size:clamp(20px,2.6vw,24px);font-weight:800}
.order-lookup__title--result{margin-bottom:4px}
.order-detail__grid{display:flex;flex-direction:column;gap:20px;margin-top:20px}
@media (min-width:1024px){.order-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}}
.order-detail__main{display:flex;flex-direction:column;gap:20px;min-width:0}
.order-detail__aside{display:flex;flex-direction:column;gap:12px}
@media (min-width:1024px){.order-detail__aside{position:sticky;top:16px}}
.order-detail__back{width:100%;text-decoration:none}

/* 헤더 카드 — 주문일시·주문번호·상태 배지(글자로 상태 전달, KWCAG) */
.order-head__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.order-head__date{margin:0;font-size:13px;color:var(--muted-foreground)}
.order-head__no{margin:0;font-family:var(--font-display);font-size:16px;font-weight:800}
.order-badge{display:inline-flex;align-items:center;padding:4px 10px;border:1px solid var(--primary);border-radius:6px;font-size:13px;font-weight:700;color:var(--primary);background:var(--card)}
.order-badge--sm{padding:1px 6px;border-radius:5px;font-size:11px}

/* 타임라인 4단계 — 막대는 aria-hidden, 현재 단계는 bold+primary+sr-only '(현재 단계)' */
.order-progress{margin-top:16px}
.order-progress__notice{margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);background:color-mix(in oklch,var(--muted) 40%,transparent);font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.order-timeline{display:flex;gap:4px;margin:0;padding:0;list-style:none}
.order-timeline--claim{margin-top:12px}
.order-timeline__step{flex:1;text-align:center}
.order-timeline__bar{height:4px;border-radius:999px;background:var(--border)}
.order-timeline__step.is-reached .order-timeline__bar{background:var(--primary)}
.order-timeline__label{display:block;margin-top:6px;font-size:11px;color:var(--muted-foreground)}
.order-timeline__label.is-current{font-weight:700;color:var(--primary)}
.order-shipment{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.order-shipment__line{margin:0;font-size:13px;color:var(--muted-foreground)}
.order-shipment__track{margin-left:auto}

/* aside 주문 관리 */
.order-manage__confirm{margin-top:12px}
.order-manage__confirm-open{width:100%}
.order-manage__confirm-panel{max-width:none;border-color:var(--primary);background:var(--secondary)}
.order-manage__confirm-panel .confirm-panel__desc{margin-bottom:0;color:var(--secondary-foreground)}
.order-manage__claims{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.order-manage__claim{width:100%;text-decoration:none}
.order-manage__notice{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--muted-foreground)}
.order-manage__foot{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
/* 단독 행의 12px 링크 — 히트 영역만 44px로(레이아웃 불변, KWCAG 터치 타겟) */
.order-manage__guide{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:var(--muted-foreground);text-decoration:underline;text-underline-offset:2px}
.order-manage__guide:hover{color:var(--primary)}

/* 클레임 이력 */
.claim-history__list{display:flex;flex-direction:column;gap:14px;margin:12px 0 0;padding:0;list-style:none}
.claim-history__item{padding-top:14px;border-top:1px solid var(--border)}
.claim-history__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px}
.claim-history__type{font-size:14px}
.claim-history__no{color:var(--muted-foreground)}
.claim-history__at{margin-left:auto;font-size:12px;color:var(--muted-foreground)}
.claim-history__items{margin:10px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted-foreground)}
.claim-history__amounts{margin-top:10px}

/* 비회원 조회 */
.order-lookup__form-wrap{width:100%;max-width:440px;margin:24px auto 0}
.order-lookup__intro{text-align:center}
.order-lookup__lead{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--muted-foreground)}
.order-lookup__form{display:flex;flex-direction:column;gap:12px;margin-top:20px;padding:clamp(20px,4vw,28px);border:1px solid var(--border);border-radius:var(--radius);background:var(--card)}
.order-lookup__alert{margin:0;padding:10px 12px;border:1px solid color-mix(in oklch,var(--destructive) 40%,var(--border));border-radius:calc(var(--radius) - 4px);background:color-mix(in oklch,var(--destructive) 8%,var(--card));font-size:13px;line-height:1.5;color:var(--foreground)}
.order-lookup__member{margin:16px 0 0;text-align:center;font-size:13px;color:var(--muted-foreground)}
.order-lookup__member-link{font-weight:700;color:var(--primary);text-underline-offset:2px}
.order-lookup__result{display:flex;flex-direction:column;gap:20px;margin-top:20px}
.order-lookup__claims,.order-lookup__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.order-lookup__actions .btn,.order-lookup__claims .btn{text-decoration:none}

/* ===== 클레임 신청 (order/claim-request.html) — Next claim-request-view.tsx · 목업 주문상세.dc.html 클레임 모드(4-f).
   카드·요약 행·aside는 상세와 같은 규격(.order-done__card · .order-done__rows · .order-detail__grid)을 쓰고, 여기는 이 화면에만 있는 것: 헤더·대상 라인·사유 태그·계좌·합계 ===== */
.page:has(> .claim-req){padding-block:18px 40px}
.claim-req__head{display:flex;flex-direction:column;gap:4px}
/* 뒤로 링크(탭 순서 1) — 12px 글자라 히트 영역만 44px로(KWCAG 터치 타겟) */
.claim-req__back{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;font-size:13px;color:var(--muted-foreground);text-decoration:none}
.claim-req__back:hover{color:var(--primary);text-decoration:underline}
.claim-req__title{margin:0;font-family:var(--font-display);font-size:clamp(20px,2.6vw,24px);font-weight:800}
.claim-req__order-no{margin:0;font-size:13px;color:var(--muted-foreground)}
.claim-req__alert{margin-top:16px}
.claim-req__form{display:block}
.claim-req__sec-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.claim-req__sec-note{font-size:13px;color:var(--muted-foreground)}
.claim-req__sec-desc{margin:4px 0 0;font-size:13px;color:var(--muted-foreground)}
/* 대상 라인 — 썸네일 56px · 본문 · 우측(라인 금액 | 신청 완료 | 수량 select). 잔여 0은 흐리게 + 글자 '신청 완료'(색만으로 알리지 않는다) */
.claim-req__targets{display:flex;flex-direction:column;gap:12px;margin:12px 0 0;padding:0;list-style:none}
.claim-req__target{display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px)}
.claim-req__target.is-sold-out{opacity:.6}
.claim-req__thumb{flex:0 0 56px;width:56px;height:56px;overflow:hidden;border:1px solid var(--border);border-radius:calc(var(--radius) - 4px);background:var(--muted)}
.claim-req__thumb img{width:100%;height:100%;object-fit:cover}
.claim-req__thumb-empty{display:block;width:100%;height:100%}
.claim-req__target-body{flex:1 1 auto;min-width:0}
.claim-req__maker{margin:0;font-size:12px;color:var(--muted-foreground)}
.claim-req__name{margin:0;font-size:14px;font-weight:700}
.claim-req__meta{margin:0;font-size:13px;color:var(--muted-foreground)}
.claim-req__note{margin:0;font-size:12px;color:var(--muted-foreground)}
.claim-req__line-total{flex:0 0 auto;font-size:14px;font-weight:700}
.claim-req__sold-out{flex:0 0 auto;font-size:13px;color:var(--muted-foreground)}
.claim-req__qty{display:flex;flex:0 0 auto;align-items:center;gap:8px}
.claim-req__qty-label{font-size:13px;color:var(--muted-foreground)}
.claim-req__qty-select{min-height:44px;padding:0 10px;cursor:pointer}
/* 사유 — 목업은 사유 섹션 테두리가 primary */
.claim-req__reason{border-color:var(--primary)}
.claim-req__reasons{margin-top:12px}
.claim-req__reason-body{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.claim-req__fee-tag{font-size:11px;font-weight:700;color:var(--muted-foreground)}
.claim-req__fee-tag.is-chargeable{color:var(--destructive)}
.claim-req__detail{margin-top:12px}
.claim-req__textarea{min-height:96px}
.claim-req__account{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.claim-req__bank{width:100%;min-height:46px}
/* 요약 aside — 합계는 display 서체, 반품 3줄·교환 안내는 quote 응답에 따라 hidden 토글 */
.claim-req__total{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.claim-req__total-label{font-size:14px;font-weight:700}
.claim-req__total-value{font-family:var(--font-display);font-size:18px;font-weight:800}
.claim-req__breakdown{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.claim-req__breakdown-line{margin:0;font-size:12px;line-height:1.6;color:var(--muted-foreground)}
.claim-req__exchange-notice{margin:8px 0 0;font-size:12px;line-height:1.6;color:var(--muted-foreground)}
.claim-req__hint{margin:12px 0 0;font-size:12px;line-height:1.6;color:var(--muted-foreground)}
.claim-req__blocking{margin:8px 0 0;font-size:12px;color:var(--muted-foreground)}
.claim-req__blocking:empty{display:none}
.claim-req__submit{margin-top:12px}
.claim-req__submit[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.claim-req__back-btn{display:inline-flex;width:100%;margin-top:8px;text-decoration:none}

/* 주문 내역 카드 — 카드 전체가 링크 하나(44px 이상) */
.orders{display:flex;flex-direction:column;gap:16px}
.orders__out-of-range{margin:0;padding:24px 0;text-align:center;font-size:14px;color:var(--muted-foreground)}
.orders__list{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.order-card{display:flex;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--foreground);text-decoration:none;transition:border-color .15s}
.order-card:hover{border-color:var(--primary);text-decoration:none}
.order-card:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.order-card__thumb{position:relative;flex:0 0 64px;width:64px;height:64px;overflow:hidden;border:1px solid var(--border);border-radius:calc(var(--radius) - 4px)}
.order-card__img{width:100%;height:100%;object-fit:cover}
.order-card__body{flex:1 1 auto;min-width:0}
.order-card__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.order-card__date{font-size:13px;color:var(--muted-foreground)}
.order-card__name{margin:4px 0 0;font-size:14px;font-weight:700}
.order-card__extra{font-weight:400;color:var(--muted-foreground)}
.order-card__no{margin:0;font-size:13px;color:var(--muted-foreground)}
.order-card__total{flex:0 0 auto;font-size:14px;font-weight:700}
.orders .pager{margin-top:0;justify-content:flex-start}