/**
 * 네츄럴 미당 코리아 — 회원(내 정보)·매장 주인·약관 화면 추가 스타일 (화면 B, 접두사 .acc- / .pt-)
 * from: work/쇼핑몰/계획.md 「화면 공통 규칙」 · work/design.md 2)·3)
 * site.css + shop.css 다음에 부른다. shop.css 에 있는 클래스는 다시 만들지 않는다. 색은 남색·연두·종이색만.
 */

/* ---------- 로그인·가입 좁은 틀 ---------- */
.acc-auth { width: min(100% - var(--gutter) * 2, 560px); margin-inline: auto; }
.acc-auth .sh-page-head { text-align: left; }
.acc-foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: 20px; font-size: 15px; }
.acc-foot-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-navy); font-weight: 600; text-underline-offset: 4px; }
.acc-divider { display: flex; align-items: center; gap: 14px; color: var(--sh-muted); font-size: 13px; margin: 8px 0; }
.acc-divider::before, .acc-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.acc-social { display: grid; gap: 10px; }
.acc-social .btn { width: 100%; }

/* 가입 단계 번호 */
.acc-step { display: grid; gap: 16px; }
.acc-step + .acc-step { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--c-line); }
.acc-step-head { display: flex; align-items: baseline; gap: 12px; }
.acc-step > legend { float: left; width: 100%; } /* 제목이 테두리 위에 걸치지 않게 일반 칸으로 */

/* 약관 동의 줄(체크 + 보기) */
.acc-agree { display: grid; }
.acc-agree-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.acc-agree-row .sh-check { flex: 1; min-width: 0; }
.acc-tag { font-size: 13px; font-weight: 600; color: var(--c-navy); flex: none; }
.acc-tag.is-opt { color: var(--sh-muted); }

/* 비밀번호 규칙 실시간 안내 */
.acc-rules { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--sh-muted); }
.acc-rules li::before { content: "○"; display: inline-block; width: 1.3em; }
.acc-rules li.is-ok { color: var(--c-ink); font-weight: 600; }
.acc-rules li.is-ok::before { content: "●"; color: var(--c-navy); }

/* 휴대폰 인증 */
.acc-sms-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.acc-timer { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--c-navy); font-size: 14px; }
.acc-dev { font-size: 13px; padding: 8px 12px; border-radius: var(--sh-radius-sm); background: var(--c-apricot); color: var(--c-ink); }
.acc-ok { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--c-ink); }
.acc-ok::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-lime); font-size: 13px; }
.sh-inline-field .btn { flex: none; white-space: nowrap; }

/* ---------- 내 정보·매장 틀(왼쪽 메뉴 + 본문) ---------- */
.acc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.acc-nav { position: sticky; top: calc(var(--sh-header-h) + 24px); }
.acc-nav-title { font-family: var(--f-display); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-navy); margin-bottom: 12px; }
.acc-nav-list { display: grid; gap: 2px; border-top: 2px solid var(--c-ink); padding-top: 10px; }
.acc-nav-link { display: flex; align-items: center; min-height: 44px; padding: 4px 12px 0; border-radius: var(--sh-radius-sm); font-family: var(--f-display); font-weight: 500; font-size: 15px; color: var(--c-body); text-decoration: none; }
.acc-nav-link:hover { color: var(--c-ink); background: rgb(var(--c-ink-rgb) / 0.05); }
.acc-nav-link[aria-current="page"] { color: var(--c-ink); background: var(--c-lime-bg); font-weight: 700; }
.acc-nav-sep { height: 1px; margin: 8px 12px; background: var(--c-line); }
.acc-nav-link.is-quiet { color: var(--sh-muted); font-size: 14px; }
.acc-main { min-width: 0; }
.acc-layout.is-solo { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; }
.acc-main > .sh-page-head { margin-bottom: clamp(20px, 3vw, 36px); }

