/* 알뜰 스튜디오 손님 화면 바탕 (2026-10-26 대표님 요청)
   1차: 모든 화면을 첫 화면처럼 검정 그라데이션 → 2차: 연한 회색 → 3차(10-27): 대표님이 견본에서 고른 '그래파이트'(#34302D → #272422). 2차: 너무 어두워 '연한 다크그레이'로, 머리줄부터 바닥글까지 한 줄기 그라데이션,
   글자는 밝게(흰색·연한 회색), 옵션 선택은 예전 네모 칸 3개와 전혀 다른 '세로 목록 + 동그라미 선택' 모양.
   이 파일을 base.html 에서 빼면 예전 흰 바탕 모양으로 돌아간다. 관리자 화면은 다른 틀이라 영향 없음 */
:root {
  --g-top: #1C1A18; --g-mid: #161412; --g-low: #100F0D; --g-bot: #080706;  /* 위 → 가운데 → 아래(바닥글). 2026-10-27 대표님 요청: 전보다 옅게 시작해 아래로 갈수록 조금씩 어두워지게 · 같은 날 2차: 위아래 차이를 더 크게 · 3차: 2차의 맨 아래 색(#1C1A18)을 맨 위로, 아래는 더 어둡게 */
  --bg: #161412; --outer: #080706; --surface: #2E2A27; --surface2: #383330;
  --text: #FFFFFF; --sub: #CFC8C2; --line: #4A443F;
  --point-deep: #D6F24A; --primary: #D6F24A; --on-primary: #1A1A1C; --accent: #FFFFFF; --logo-drop: #1A1A1C;
  --chip-on: #D6F24A; --chip-on-text: #1A1A1C;
  --coupon-bg: #403B37; --coupon-text: #FFFFFF;
  --total: #FFFFFF; --bar: #544D47;
  --top-bg: #1C1A18; --top-line: #1C1A18; --tab-bg: #080706;
  --opt-on: #D6F24A; --opt-on-bg: rgba(214, 242, 74, .10);
}
html, body { background: var(--g-bot); color-scheme: dark; }
/* 바탕: 머리줄 아래부터 바닥글 끝까지 한 줄기 그라데이션(본문·바닥글은 투명해서 이어 보임) */
html body .shop { background: linear-gradient(180deg, var(--g-top) 0%, var(--g-mid) 35%, var(--g-low) 70%, var(--g-bot) 100%); box-shadow: none; }
html body main, html body:has(.hero.blank) main { background: transparent; }
html body .foot2.foot-dark { border-top: 0; margin-top: 32px; padding-top: 34px; background: transparent; color: #F0F0F2; }
html body .foot2.foot-dark .ft-h, html body .ft-table dt, html body .foot2.foot-dark .ft-copy { color: #C4BCB5; }
html body .foot2.foot-dark .ft-mail { color: #DADADE; }
html body .foot2.foot-dark .ft-links a + a { border-left-color: #7D746C; }
/* 첫 화면: 흑백 바탕 칸도 투명하게 — 같은 그라데이션 위에 슬로건만 */
html:has(.hero.blank), html body:has(.hero.blank), html body .shop:has(.hero.blank) { background-color: var(--g-bot); }
html body .shop:has(.hero.blank) { background: linear-gradient(180deg, var(--g-top) 0%, var(--g-mid) 35%, var(--g-low) 70%, var(--g-bot) 100%); }
html body .hero.blank, html body .hero.blank .hero-banner { background: transparent; }
html body .sl-ch { background-image: linear-gradient(110deg, #FFFFFF 0%, #D6F24A 32%, #FFFFFF 58%, #E4E4E8 80%, #FFFFFF 100%); }
/* 머리줄·아래 탭: 그라데이션 위·아래 끝 색 */
html body .top, html body .sticky-head { background: var(--g-top); }
html body .tabbar { background: var(--g-bot); border-top: 1px solid #433D38; }
/* 입력 칸 */
html body input:not([type=checkbox]):not([type=radio]):not([type=hidden]), html body select, html body textarea { background: #2A2724; color: #FFFFFF; border-color: #655D56; }
html body input::placeholder, html body textarea::placeholder { color: #B4B4B8; }
/* 글자 */
html body .hero, html body .hero-banner, html body .price strong, html body .detail-name, html body .sec-title, html body h1, html body h2, html body h3 { color: #FFFFFF; }
html body .price del { color: #BAB2AB; }
html body .desc-html { color: #F0F0F2; }
html body .notice-tbl, html body .notice-tbl dl, html body .notice-tbl dt, html body .notice-tbl dd { background: transparent; color: #E8E8EC; border-color: #544D47; }
html body .notice-tbl h3 { background: #403B37; color: #FFFFFF; border-bottom-color: #544D47; }
html body .rev { border-bottom-color: #544D47; }
/* 단추·칸 */
html body .btn-primary, html body .buybar .btn-primary { background: #D6F24A; color: #1A1A1C; border-color: #D6F24A; }
html body .btn-primary:disabled { background: #544D47; color: #C4BCB5; border-color: #544D47; }
html body .btn-ghost { background: transparent; color: #FFFFFF; border-color: #988E85; }
html body .buybar { background: var(--g-bot); border-top: 1px solid #433D38; }
html body .buybar .btn-icon, html body .buybar .btn-ghost { background: transparent; color: #FFFFFF; border-color: #988E85; }
html body .thumb { background: #403B37; color: #FFFFFF; }
html body .progress span { background: #403B37; color: #CFC8C2; border-color: #544D47; }
html body .coupon-banner { background: #403B37; color: #FFFFFF; border-color: #FFFFFF; }
html body .badge.warn, html body .badge.gray { background: #49433E; color: #F0F0F2; }
html body .prow-buy.off { background: #49433E; color: #C4BCB5; }
html body .refund { background: #403B37; border-color: #544D47; color: #FFFFFF; }
html body .pill.sent, html body .pill.ok { background: #2F5A3C; color: #CFF5DA; }
html body .pill.fail, html body .pill.none { background: #6A2E24; color: #FFD3C9; }
html body .pill.paying { background: #2F4568; color: #D6E3FA; }
html body .pill.refund, html body .pill.low { background: #49433E; color: #F0F0F2; }
html body .alert.red, html body .form-error { background: #6A2E24; color: #FFE0D8; }
html body .alert.orange { background: #49433E; color: #FFFFFF; } html body .alert.orange > .ico { color: #D6F24A; }
html body .flow b small { background: rgba(214, 242, 74, .16); color: #D6F24A; }
html body .rf-step.ok, html body .rf-step.ok.soft { background: rgba(214, 242, 74, .14); color: #E4FA7A; }
html body .rf-step.no { background: #49433E; color: #E0E0E4; }
html body .rf-step .ico { background: #2A2724; }
html body .rf-step b, html body .rf-step span { color: inherit; }
html body .done-card.fail > .ico { background: #6A2E24; color: #FFD3C9; }
html body .cs-hours { background: #403B37; border-color: #544D47; color: #FFFFFF; }
html body .ex-steps .ex-ico { background: #2A2724; color: #D6F24A; }
html body .ex-steps li { background: #403B37; border-color: #544D47; color: #FFFFFF; }
html body .ex-steps li.ex-done { background: rgba(214, 242, 74, .14); border-color: #D6F24A; }
html body .ex-steps li b, html body .ex-steps li small, html body .ex-steps li span { color: inherit; }
html body .mk-switch { background: #655D56; }
html body .stepper, html body .stepper button { background: #2A2724; color: #FFFFFF; border-color: #655D56; }
/* 상품 상세 윗부분(product_page.css) */
html body .pd2-tag { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
html body .pd2-tag.sale { color: #FF8A8D; border-color: #FF8A8D; }
html body .pd2-tag.fill { background: #FFFFFF; color: #1A1A1C; border-color: #FFFFFF; }
html body .pd2-tag.lime { background: #D6F24A; color: #1A1A1C; border-color: #D6F24A; }
html body .pd2-tag.gray { color: #C4BCB5; border-color: #7D746C; }
html body .pd2-share { color: #FFFFFF; }
html body .pd2-price .price .price-off { color: #FF8A8D; }
html body .pd2-price .price del { color: #BAB2AB; text-decoration-color: #FF8A8D; }
html body .pd2-price .price .vat { color: #CFC8C2; }
html body .pd2-coupon { border-color: #FFFFFF; }
html body .pd2-cp-label, html body .pd2-coupon strong, html body .pd2-rows dt { color: #FFFFFF; }
html body .pd2-cp-help { border-color: #FFFFFF; color: #FFFFFF; }
html body .pd2-cp-btn { background: #D6F24A; color: #1A1A1C; }
html body .pd2-cp-btn.done { background: #49433E; color: #FFFFFF; }
html body .pd2-rows dd { color: #E4E4E8; }
html body .pd2-rows > div { border-top-color: #544D47; }
html body .tabs, html body .pd2 .tabs { border-top-color: #544D47; border-bottom-color: #544D47; background: transparent; }
html body .tabs button, html body .pd2 .tabs button { background: transparent; color: #CFC8C2; border-right-color: #544D47; }
html body .tabs button.on, html body .pd2 .tabs button.on { background: rgba(255, 255, 255, .08); color: #FFFFFF; box-shadow: inset 0 -3px 0 #D6F24A; }
/* 상담 창 */
html body .chat-head { background: #272422; color: #FFFFFF; border-bottom: 1px solid #433D38; }
html body .chat-go, html body .chat-send, html body .chat-fab { color: #1A1A1C; }

/* ===== 옵션 선택: 예전 네모 칸 3개(가운데 정렬)와 전혀 다른 '세로 목록 + 왼쪽 동그라미 선택' =====
   줄마다: 왼쪽 동그라미 · 기간(크게) · 아래 작은 할인 표시 | 오른쪽 가격(크게) · 아래 원래 가격(취소선). 고른 줄은 왼쪽 연두 굵은 선 + 연한 연두 바탕 */
html body .opts, html body .opts.opts-n1, html body .opts.opts-n2, html body .opts.opts-n3 { display: flex; flex-direction: column; gap: 0; border-top: 1px solid #655D56; }
html body .opts .opt, html body .opt { display: grid; grid-template-columns: 22px 1fr auto; grid-template-areas: "dot label price" "dot period list"; align-items: center;
  column-gap: 14px; row-gap: 3px; text-align: left; margin: 0; padding: 16px 14px 16px 16px; border: 0; border-bottom: 1px solid #655D56; border-radius: 0;
  background: transparent; color: #FFFFFF; box-shadow: none; transform: none; min-height: 0; }
html body .opt::before { content: ""; grid-area: dot; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #C4BCB5; box-sizing: border-box; transition: border-color .15s, background .15s; }
html body .opts .opt.on, html body .opt:has(input:checked) { background: rgba(214, 242, 74, .10); box-shadow: inset 4px 0 0 #D6F24A; border-color: #655D56; }
html body .opt.on::before, html body .opt:has(input:checked)::before { border-color: #D6F24A; background: radial-gradient(circle, #D6F24A 0 4px, transparent 5px); }
html body .opts .opt-label, html body .opts-n3 .opt-label, html body .opt .opt-label { grid-area: label; font-size: 17px; font-weight: 800; color: #FFFFFF; letter-spacing: -.01em; }
html body .opts .opt-period, html body .opt .opt-period { grid-area: period; margin: 0; min-height: 0; line-height: 1.2; }
html body .opts .opt-off, html body .opts .opt.on .opt-off, html body .opt:has(input:checked) .opt-off { display: inline-block; padding: 1px 6px; border: 1px solid #D6F24A; border-radius: 0; background: transparent; color: #D6F24A; font-size: 11px; font-weight: 800; font-style: normal; }
html body .opts .opt-price, html body .opts-n3 .opt-price, html body .opt .opt-price { grid-area: price; justify-self: end; margin: 0; font-size: 19px; font-weight: 900; color: #FFFFFF; letter-spacing: -.02em; }
html body .opts .opt-list, html body .opt .opt-list { grid-area: list; justify-self: end; margin: 0; min-height: 0; font-size: 12px; line-height: 1.2; color: #BAB2AB; }
html body .opt .opt-list s { color: #BAB2AB; }
html body .opts .opt.off, html body .opt.off { opacity: .45; cursor: not-allowed; }
html body .opts .opt.off .opt-price { color: #CFC8C2; font-size: 15px; }
html body .opts .opt-badge { position: static; transform: none; grid-area: period; justify-self: start; }
html body .opts .opt:active { transform: none; background: rgba(255, 255, 255, .06); }
html body .opts .opt input:focus-visible ~ .opt-label { text-decoration: underline; }
html body .ex-steps li::before { background: #D6F24A; color: #1A1A1C; }

/* =====================================================================
   2026-10-27 대표님 요청: 정제된 디자인 — 점선·여러 색은 걷어내고, 깔끔한 얇은 실선 + 색 포인트는 몇 군데만
   포인트 색: 연두 #D6F24A(주 색) · 코랄 #FF6F8E(할인만)
   쓰는 곳: 머리줄 아래 얇은 선 · 주요 단추 · 가격 · 할인율 · 고른 옵션/탭 · 아래 탭 고른 칸 · 첫 화면 슬로건
   ===================================================================== */
:root { --li: #D6F24A; --co: #FF6F8E; --ln: #544D47; }
html body .top { position: relative; }
html body .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--li), rgba(214, 242, 74, 0)); }
/* 단추: 연두 바탕 · 검정 글자 · 테두리·그림자 없음 */
html body .btn-primary, html body .buybar .btn-primary, html body #buyBtn, html body #payBtn, html body button[name="agree_order"] { background: var(--li); color: #1A1A1C; border: 0; box-shadow: none; }
html body .btn-primary:disabled, html body #buyBtn:disabled, html body #payBtn:disabled { background: #49433E; color: #CFC8C2; }
html body .btn-ghost, html body .buybar .btn-icon, html body .buybar .btn-ghost { background: transparent; color: #FFFFFF; border: 1px solid #7D746C; box-shadow: none; }
/* 가격·할인 */
html body .price strong, html body .pd2-price .price strong, html body .opts .opt-price, html body .opt .opt-price { color: var(--li); -webkit-text-stroke: 0; }
html body .pd2-price .price .price-off, html body .price-off { color: var(--co); background: transparent; }
html body .prow .price-only strong { font-size: 18px; color: var(--li); }
/* 칸·입력: 얇은 실선만 */
html body .box, html body .refund, html body .cs-hours, html body .notice-tbl { border: 1px solid var(--ln); }
html body input:not([type=checkbox]):not([type=radio]):not([type=hidden]), html body select, html body textarea { border: 1px solid #655D56; }
html body input:focus, html body select:focus, html body textarea:focus { outline: 0; border-color: var(--li); box-shadow: none; }
html body input[type=checkbox] { accent-color: var(--li); }
/* 상품 목록: 테두리 없이, 이름 흰색 · 가격 연두 */
html body .plist-rows > .prow { border: 0; padding: 0; }
html body .prow .pcard-name { color: #FFFFFF; font-weight: 700; }
html body .prow-buy { background: transparent; color: #FFFFFF; border: 1px solid #7D746C; box-shadow: none; }
/* 옵션: 실선, 고른 줄은 연두 선·점 */
html body .opts { border-top: 1px solid var(--ln); }
html body .opts .opt, html body .opt { border-bottom: 1px solid var(--ln); }
html body .opts .opt.on, html body .opt:has(input:checked) { background: rgba(214, 242, 74, .07); box-shadow: inset 3px 0 0 var(--li); }
html body .opt.on::before, html body .opt:has(input:checked)::before { border-color: var(--li); background: radial-gradient(circle, var(--li) 0 4px, transparent 5px); }
html body .opts .opt-off, html body .opts .opt.on .opt-off, html body .opt:has(input:checked) .opt-off { border: 0; padding: 0; color: var(--co); background: transparent; }
/* 상세 표시 띠·쿠폰 칸 */
html body .pd2-tag, html body .pd2-tag.fill { background: transparent; color: #E8E2DC; border: 1px solid #7D746C; }
html body .pd2-tag.sale { background: transparent; color: var(--co); border-color: var(--co); }
html body .pd2-tag.lime { background: transparent; color: var(--li); border-color: var(--li); }
html body .pd2-coupon { border: 1px solid var(--ln); background: rgba(255, 255, 255, .03); }
html body .pd2-coupon strong { color: #FFFFFF; }
html body .pd2-cp-btn { background: var(--li); color: #1A1A1C; border: 0; box-shadow: none; }
html body .pd2-rows dt { color: #FFFFFF; }
/* 탭: 고른 탭은 연두 밑줄 */
html body .tabs button.on, html body .pd2 .tabs button.on { background: transparent; color: #FFFFFF; box-shadow: inset 0 -2px 0 var(--li); }
/* 아래 탭 · 진행 단계 · 상담 단추 */
html body .tabbar a.on, html body .tabbar a.on .ico, html body .tabbar a.on span { color: var(--li); }
html body .progress span.on { background: transparent; color: var(--li); border-color: var(--li); box-shadow: none; }
html body .chat-fab { background: var(--li); color: #1A1A1C; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
/* 바닥글: 차분하게 */
html body .foot2.foot-dark .ft-h { color: #A39A92; background: none; -webkit-background-clip: border-box; background-clip: border-box; }
html body .foot2.foot-dark .ft-biz { border-color: #7D746C; color: #E8E2DC; }
html body .foot2.foot-dark .ft-links a b { color: #FFFFFF; }
/* 제목: 그림자 없이 흰색 */
html body .top-title, html body .sec-title, html body .box-title, html body .notice-tbl h3, html body .rev-sum strong, html body .detail-name, html body .pd2-name, html body .foot2.foot-dark .ft-hours { text-shadow: none; color: #FFFFFF; }
/* 첫 화면 슬로건: 흰색에 연두가 은은하게 흐름 */
html body .sl-ch { filter: none; background-image: linear-gradient(110deg, #FFFFFF 0%, #FFFFFF 35%, var(--li) 50%, #FFFFFF 65%, #FFFFFF 100%); }
/* 2026-10-27 대표님 요청: 컴퓨터처럼 넓은 화면에서 가운데 가게 화면의 바깥 경계가 보이게 — 바깥은 한층 더 어둡게, 양옆에 옅은 밝은 선 */
@media (min-width: 481px) {
  html, body, html:has(.hero.blank), html body:has(.hero.blank) { background: #000000; }
  html body .shop, html body .shop:has(.hero.blank) { box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 40px rgba(0, 0, 0, .6); }
  html body .tabbar, html body .buybar { box-shadow: 1px 0 0 rgba(255, 255, 255, .14), -1px 0 0 rgba(255, 255, 255, .14); }
}