/* 알뜰 스튜디오 손님 화면 공통 '알뜰 노트' 모양 (2026-10-27 대표님 요청: 장바구니·주문 조회 등 모든 화면을 예전 '상자' 모양과 완전히 다르게)
   주문·결제 화면(order_page.css)과 같은 말투: 상자 대신 위 가는 선 + 연두 짧은 막대 제목, 입력 칸은 점선, 금액은 종이 영수증,
   완료·오류 안내는 종이 티켓, 주요 단추는 연두 + →, 보조 단추는 위아래 선 사이 글자 + →.
   주문·결제 화면(진행 막대가 있는 main)은 order_page.css 가 따로 꾸미므로 여기서는 건드리지 않는다. base.html 맨 뒤에서 불러온다 */
:root { --li: #D6F24A; --co: #FF6F8E; --paper: #F4EFE8; --ink: #2A2622; --rule: #544D47; }

/* ---------- 상자 → 가는 선 + 연두 막대 제목 ---------- */
html body main:not(:has(> .progress)) .box { background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; padding: 22px 2px 24px; margin: 0; }
html body main:not(:has(> .progress)) .box:first-child, html body main:not(:has(> .progress)) .done-card + .box { border-top: 0; }
html body main:not(:has(> .progress)) .box::before { display: none; }
html body main:not(:has(> .progress)) .box-title, html body main .my-title, html body main .sec-title.sm { position: relative; display: block; padding-top: 14px; font-size: 19px; font-weight: 900; color: #FFFFFF; letter-spacing: -.01em; }
html body main:not(:has(> .progress)) .box-title::before, html body main .my-title::before, html body main .sec-title.sm::before { content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 3px; background: var(--li); }
html body main:not(:has(> .progress)) .box-title .ico { display: none; }
html body main:not(:has(> .progress)) .box-desc, html body main .hint { color: #BAB2AB; }

/* ---------- 입력 칸: 점선(주문·결제와 같게) ---------- */
html body main:not(:has(> .progress)) .field > span { color: #CFC8C2; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
html body main:not(:has(> .progress)) .field input:not([type=checkbox]):not([type=radio]):not([type=hidden]), html body main:not(:has(> .progress)) .field select {
  border: 1.5px dashed #8A8077; border-radius: 0; background: rgba(255, 255, 255, .03); color: #FFFFFF; }
html body main:not(:has(> .progress)) .field input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus, html body main:not(:has(> .progress)) .field select:focus {
  border: 1.5px dashed var(--li); background: rgba(214, 242, 74, .05); box-shadow: none; outline: 0; }

/* ---------- 단추 ---------- */
html body main .btn-primary.btn-lg, html body .buybar .btn-primary.btn-lg, html body .cart-empty .btn-primary, html body .done-card .btn-primary { border-radius: 0; letter-spacing: .02em; }
html body main .btn-primary.btn-lg::after, html body .buybar a.btn-primary.btn-lg::after, html body .cart-empty .btn-primary::after, html body .done-card .btn-primary::after { content: "→"; margin-left: 10px; font-weight: 900; }
/* 보조 단추(한 줄 가득): 위아래 선 사이 글자 + 오른쪽 → */
html body main .btn-ghost.btn-block { justify-content: space-between; height: 56px; padding: 0 2px; border: 0; border-top: 1px solid #7D746C; border-bottom: 1px solid #7D746C; border-radius: 0;
  background: none; color: #FFFFFF; font-weight: 800; text-align: left; }
html body main .btn-ghost.btn-block::after { content: "→"; color: var(--li); font-weight: 900; }
html body main .btn-ghost.btn-block .ico { color: var(--li); }
html body main .btn-row { gap: 0; }
html body main .btn-row .btn-ghost.btn-block + .btn-ghost.btn-block { border-top: 0; }

/* ---------- 빈 장바구니: 점선 동그라미 + 큰 글 ---------- */
html body .cart-empty { gap: 16px; padding: 70px 0 60px; }
html body .cart-empty .ico { width: 96px; height: 96px; padding: 26px; box-sizing: border-box; border: 2px dashed var(--li); border-radius: 50%; color: var(--li); }
html body .cart-empty b { font-size: 22px; font-weight: 900; color: #FFFFFF; }
html body .cart-empty .btn-primary { padding: 0 22px; height: 50px; }

/* ---------- 장바구니 상품 줄 ---------- */
html body .cart .citem { border-bottom: 1px solid var(--rule); }
html body .cart .citem .pcard-name { color: #FFFFFF; font-weight: 800; }
html body .cart .citem-opt { color: #BAB2AB; }
html body .cart .citem-row strong { color: var(--li); }
html body .cart-note { color: #CFC8C2; border: 0; border-left: 3px solid var(--li); background: rgba(255, 255, 255, .04); border-radius: 0; padding: 10px 12px; }

/* ---------- 금액: 종이 영수증(장바구니·주문 확인) ---------- */
html body main:not(:has(> .progress)) .summary { position: relative; margin: 14px 0 0; padding: 22px 18px 24px; background: var(--paper); color: var(--ink); border: 0; border-radius: 0; font-variant-numeric: tabular-nums;
  -webkit-mask: radial-gradient(circle 6px at 6px 0, transparent 5.5px, #000 6px) top left / 12px 51% repeat-x, radial-gradient(circle 6px at 6px 100%, transparent 5.5px, #000 6px) bottom left / 12px 51% repeat-x;
          mask: radial-gradient(circle 6px at 6px 0, transparent 5.5px, #000 6px) top left / 12px 51% repeat-x, radial-gradient(circle 6px at 6px 100%, transparent 5.5px, #000 6px) bottom left / 12px 51% repeat-x; }
html body main:not(:has(> .progress)) .summary > div { display: flex; justify-content: space-between; padding: 5px 0; color: #4A433E; }
html body main:not(:has(> .progress)) .summary .minus { color: #D23C5C; }
html body main:not(:has(> .progress)) .summary .total { margin-top: 10px; padding-top: 12px; border-top: 2px solid var(--ink); align-items: baseline; }
html body main:not(:has(> .progress)) .summary .total span { color: var(--ink); font-weight: 800; }
html body main:not(:has(> .progress)) .summary .total small { color: #8A8077; font-weight: 400; }
html body main:not(:has(> .progress)) .summary .total strong { color: #1A1A1C; font-size: 22px; font-weight: 900; -webkit-text-stroke: 0; }

/* ---------- 완료·오류 안내: 종이 티켓(절취선) ---------- */
html body .done-card { position: relative; margin: 8px 0 22px; padding: 26px 22px 24px; background: var(--paper); color: var(--ink); border: 0; border-radius: 6px; box-shadow: 0 14px 34px rgba(0, 0, 0, .35); text-align: left; }
html body .done-card::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; border-bottom: 2px dashed #CFC5B9; }
html body .done-card > .ico { width: 30px; height: 30px; padding: 0; background: none; color: #1A1A1C; }
html body .done-card.fail > .ico { background: none; color: #D23C5C; }
html body .done-card h2 { margin: 10px 0 6px; color: #1A1A1C; font-size: 22px; font-weight: 900; }
html body .done-card p { color: #5E554E; }
html body .done-card p b { color: #1A1A1C; }
html body .done-card .btn-primary { background: #1A1A1C; color: var(--li); border: 0; }

/* ---------- 주문 확인 화면 상품 줄 ---------- */
html body .my-order-top small { color: #BAB2AB; letter-spacing: .04em; }
html body main .mini { border-bottom: 1px solid var(--rule); color: #FFFFFF; }
html body main .mini small { color: #BAB2AB; }
html body main .mini b { color: var(--li); }
html body main .kv dt { color: #BAB2AB; }
html body main .kv dd { color: #FFFFFF; }

/* ---------- 로그인·마이페이지 ---------- */
html body .login-links a { color: #FFFFFF; }
html body .login-links span { background: var(--rule); }
html body .my-card { background: none; border: 0; border-left: 3px solid var(--li); border-radius: 0; padding: 14px 16px; }
html body .my-coupon { border: 1.5px dashed var(--li); border-radius: 0; background: none; }

/* ---------- 상품 목록 정렬: 밑줄 탭 ---------- */
html body .sortbar { border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
html body .sort a, html body .sort button { padding: 8px 4px; margin-left: 10px; color: #A39A92; }
html body .sort a.on, html body .sort button.on { color: #FFFFFF; box-shadow: inset 0 -2px 0 var(--li); }

/* ---------- 약관·방침·환불 글: 조 제목 앞 연두 막대 ---------- */
html body .doc-body h3 { margin: 26px 0 8px; padding: 0 0 0 12px; border-left: 3px solid var(--li); border-radius: 0; background: none; color: #FFFFFF; font-size: 16px; }
html body .doc-body { color: #E8E2DC; }
html body .doc-date { color: #A39A92; }

/* ---------- 회원가입: 위 쿠폰 띠 → 절취 쿠폰 / 안내 상자 ---------- */
html body .join-gift { position: relative; display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; padding: 16px 18px; background: var(--paper); color: var(--ink); border: 0; border-radius: 4px; box-shadow: none; }
html body .join-gift > .ico { width: 34px; height: 34px; padding: 6px; box-sizing: border-box; border: 2px dashed var(--ink); border-radius: 50%; background: none; color: var(--ink); }
html body .join-gift b { display: block; color: #1A1A1C; font-size: 16px; font-weight: 900; }
html body .join-gift span { color: #5E554E; }
html body .join-gift::before, html body .join-gift::after { content: ""; position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #2E2A27; }
html body .join-gift::before { left: -8px; } html body .join-gift::after { right: -8px; }
html body .join-how-ico { background: none; color: var(--li); border: 1.5px dashed var(--li); border-radius: 50%; }

/* ---------- 로그인 위 로고: 어두운 바탕에서도 보이게 ---------- */
html body .login-hello .logo-wm b, html body .login-hello b { color: #FFFFFF; }
html body .login-hello .logo-wm b + b { color: var(--li); background: none; padding: 0; }
html body .login-hello p { color: #CFC8C2; }

/* ---------- 환불·교환 안내: 아이콘 네모·동그라미 → 선과 글 중심 ---------- */
html body .rf-line { gap: 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
html body .rf-step, html body .rf-step.ok, html body .rf-step.no, html body .rf-step.ok.soft { background: none; border-radius: 0; padding: 16px 4px; text-align: left; align-items: flex-start; }
html body .rf-step .ico { display: none; }
html body .rf-step b { font-size: 18px; font-weight: 900; color: #FFFFFF; }
html body .rf-step.ok span { color: var(--li); font-weight: 800; }
html body .rf-step.no span { color: var(--co); font-weight: 800; }
html body .rf-mid { color: #A39A92; }
html body .rf-mid .ico { color: var(--li); }
html body .rf-list li { border-bottom: 1px solid var(--rule); padding: 14px 0; }
html body .rf-list .flow-ico, html body .flow-ico { width: auto; height: auto; background: none; border-radius: 0; color: var(--li); }
html body .flow-tip { background: none; border: 0; border-left: 3px solid var(--li); border-radius: 0; padding: 10px 12px; }
html body .flow-tip .btn { border: 0; border-bottom: 1px solid var(--li); border-radius: 0; background: none; color: var(--li); padding: 0 2px; height: auto; }
/* 교환 3단계: 카드 → 번호 타임라인(주문·결제와 같은 말투) */
html body .ex-steps { display: flex; flex-direction: column; gap: 0; margin-top: 14px; }
html body .ex-steps li, html body .ex-steps li.ex-done { position: relative; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; flex-wrap: wrap; text-align: left; padding: 0 0 20px 44px;
  background: none; border: 0; border-radius: 0; color: #FFFFFF; }
html body .ex-steps li::before { content: counter(ex, decimal-leading-zero); position: absolute; left: 0; top: -4px; transform: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--li); border-radius: 50%; background: #2E2A27; color: var(--li); font-size: 11px; font-weight: 900; }
html body .ex-steps li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 26px; bottom: 0; right: auto; width: 2px; border: 0; background: var(--rule); }
html body .ex-steps .ex-ico { display: none; }
html body .ex-steps b { font-size: 15px; color: #FFFFFF; }
html body .ex-steps small { flex-basis: 100%; color: #BAB2AB; }
/* 고객센터 상자(환불 화면 위) */
html body .cs-card { background: none; border: 0; border-left: 3px solid var(--li); border-radius: 0; box-shadow: none; }

/* 2026-10-27 대표님 요청: 상품 목록 칸마다 흐린 점선 테두리 */
html body .plist-rows > .prow { border: 1px dashed rgba(214, 242, 74, .5); padding: 8px 8px 12px; }

/* =====================================================================
   2026-10-27 대표님 요청: 상담 창도 예전 모양과 완전히 다르게 — '메모장 상담'
   손님 화면(#chat)에만. 관리자 상담 화면은 다른 틀이라 그대로.
   ===================================================================== */
/* 여는 단추: 동그라미 → '상담' 글자가 붙은 알약 */
html body #chat .chat-fab { width: auto; height: 48px; padding: 0 18px 0 14px; gap: 8px; border-radius: 999px; background: var(--li); color: #1A1A1C; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); }
html body #chat .chat-fab .ico { width: 22px; height: 22px; }
html body #chat .chat-fab::after { content: "상담"; font-size: 14px; font-weight: 900; letter-spacing: .04em; }
/* 창 */
html body #chat .chat-win { background: #2E2A27; color: #F0EBE5; border-radius: 0; }
@media (min-width: 700px) { html body #chat .chat-win { border-radius: 6px; } }
html body #chat .chat-head { padding: 14px 16px 12px; background: #262320; color: #FFFFFF; border-bottom: 1px solid #4A433E; }
html body #chat .chat-head .chat-logo { display: inline-flex; gap: 4px; height: auto; font-size: 17px; font-weight: 900; line-height: 1.2; }
html body #chat .chat-head .chat-logo b { color: #FFFFFF; }
html body #chat .chat-head .chat-logo b + b { color: var(--li); }
html body #chat .chat-head .chat-logo::after { content: "상담"; margin-left: 4px; color: #FFFFFF; font-weight: 900; }
html body #chat .chat-head small { display: flex; align-items: center; gap: 6px; margin-top: 5px; color: #BAB2AB; font-size: 12px; opacity: 1; }
html body #chat .chat-head small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--li); box-shadow: 0 0 0 3px rgba(214, 242, 74, .2); }
html body #chat .chat-x { border-radius: 0; color: #FFFFFF; }
html body #chat .chat-body { padding: 18px 16px; gap: 12px; }
/* 인사: 종이 메모 + 위에 붙인 테이프 */
html body #chat .chat-hello { position: relative; margin: 10px 4px 6px; padding: 20px 16px 16px; background: var(--paper); color: var(--ink); border-radius: 2px; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); transform: rotate(-.6deg); font-size: 14.5px; line-height: 1.65; }
html body #chat .chat-hello::before { content: ""; position: absolute; top: -9px; left: 50%; width: 78px; height: 18px; margin-left: -39px; background: rgba(214, 242, 74, .75); transform: rotate(2deg); }
/* 시작 양식: 상자 없이, 점선 칸 */
html body #chat .chat-form { gap: 12px; padding: 6px 2px 0; background: none; border-radius: 0; }
html body #chat .chat-form label { color: #CFC8C2; font-size: 12px; letter-spacing: .02em; }
html body #chat .chat-form input[type=text], html body #chat .chat-form input[type=email] { height: 46px; border: 1.5px dashed #8A8077; border-radius: 0; background: rgba(255, 255, 255, .03); color: #FFFFFF; }
html body #chat .chat-form input[type=text]:focus, html body #chat .chat-form input[type=email]:focus { border-color: var(--li); background: rgba(214, 242, 74, .05); outline: 0; }
html body #chat .chat-form .chat-check { color: #E8E2DC; font-size: 12.5px; letter-spacing: 0; }
html body #chat .chat-form .chat-check input { accent-color: var(--li); }
html body #chat .chat-go { min-height: 50px; border: 0; border-radius: 0; background: var(--li); color: #1A1A1C; font-weight: 900; }
html body #chat .chat-go::after { content: " →"; }
html body #chat .chat-faq button { border: 1.5px solid #6B625A; border-radius: 999px; background: none; color: #F0EBE5; }
html body #chat .chat-note { color: #A39A92; }
html body #chat .chat-err { color: var(--co); }
/* 말풍선: 손님 = 연두 네모(오른쪽 아래 모서리 꺾임), 상담원 = 종이 메모, 안내 = 점선 */
html body #chat .cm-bubble { border-radius: 0; font-size: 14.5px; }
html body #chat .cm-customer .cm-bubble { background: var(--li); color: #1A1A1C; border-radius: 10px 10px 0 10px; }
html body #chat .cm-admin .cm-bubble { background: var(--paper); color: var(--ink); border: 0; border-radius: 10px 10px 10px 0; box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
html body #chat .cm-admin .cm-meta::before { content: "알뜰 스튜디오"; color: var(--li); font-weight: 800; }
html body #chat .cm-system .cm-bubble { background: none; border: 1px dashed #6B625A; color: #BAB2AB; border-radius: 0; }
html body #chat .cm-meta { color: #A39A92; }
/* 입력 줄 */
html body #chat .chat-composer { background: #262320; border-top: 1px solid #4A433E; gap: 8px; }
html body #chat .chat-composer textarea { border: 1.5px dashed #8A8077; border-radius: 0; background: rgba(255, 255, 255, .03); color: #FFFFFF; }
html body #chat .chat-composer textarea:focus { border-color: var(--li); outline: 0; }
html body #chat .chat-attach { border-radius: 0; background: none; border: 1.5px solid #6B625A; color: #F0EBE5; }
html body #chat .chat-send { border-radius: 0; background: var(--li); color: #1A1A1C; }
html body #chat .chat-head .chat-logo, html body #chat .chat-head .chat-logo.logo-wm { flex-direction: row; align-items: baseline; white-space: nowrap; }
html body #chat .chat-head small:empty { display: none; }

/* =====================================================================
   2026-10-27 대표님 요청: 머리줄·아래 탭 틀을 예전과 다르게
   머리줄: 제목 가운데, 오른쪽은 글자 단추 '담은 것 N'
   아래 탭: 5칸, 가운데 '담은 것'은 바 위로 솟은 연두 원, 오른쪽 끝 '상담'(둥근 상담 단추는 탭이 있는 화면에서 숨김)
   ===================================================================== */
html body .top { position: relative; }
html body .top .top-title { position: absolute; left: 56px; right: 96px; text-align: center; margin: 0; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .top-cart { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 12px; border: 1px solid #7D746C; border-radius: 999px; color: #FFFFFF; font-size: 12.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
html body .top-cart b { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--li); color: #1A1A1C; font-size: 11px; }
html body .tabbar.tb5 { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; height: 64px; padding: 0 6px env(safe-area-inset-bottom); background: #262320; border-top: 1px solid #4A433E; overflow: visible; }
html body .tabbar.tb5 > a, html body .tabbar.tb5 > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 64px; padding: 0; border: 0; background: none; color: #A39A92; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; text-decoration: none; }
html body .tabbar.tb5 .ico { width: 22px; height: 22px; color: inherit; }
html body .tabbar.tb5 > a.on { color: #FFFFFF; }
html body .tabbar.tb5 > a.on .ico { color: var(--li); }
html body .tabbar.tb5 .tb-cart { position: relative; justify-content: flex-end; padding-bottom: 8px; }
html body .tabbar.tb5 .tb-cart i { position: absolute; top: -22px; left: 50%; width: 56px; height: 56px; margin-left: -28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--li); color: #1A1A1C; box-shadow: 0 0 0 5px #262320, 0 6px 14px rgba(0, 0, 0, .35); font-style: normal; }
html body .tabbar.tb5 .tb-cart i .ico { width: 24px; height: 24px; color: #1A1A1C; }
html body .tabbar.tb5 .tb-cart i em { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #1A1A1C; color: var(--li); font-size: 10.5px; font-style: normal; font-weight: 900; line-height: 18px; text-align: center; }
html body .tabbar.tb5 .tb-cart.on span { color: var(--li); }
html body:has(.tabbar.tb5) #chat .chat-fab { display: none; }
/* 2026-10-27 대표님 요청: 고객센터를 바닥글 맨 아래로 — 사업자 정보와 띄우기 */
html body .foot2.foot-dark .ft-h-cs { margin-top: 26px; }