/* 요약 숫자 카드 */
.acc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.acc-stat { display: grid; gap: 6px; align-content: start; padding: 20px 22px; background: var(--sh-surface); border: 1px solid var(--c-line); border-radius: var(--sh-radius); text-decoration: none; color: inherit; }
a.acc-stat:hover { border-color: var(--c-navy); }
.acc-stat-label { font-size: 14px; color: var(--sh-muted); }
.acc-stat-value { font-family: var(--f-display); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.2; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.acc-stat-sub { font-size: 13px; color: var(--sh-muted); }
.acc-stat.is-key { background: var(--c-ink); border-color: var(--c-ink); }
.acc-stat.is-key .acc-stat-label, .acc-stat.is-key .acc-stat-sub { color: rgb(255 255 255 / 0.72); }
.acc-stat.is-key .acc-stat-value { color: var(--c-white); }

.acc-hello { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.acc-hello-name { font-family: var(--f-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 32px); color: var(--c-ink); line-height: 1.25; }

/* 주문 카드 */
.acc-orders { display: grid; gap: 12px; }
.acc-order { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px 20px; align-items: center; padding: 18px; background: var(--sh-surface); border: 1px solid var(--c-line); border-radius: var(--sh-radius); }
.acc-order-img { width: 88px; height: 100px; border-radius: var(--sh-radius-sm); background: var(--c-paper); overflow: hidden; display: grid; place-items: center; }
.acc-order-img img { width: 100%; height: 100%; object-fit: contain; }
.acc-order-body { display: grid; gap: 6px; min-width: 0; }
.acc-order-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; color: var(--sh-muted); }
.acc-order-name { font-family: var(--f-display); font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--c-ink); overflow-wrap: anywhere; }
.acc-order-amount { font-weight: 700; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.acc-order-actions { display: grid; gap: 8px; justify-items: stretch; }

/* 목록 카드(배송지·쿠폰·문의·후기) */
.acc-cards { display: grid; gap: 12px; }
.acc-cards-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.acc-item { display: grid; gap: 8px; padding: 20px 22px; background: var(--sh-surface); border: 1px solid var(--c-line); border-radius: var(--sh-radius); min-width: 0; }
.acc-item.is-default { border-color: var(--c-navy); box-shadow: inset 0 0 0 1px var(--c-navy); }
.acc-item.is-dim { background: transparent; }
.acc-item.is-dim .acc-item-title { color: var(--sh-muted); }
.acc-item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; color: var(--c-ink); font-size: 17px; overflow-wrap: anywhere; }
.acc-item-text { font-size: 15px; overflow-wrap: anywhere; }
.acc-item-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; }
.acc-coupon-value { font-family: var(--f-display); font-weight: 700; font-size: 26px; color: var(--c-ink); line-height: 1.1; }
.acc-media { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.acc-media .acc-order-img { width: 72px; height: 84px; }

/* 문의 펼치기 */
.acc-qa summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 44px; cursor: pointer; list-style: none; }
.acc-qa summary::-webkit-details-marker { display: none; }
.acc-qa summary:focus-visible { outline: 3px solid var(--c-navy); outline-offset: 4px; border-radius: 8px; }
.acc-qa-body { display: grid; gap: 12px; padding-top: 14px; margin-top: 12px; border-top: 1px solid var(--c-line); white-space: pre-line; overflow-wrap: anywhere; }

/* 적립금 큰 숫자 */
.acc-balance { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; }
.acc-balance-value { font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, 3.4vw, 44px); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.acc-plus { color: var(--c-navy); font-weight: 700; }
.acc-minus { color: var(--c-body); }

/* 긴 약관 본문 상자 */
.acc-terms-box { max-height: 280px; overflow-y: auto; padding: 18px 20px; border: 1px solid var(--c-line); border-radius: var(--sh-radius-sm); background: var(--c-white); font-size: 14px; }

/* 안내 목록 */
.acc-notes { display: grid; gap: 8px; padding-left: 1.2em; list-style: disc; }

