/* 알뜰 스튜디오 화면 꾸밈 — 시안 B '모노 갤러리' (2026-10-26 지시서 012)
   검정·흰색·회색 + 형광 연두 한 점, 모서리 0(각짐), 검정 머리줄, 두 줄 글자 로고 알뜰 / 스튜디오, 큰 그림 위 영어 제목,
   높이가 엇갈린 2줄 상품 목록, 검정 아래 탭. 글꼴은 가게 안(static/fonts)의 고딕 A1 하나만(사용 허가 문서: GothicA1-LICENSE.txt) */
@font-face { font-family: 'GothicA1'; font-weight: 400; font-display: swap; src: url('/static/fonts/GothicA1.woff2') format('woff2'); }
@font-face { font-family: 'GothicA1'; font-weight: 600 900; font-display: swap; src: url('/static/fonts/GothicA1-ExtraBold.woff2') format('woff2'); }
:root {
  --bg: #FFFFFF; --outer: #E6E6E6; --surface: #FFFFFF; --surface2: #F2F2F2;
  --text: #0E0E0E; --sub: #767676; --line: #E6E6E6;
  --lime: #D6F24A; --black: #0E0E0E;
  --point: #D6F24A; --point-deep: #0E0E0E; --on-point: #0E0E0E; --primary: #0E0E0E; --on-primary: #D6F24A;
  --accent: #0E0E0E; --logo-drop: #0E0E0E;
  --r-card: 0px; --r-btn: 0px; --r-chip: 0px; --r-thumb: 0px; --r-input: 0px; --r-badge: 0px;
  --font: 'GothicA1', 'Malgun Gothic', sans-serif;
  --font-head: 'GothicA1', 'Malgun Gothic', sans-serif; --head-weight: 800;
  --shadow: none;
  --btn-h: 54px;
  --chip-on: #0E0E0E; --chip-on-text: #D6F24A;
  --notice-bg: #D6F24A; --notice-text: #0E0E0E;
  --top-bg: #0E0E0E; --top-line: #0E0E0E; --brand-text: #FFFFFF;
  --coupon-bg: #0E0E0E; --coupon-text: #FFFFFF;
  --side-bg: #0E0E0E; --side-text: #E6E6E6; --side-on-bg: #D6F24A; --side-on-text: #0E0E0E; --bar: #E6E6E6;
  --total: #0E0E0E;
  --tab-bg: #0E0E0E; --tab-on: #D6F24A; --tab-on-icon: #D6F24A;
}
body { font-family: var(--font); }
h1, h2, h3, .detail-name, .sec-title { font-family: var(--font-head); }