/* ---------- 매장 화면 ---------- */
.pt-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.pt-toolbar .sh-select { width: auto; min-width: 170px; border-radius: var(--r-pill); padding-left: 18px; }
.pt-rate { font-family: var(--f-display); font-weight: 700; color: var(--c-ink); }

/* 일별 막대(순수 SVG) */
.pt-chart { display: grid; gap: 8px; }
.pt-chart svg { display: block; width: 100%; height: 180px; background: repeating-linear-gradient(to top, transparent 0 44px, rgb(var(--c-ink-rgb) / 0.07) 44px 45px); border-bottom: 2px solid var(--c-ink); }
.pt-bar { fill: var(--c-navy); }
.pt-bar:hover { fill: var(--c-ink); }
.pt-bar.is-zero { fill: rgb(var(--c-ink-rgb) / 0.12); }
.pt-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--sh-muted); font-variant-numeric: tabular-nums; }
.pt-legend { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 13px; color: var(--sh-muted); }

/* 매장 링크 복사 */
.pt-links { display: grid; gap: 14px; }
.pt-link { display: grid; gap: 6px; }
.pt-link .sh-inline-field .sh-input { font-size: 15px; }

/* 정산서 합계 줄 */
.pt-sum { display: grid; gap: 0; margin: 0; }
.pt-sum > div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--c-line); font-size: 15px; }
.pt-sum dt { color: var(--c-body); }
.pt-sum dd { margin: 0; font-weight: 600; color: var(--c-ink); font-variant-numeric: tabular-nums; text-align: right; }
.pt-sum .is-total { border-top: 2px solid var(--c-ink); border-bottom: 0; padding-top: 14px; }
.pt-sum .is-total dt { font-weight: 700; color: var(--c-ink); }
.pt-sum .is-total dd { font-family: var(--f-display); font-size: 24px; font-weight: 700; }
.pt-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- 약관 화면 ---------- */
.acc-policy-meta { font-size: 14px; color: var(--sh-muted); }

/* ---------- 반응형 ---------- */
@media (max-width: 959px) {
  .acc-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .acc-nav { position: static; margin-inline: calc(var(--gutter) * -1); }
  .acc-nav-title { display: none; }
  .acc-nav-list { display: flex; gap: 6px; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--c-line); padding: 0 var(--gutter) 12px; scrollbar-width: none; }
  .acc-nav-list::-webkit-scrollbar { display: none; }
  .acc-nav-link { flex: none; white-space: nowrap; border: 1px solid var(--c-line); border-radius: var(--r-pill); padding: 4px 16px 0; font-size: 14px; background: var(--c-white); }
  .acc-nav-link[aria-current="page"] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }
  .acc-nav-sep { display: none; }
}
@media (max-width: 767px) {
  .acc-order { grid-template-columns: 72px minmax(0, 1fr); padding: 16px; }
  .acc-order-img { width: 72px; height: 84px; }
  .acc-order-actions { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .acc-cards-2 { grid-template-columns: minmax(0, 1fr); }
  .acc-media { grid-template-columns: 64px minmax(0, 1fr); }
  .acc-media > .btn, .acc-media > a.btn { grid-column: 1 / -1; }
  .acc-media .acc-order-img { width: 64px; height: 76px; }
  .acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acc-stat { padding: 16px; }
  .sh-inline-field { flex-wrap: wrap; }
  .sh-inline-field .sh-input { flex: 1 1 180px; }
  .pt-toolbar .sh-select { width: 100%; }
}

/* ---------- 인쇄(정산서) — 머리말·메뉴·꼬리말·버튼 숨김 ---------- */
@media print {
  .sh-header, .sh-footer, .sh-band, [data-shop-bands], .acc-nav, .skip-link, .sh-toast-region, .no-print { display: none !important; }
  body.sh-body { background: #fff; }
  .sh-page { padding: 0; }
  .acc-layout { display: block; }
  .sh-card { border-color: #999; break-inside: avoid; }
  .sh-table th { background: none; }
  .sh-table-wrap { overflow: visible; }
}