/* 머리줄: 검정 바탕 + 흰 글자 */
.top { background: #0E0E0E; color: #fff; border-bottom: 0; }
.top .icon-btn, .top-title { color: #fff; }
.top-title { font-weight: 800; }
.btn { font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.btn-primary { background: #0E0E0E; color: #D6F24A; }
.btn-ghost { background: #fff; color: #0E0E0E; border: 1.5px solid #0E0E0E; }
.top .dot, .tabbar .dot { background: #D6F24A; color: #0E0E0E; }

/* 두 줄 글자 로고: 알뜰 / 스튜디오 */
.logo-wm { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: .92; font: 900 15px/.92 'GothicA1', sans-serif; letter-spacing: 1px; color: #0E0E0E; }
.logo-wm b { font-weight: 900; }
.logo-wm b + b { background: #D6F24A; color: #0E0E0E; padding: 0 3px; }
.top .logo-wm, .side .logo-wm, .chat-head .logo-wm { color: #fff; }
.top .logo-wm b + b, .side .logo-wm b + b, .chat-head .logo-wm b + b { background: none; color: #D6F24A; padding: 0; }
.top-logo.top-center { margin-right: auto; }
.ft-logo.logo-wm { font-size: 17px; }

/* 첫 화면: 가로 꽉 찬 큰 그림 + 영어 큰 제목 */
.hero { background: #fff; color: #0E0E0E; padding: 0; }
.hero-banner { position: relative; display: block; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; color: #0E0E0E; }
.hero-banner::after { display: none; }
.hero-banner .hero-text { position: absolute; left: 16px; right: 16px; bottom: 18px; padding: 0; }
.hero-banner .hero-eyebrow { display: block; margin: 0 0 4px; padding: 0; background: none; border-radius: 0; color: #0E0E0E; font-size: 11px; font-weight: 800; letter-spacing: 3px; }
.hero-banner h2, .hero-banner .hero-h { margin: 6px 0 8px; font-family: var(--font-head); font-size: 36px; line-height: 1; font-weight: 900; letter-spacing: -1px; color: #0E0E0E; white-space: normal; }
.hero-banner .hero-sub { margin: 0 0 10px; font-size: 12px; color: #0E0E0E; opacity: .8; }
.hero-btn { background: #0E0E0E; color: #D6F24A; height: 38px; padding: 0 14px; border-radius: 0; font-size: 12px; letter-spacing: 2px; }
.hero-btn .ico { width: 14px; height: 14px; }
.hero-pick { display: flex; gap: 14px; align-items: center; margin: 14px 16px 0; background: #fff; color: #0E0E0E; border: 1px solid #0E0E0E; border-radius: 0; padding: 10px; }
.hero-pick > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hero-pick em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: 2px; background: #D6F24A; color: #0E0E0E; align-self: flex-start; padding: 0 4px; }
.hero-pick b { font-size: 14.5px; line-height: 1.35; }
.hero-pick .thumb { --tw: 84px; }

/* 형광 연두 띠(배송 안내): 큰 그림 바로 아래 */
.notice-bar { justify-content: flex-start; padding: 9px 16px; background: #D6F24A; color: #0E0E0E; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
.notice-bar .ico { display: none; }
.notice-bar .nb-24 { background: #0E0E0E; color: #D6F24A; padding: 0 6px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.hero + .trust { margin-top: 0; }
.trust li { box-shadow: none; border: 1px solid #E6E6E6; }
.trust .ico { color: #0E0E0E; }

/* 섹션 제목: 영어 대문자 · 자간 넓게 */
.sec-title { font-weight: 900; letter-spacing: 2px; font-size: 16px; text-transform: uppercase; }
.sec-head a { font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: #767676; }

/* 상품 목록: 높이가 엇갈린 2줄(벽돌 쌓기) */
.plist-rows { columns: 2; column-gap: 10px; }
.prow { display: block; break-inside: avoid; margin: 0 0 16px; padding: 0; background: transparent; border-radius: 0; box-shadow: none; position: relative; }
.prow-img { display: block; }
.prow .thumb.sm, .plist-rows .prow-img .thumb.sm { --tw: 170px; width: 100%; aspect-ratio: 1; }
/* 2026-10-26 대표님 요청: 상품 목록 그림은 모두 정사각형(엇갈린 세로 긴 칸 없앰) */
.prow-body { padding-top: 8px; }
.prow .pcard-name { font-size: 14px; font-weight: 800; }
.prow .price { flex-wrap: wrap; }
.prow .price strong { font-size: 15px; }
.prow .price-off, .price-off { background: #D6F24A; color: #0E0E0E; padding: 0 4px; font-size: 11px; font-weight: 800; }
.prow .price del { font-size: 12px; }
.prow .badge { font-size: 11px; padding: 2px 6px; }
.prow-buy { display: none; }

/* 쿠폰 띠 */
.coupon-banner { border-radius: 0; margin: 14px 16px; }
.coupon-banner > span { background: #D6F24A; color: #0E0E0E; border-radius: 0; }
.coupon-banner b { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; }

/* 아래 탭: 검정 바탕, 고른 칸은 형광 연두 */
.tabbar { background: #0E0E0E; border-top: 0; }
.tabbar a { color: #8A8A8A; letter-spacing: .5px; }
.tabbar a.on { color: #D6F24A; }

/* 사는 단추: 검정 바탕 + 연두 글자 */
.buybar { background: #fff; border-top: 1px solid #0E0E0E; }
.buybar .btn-primary, #buyBtn, #payBtn, button[name="agree_order"] { background: #0E0E0E; color: #D6F24A; }
.buybar .btn-ghost { color: #0E0E0E; }

/* 사진이 없는 상품 그림: 연회색 바탕 + 검정 글자 */
.thumb { background: #F2F2F2; color: #0E0E0E; }
.thumb-brand { font-weight: 900; letter-spacing: 1px; opacity: 1; }
.thumb-big { font-weight: 900; }
.thumb-sold { background: rgba(14, 14, 14, .6); }

.toast { background: #0E0E0E; color: #D6F24A; border-radius: 0; }
.detail-name { font-weight: 900; letter-spacing: -.01em; }
.price strong { font-weight: 900; }
.foot .logo-text { color: var(--text); }

/* 단계 표시(주문 화면): 지금 단계는 검정, 나머지는 회색 */
.progress span { border-radius: 0; background: #F2F2F2; color: #767676; border-color: #E6E6E6; }
.progress span.on { background: #0E0E0E; color: #D6F24A; border-color: #0E0E0E; }
.foot2 .ft-name.logo-wm { display: inline-flex; flex-direction: column; line-height: .92; margin: 0 0 10px; color: #0E0E0E; }

/* 2026-10-26 지시서 012: 큰 그림 속 모양은 위쪽으로(제목 글씨와 안 겹치게), 목록은 블록으로 두어야 2줄 쌓기가 먹는다 */
.plist-rows { display: block; columns: 2; column-gap: 10px; }
/* 2026-10-26 상점명 알뜰 스튜디오: 이름이 길어 작은 상품 그림에서 두 줄로 꺾여 글과 겹침 → 한 줄, 작은 그림에서는 숨김 */
.thumb-brand { white-space: nowrap; }
.thumb.sm .thumb-brand { display: none; }

/* ===== 2026-10-26 지시서 013: 다른 가게와 다른 배치 (색·글꼴은 그대로) ===== */
/* 큰 그림 옆 추천 상품 그림: 가로세로 같은 정사각형, 잘라서 꽉 채움, 모서리 0 */
.hero-pick .thumb, .hero-pick .thumb.sm { --tw: 84px; width: 84px; height: 84px; aspect-ratio: 1 / 1; flex: none; border-radius: 0; }
.thumb-img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 믿음 한 줄: 아이콘 네모 없이 가운데 점으로 이은 굵은 글, 위아래 가는 선 */
.trust-line { margin: 0 16px; padding: 14px 0; text-align: center; font-size: 14px; border-top: 1px solid #0E0E0E; border-bottom: 1px solid #0E0E0E; }
.trust-line b { font-weight: 900; }
.trust-line i { font-style: normal; margin: 0 8px; color: #767676; }

/* 회원 혜택 상자: 흰 바탕 + 검정 2px 테두리, 왼쪽 연두 큰 글자(할인율) */
.coupon-banner { display: flex; align-items: center; gap: 14px; margin: 18px 16px; padding: 14px; background: #fff; color: #0E0E0E; border: 2px solid #0E0E0E; border-radius: 0; }
.coupon-banner > .cpn-big { flex: none; width: auto; height: auto; min-width: 84px; padding: 12px 14px; border-radius: 0; background: #D6F24A; color: #0E0E0E; font-size: 28px; font-weight: 900; line-height: 1; text-align: center; display: block; }
.coupon-banner div b { font-size: 15px; letter-spacing: 0; text-transform: none; }
.coupon-banner small { opacity: 1; color: #767676; }

/* 구매 안내: 큰 가는 숫자 + 굵은 제목 + 한 줄 설명(아이콘·동그라미·점선 없음) + 검정 한 줄 상자 */
.guide-list { list-style: none; margin: 0; padding: 0; }
.guide-list li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-top: 1px solid #E6E6E6; }
.guide-list li:last-child { border-bottom: 1px solid #E6E6E6; }
.g-no { flex: none; min-width: 44px; font-size: 28px; font-weight: 400; line-height: 1; color: #767676; }
.guide-list b { display: block; font-size: 15px; font-weight: 800; }
.guide-list small { display: block; margin-top: 2px; font-size: 12.5px; color: #767676; }
.guide-time { margin: 14px 0 0; padding: 14px 16px; background: #0E0E0E; color: #D6F24A; font-weight: 800; text-align: center; }
.guide-time b { font-weight: 900; }

/* 바닥글: 검정 바탕 — 고객센터 · 링크 한 줄 · 사업자 정보 표 · 저작권 */
.foot2.foot-dark { background: #0E0E0E; color: #E6E6E6; border-top: 0; margin-top: 24px; padding: 28px 20px 28px; }
.foot2.foot-dark .ft-h { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: 3px; color: #8A8A8A; }
.foot2.foot-dark .ft-cs { min-height: 54px; }
.foot2.foot-dark .ft-hours { margin: 0; font-size: 18px; font-weight: 900; color: #fff; }
.foot2.foot-dark .ft-mail { margin: 2px 0 0; color: #A8A8A8; }
.foot2.foot-dark .ft-links { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 20px 0 22px; font-size: 12.5px; color: #fff; }
.foot2.foot-dark .ft-links a { color: #fff; font-weight: 600; }
.foot2.foot-dark .ft-links a + a { margin-left: 10px; padding-left: 10px; border-left: 1px solid #5A5A5A; }
.foot2.foot-dark .ft-links b { font-weight: 900; }
.foot2.foot-dark .ft-bizinfo { min-height: 200px; }
.ft-table { display: grid; grid-template-columns: 96px 1fr; gap: 7px 12px; margin: 0; font-size: 12px; line-height: 1.5; }
.ft-table dt { color: #8A8A8A; }
.ft-table dd { margin: 0; color: #fff; word-break: break-all; }
.foot2.foot-dark .ft-biz { display: inline-block; margin: 0 0 0 8px; padding: 0 6px; font-size: 11px; color: #fff; border: 1px solid #fff; border-bottom: 1px solid #fff; }
.foot2.foot-dark .ft-copy { margin: 22px 0 0; font-size: 11px; color: #8A8A8A; white-space: normal; padding-right: 72px; }

/* ===== 2026-10-26 대표님 요청: 첫 화면을 잡지 표지처럼 — 깔끔한 흰 바탕, 큰 제호, 가는 선, 사진은 천천히 확대, 제목은 한 글자씩 떠오름, 동그라미 딱지는 천천히 돈다 =====
   (어두운 바탕·연두 빛·격자·흐르는 글자 띠 모양은 모두 지움) 처음 모양은 '다 나타난 뒤의 모양', 움직임을 줄이는 설정이면 바로 완성 모양 */
.hero.cover { background: #fff; padding: 0; }
.cover .hero-banner { position: relative; overflow: hidden; display: block; min-height: 0; margin: 0; padding: 14px 16px 22px; background: #fff; color: #0E0E0E; border-radius: 0; }
.cv-mast { border-bottom: 2px solid #0E0E0E; padding-bottom: 6px; overflow: hidden; }
.cv-mast-name { display: flex; align-items: baseline; justify-content: space-between; font-family: var(--font-head); font-weight: 900; font-size: clamp(40px, 14vw, 78px); line-height: .95; letter-spacing: -.05em; white-space: nowrap; isolation: isolate; animation: cvMast 1s cubic-bezier(.2, .8, .2, 1) backwards; }
.cv-mast-name em { font-style: normal; color: #0E0E0E; -webkit-text-stroke: 0; position: relative; }
.cv-mast-name em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: .16em; background: #D6F24A; z-index: -1; transform-origin: left; animation: heroRule .9s cubic-bezier(.2, .8, .2, 1) .7s backwards; }
.cv-issue { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #0E0E0E; font-size: 12px; font-weight: 700; letter-spacing: .02em; animation: heroUp .7s ease .4s backwards; }
.cv-issue span { margin: 0; }
.cv-photo { position: relative; display: block; margin: 14px 0 0; aspect-ratio: 1 / 1; overflow: hidden; background: #F2F2F2; }
.cv-photo .thumb { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; animation: cvZoom 16s ease-in-out infinite alternate; }
.cv-photo .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cv-photo::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: top; animation: cvReveal 1.1s cubic-bezier(.7, 0, .2, 1) .25s both; pointer-events: none; }
.cv-photo-empty { background: linear-gradient(160deg, #F2F2F2, #E6E6E6); }
.cv-sticker { position: absolute; z-index: 2; top: 104px; right: 10px; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #D6F24A; color: #0E0E0E; text-decoration: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); animation: cvPop .6s cubic-bezier(.2, 1.4, .4, 1) 1.2s backwards; }
.cv-sticker svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: cvSpin 14s linear infinite; }
.cv-sticker text { font-size: 9.6px; font-weight: 800; letter-spacing: .5px; fill: #0E0E0E; }
.cv-sticker b { position: relative; font-size: 22px; font-weight: 900; letter-spacing: -.03em; }
.cover .hero-banner .cv-text { position: relative; z-index: 1; left: auto; right: auto; bottom: auto; padding: 0; margin-top: -64px; }
.cover .hero-banner .hero-h { display: inline-block; margin: 0; padding: 12px 14px 6px 0; background: #fff; color: #0E0E0E; font-size: 40px; line-height: 1.12; font-weight: 900; letter-spacing: -1.4px; white-space: normal; }
.cover .hero-banner .hero-row { display: block; overflow: hidden; padding-bottom: 3px; }
.cover .hero-banner .hero-row .ch { display: inline-block; animation: heroChar .8s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--d) * 50ms + 900ms); }
.cover .hero-banner .hero-row .sp { display: inline-block; width: .28em; }
.cover .hero-banner .hero-rule { display: block; width: 100%; height: 1px; margin: 12px 0; background: #0E0E0E; transform-origin: left center; animation: heroRule 1s cubic-bezier(.2, .8, .2, 1) 1.6s backwards; }
.cv-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.cover .hero-banner .hero-sub { margin: 0; font-size: 13px; line-height: 1.5; color: #5A5A5A; opacity: 1; animation: heroUp .8s ease 1.8s backwards; }
.cover .hero-banner .hero-btn { flex: none; background: #0E0E0E; color: #D6F24A; height: 42px; padding: 0 16px; border-radius: 0; font-size: 13px; letter-spacing: 1px; animation: heroUp .8s ease 2s backwards; }
.cv-notice { margin: 0; }
@keyframes heroChar { from { opacity: 0; transform: translateY(105%); } }
@keyframes heroRule { from { transform: scaleX(0); } }
@keyframes heroUp { from { opacity: 0; transform: translateY(12px); } }
@keyframes cvMast { from { opacity: 0; transform: translateY(40%); letter-spacing: .06em; } }
@keyframes cvReveal { to { transform: scaleY(0); } }
@keyframes cvZoom { from { transform: scale(1); } to { transform: scale(1.09); } }
@keyframes cvSpin { to { transform: rotate(360deg); } }
@keyframes cvPop { from { opacity: 0; transform: scale(.4) rotate(-30deg); } }
@media (min-width: 560px) { .cv-sticker { top: 150px; } .cover .hero-banner .hero-h { font-size: 48px; } }
@media (prefers-reduced-motion: reduce) { .hero-banner *, .hero-banner *::before, .hero-banner *::after { animation: none !important; } .cv-photo::after { display: none; } }

/* 2026-10-26 대표님 요청: 첫 화면 위 부분은 비운 흑백 바탕만(글·상품·링크 없음). 위 '잡지 표지' 규칙은 쓰지 않지만 되돌릴 때를 위해 둔다 */
.hero.blank { padding: 0; background: #fff; }
.hero.blank .hero-banner { display: block; min-height: 0; height: auto; aspect-ratio: 4 / 5; max-height: 640px; margin: 0; padding: 0; border-radius: 0; background: linear-gradient(180deg, #0E0E0E 0%, #2B2B2B 100%); pointer-events: none; }
.seo-h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 2026-10-26 대표님 요청: 첫 화면 — 스크롤해도 흰 바탕이 안 보이게(첫 화면에서만 바탕 전체를 검정으로),
   흑백 바탕 아래쪽은 바닥글 검정으로 서서히 이어지고, 둘 사이는 흰 점선, 가운데 슬로건은 그라데이션 글자 + 한 글자씩 떠오름 */
html:has(.hero.blank), body:has(.hero.blank), .shop:has(.hero.blank) { background: #0E0E0E; }
body:has(.hero.blank) main { margin: 0; padding: 0; background: #0E0E0E; }
.hero.blank { background: #0E0E0E; }
.hero.blank .hero-banner { position: relative; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: linear-gradient(180deg, #0E0E0E 0%, #262626 38%, #2B2B2B 60%, #222222 100%); }  /* 2026-10-26: 아래 끝은 바닥글 그라데이션 시작 색 */
body:has(.hero.blank) .foot2.foot-dark { margin-top: 0; }  /* 2026-10-26: 흰 점선은 빼고 dark.css 의 그라데이션으로 */
body:has(.hero.blank) .cv-notice { margin: 0; }
.slogan { margin: 0; padding: 0 24px; text-align: left; font-family: var(--font-head); font-weight: 900; font-size: clamp(44px, 15vw, 76px); line-height: 1.08; letter-spacing: -.04em; }
.sl-line { display: block; overflow: hidden; padding-bottom: .06em; }
.sl-line .sp { display: inline-block; width: .26em; }
.sl-ch { display: inline-block; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(110deg, #FFFFFF 0%, #D6F24A 30%, #FFFFFF 55%, #8C8C8C 80%, #FFFFFF 100%); background-size: 300% 100%;
  animation: slUp .9s cubic-bezier(.2, .8, .2, 1) backwards, slFlow 7s linear infinite; animation-delay: calc(var(--d) * 70ms + 200ms), 0s; }
@keyframes slUp { from { opacity: 0; transform: translateY(100%); filter: blur(6px); } }
@keyframes slFlow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
@media (prefers-reduced-motion: reduce) { .sl-ch { animation: none !important; } }