/* 고객 웹 스타일: A안 아틀리에 잉크 (모바일 우선, 최대 폭 480px). 관리 화면에서는 로드하지 않음 */

/* ===== 디자인 토큰 ===== */
:root {
    /* 색상: 대비 수치는 Documents/design/20261101-rental-디자인적용/spec.md 3장 */
    --color-primary: #1b1a18;           /* 먹색: 주요 버튼 */
    --color-primary-hover: #33312d;     /* 주요 버튼 눌림 */
    --color-on-primary: #ffffff;
    --color-text: #1b1a18;
    --color-heading: #1b1a18;
    --color-link: #1b1a18;
    --color-text-muted: #5c574f;        /* 보조 글자 */
    --color-background: #faf8f4;        /* 오프화이트 바탕 */
    --color-surface: #ffffff;
    --color-border: #e4ded3;            /* 장식 구분선: 정보 전달 금지 */
    --color-input-border: #8c867b;      /* 입력칸·보조 버튼 윤곽 */
    --color-neutral-surface: #efe8dc;   /* 이미 담김, 추천 칩, 사진 틀 */
    --color-button-hover: #efe8dc;
    --color-disabled-surface: #e4ded3;  /* 비활성 버튼 면 */
    --color-disabled-text: #5c574f;
    --color-brass: #8a6a2f;             /* 황동: 001 짧은 선에만 */
    --color-focus: #1d4ed8;
    --color-success: #1f6b45;
    --color-success-surface: #e7f3ec;
    --color-danger: #a8281e;
    --color-danger-surface: #fbe9e7;
    --color-warning: #8a5a00;
    --color-warning-surface: #fbf1dc;
    --color-backdrop: rgb(27 26 24 / 50%);
    --color-camera-background: #101418;
    /* 소셜 로그인 제공자 색상: 실제 연동 전 공식 에셋으로 교체 */
    --color-kakao: #fee500;
    --color-naver: #03c75a;
    --color-on-provider: #191919;

    /* 글꼴 */
    --font-family-serif: "Noto Serif KR", "Apple SD Gothic Neo", serif;  /* 001 매장명·011 완료 제목 전용 */
    --font-size-pending-mark: 0.875rem;
    --font-size-medium: 1.125rem;
    --font-size-store-name: 1.625rem;   /* 001 매장명 */
    --font-size-store-name-large: 2rem; /* 001 소개 이미지가 없을 때 매장명 */
    --font-size-size: 2rem;             /* 007 사이즈 표기 전용 */

    /* 모서리·크기 */
    --radius-medium: 8px;
    --radius-provider: 12px;            /* 카카오 가이드 모서리 */
    --touch-target: 48px;               /* 고객-01: 버튼·입력칸 48px 이상 */
    --touch-target-action: 56px;        /* 하단 고정 주요 버튼 */
    --touch-target-scan: 64px;          /* 005 QR 스캔 */
    --width-shop: 480px;
    --size-item-photo-width: 92px;      /* 007 옷 사진 */
    --size-item-photo-height: 115px;
    --size-line-photo-width: 56px;      /* 007 추천·008 줄 사진 */
    --size-line-photo-height: 70px;
    --font-size-order-number: 2.5rem;   /* 011 주문번호 */
    --font-size-cart-number: 5rem;      /* 012 장바구니 번호: 직원이 화면을 보고 찾음 */
    --font-size-cart-number-long: 3.5rem; /* 012 5자리 이상 번호: 360px 폭에서 한 줄 유지 */
    --size-scan-frame: 60%;
    --bottom-bar-clearance: 190px;      /* 키보드 이동 때 포커스가 하단 막대에 가리지 않게 두는 여유(가장 높은 008·009 기준) */
    --hold-section-clearance: 96px;     /* 키보드 이동 때 포커스가 남은 시간 칸에 가리지 않게 두는 여유 */
}

/* ===== 공통 요소 조정 ===== */
/* 하단 막대를 화면 아래에 붙이려고 세로 배치: 내용이 짧아도 막대는 맨 아래 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

body > main {
    flex: 1 0 auto;
    width: 100%;
}

html:has(.shop-bottom-bar) {
    scroll-padding-bottom: var(--bottom-bar-clearance);
}

html:has(.hold-section) {
    scroll-padding-top: var(--hold-section-clearance);
}

h2 {
    font-size: var(--font-size-base);
}

/* 그림자 대신 구분선으로 절제한 카드 */
.card {
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
}

/* 제목과 내용 사이를 시안대로 좁힘 */
.section-heading {
    margin-bottom: var(--space-2);
}

/* 카드 안 마지막 요소의 아래 여백 제거: 카드 안쪽 여백만 남김 */
.card > :last-child,
.section-heading > div > :last-child {
    margin-bottom: 0;
}

/* 주의 안내: 실패는 아니지만 놓치면 안 되는 상태 (결제 중단 등) */
.warning-message {
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--color-warning);
    border-radius: var(--radius-small);
    background: var(--color-warning-surface);
    color: var(--color-text);
}

/* ===== 상단 영역 ===== */
.shop-header {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    max-width: var(--width-shop);
    margin: 0 auto;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.shop-brand {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-target);
    min-width: 0;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
}

.shop-brand img {
    width: auto;
    height: 32px;
}

/* 뒤로·로그아웃은 줄지 않고 매장명이 남은 폭을 사용 */
.shop-back,
.shop-logout {
    flex: none;
}

.shop-page {
    max-width: var(--width-shop);
    margin: 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-6);
}

/* ===== 하단 고정 동작 막대 (005·007·008·009·010·011·012) ===== */
/* sticky: 스크롤 중에는 화면 아래에 붙고, 끝까지 내리면 내용 뒤에 놓여 내용을 가리지 않음 */
.shop-bottom-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    flex: none;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

.shop-bottom-inner {
    display: grid;
    gap: var(--space-2);
    max-width: calc(var(--width-shop) - 2rem);
    margin: 0 auto;
}

/* 보조 동작 왼쪽, 주요 동작은 엄지 쪽 오른편 */
.shop-bottom-buttons {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--space-2);
}

.shop-bottom-buttons .button {
    min-height: var(--touch-target-action);
    padding-inline: var(--space-2);
}

.shop-bottom-inner .error-message {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-small);
}

.shop-action-large {
    font-size: var(--font-size-medium);
}

/* ===== 매장 첫 화면 (APR-SCR-001): 사진과 세리프를 쓰는 화면 ===== */
.first-page {
    max-width: var(--width-shop);
    margin: 0 auto;
    padding-bottom: var(--space-5);
}

.shop-hero {
    padding: var(--space-5) var(--space-4) var(--space-4);
    text-align: center;
}

.shop-logo {
    display: block;
    width: auto;
    max-height: 44px;
    margin: 0 auto var(--space-2);
}

.shop-hero h1 {
    margin: 0;
    font-family: var(--font-family-serif);
    font-size: var(--font-size-store-name);
    font-weight: 600;
    letter-spacing: 0;
}

/* 황동 짧은 선: 격식을 더하는 작은 강조 */
.shop-hero::after {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    margin: var(--space-3) auto 0;
    background: var(--color-brass);
}

/* 소개 이미지가 없는 매장: 매장명만 크게 */
.first-page-no-image .shop-hero {
    padding-top: 22vh;
    padding-bottom: var(--space-6);
}

.first-page-no-image .shop-hero h1 {
    font-size: var(--font-size-store-name-large);
}

.shop-intro-image {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.first-message {
    margin: var(--space-4) var(--space-4) 0;
}

.first-message .message,
.first-message .error-message {
    margin-bottom: 0;
}

.login-buttons {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) 0;
}

/* 로그인 유지 안내 (001 로그인 버튼 아래·005 맨 아래, APR-REQ-076) */
.login-keep-notice {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    text-align: center;
}

.login-keep-notice p {
    margin: 0;
}

.button-kakao,
.button-naver {
    position: relative;
    min-height: var(--touch-target-action);
    border-radius: var(--radius-provider);
    color: var(--color-on-provider);
    font-size: var(--font-size-medium);
}

.button-kakao,
.button-kakao:hover,
.button-kakao:active {
    border-color: var(--color-kakao);
    background: var(--color-kakao);
}

.button-naver,
.button-naver:hover,
.button-naver:active {
    border-color: var(--color-naver);
    background: var(--color-naver);
}

/* 제공자 심볼: 버튼 왼쪽 고정, 글자는 가운데 유지 */
.provider-symbol {
    position: absolute;
    left: var(--space-4);
    width: 20px;
    height: 20px;
}

/* 매장 정보 목록 (주소·전화번호·영업시간), 가입 동의의 소셜 정보도 같은 모양 */
.store-info {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    margin: 0;
    font-size: var(--font-size-small);
}

.first-page .store-info {
    margin: var(--space-5) var(--space-4) 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.store-info dt {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
}

.store-info dd {
    display: flex;
    align-items: center;
    min-height: 24px;
    margin: 0;
    white-space: pre-line;
}

/* 전화 걸기 링크: 글자 줄만이 아니라 터치 대상 높이 전체를 누를 수 있게 함 */
.store-phone {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-underline-offset: 3px;
}

/* ===== 가입 동의 (APR-SCR-002): 소셜 정보, 동의 한 줄(체크박스 + 보기), 펼친 약관 ===== */
.signup-profile {
    margin-bottom: var(--space-4);
}

.consent-row {
    margin-bottom: var(--space-2);
}

.consent-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.consent-line .button {
    flex: none;
}

.terms-text {
    max-height: 40vh;
    margin-top: var(--space-2);
    padding: var(--space-3);
    overflow-y: auto;
    border-radius: var(--radius-small);
    background: var(--color-neutral-surface);
    font-size: var(--font-size-small);
    white-space: pre-line;
}

/* ===== 추천 사이즈 (003·005) ===== */
.recommendation-result {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.recommendation-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
}

.recommendation-row dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.recommendation-row dd {
    margin: 0;
}

.recommendation-size {
    font-size: var(--font-size-title);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 폼의 마지막 [다음] 버튼 */
.form-next {
    margin-top: var(--space-4);
}

/* ===== 대여 날짜 (APR-SCR-004) ===== */
/* 일수 미리보기: 비어 있어도 줄 높이 유지(글자가 생길 때 화면이 밀리지 않게 함) */
.date-preview {
    min-height: 1.5em;
    font-weight: 600;
}

.undecided-form {
    text-align: center;
}

/* ===== 고객 홈 (APR-SCR-005) ===== */
.period-range {
    margin-bottom: 0;
    font-size: var(--font-size-medium);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.home-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
}

.home-secondary .button {
    min-height: var(--touch-target-action);
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* QR 스캔: 화면의 유일한 먹색 버튼 */
.home-scan {
    min-height: var(--touch-target-scan);
    font-size: var(--font-size-large);
}

.home-scan svg {
    width: 26px;
    height: 26px;
}

/* ===== QR 스캔 (APR-SCR-006) ===== */
.scan-camera {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-medium);
    background: var(--color-camera-background);
}

.scan-video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* QR 틀: 바깥을 어둡게 해 비출 위치를 보여 줌 */
.scan-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size-scan-frame);
    aspect-ratio: 1;
    border: 3px solid var(--color-on-primary);
    border-radius: var(--radius-medium);
    box-shadow: 0 0 0 100vmax var(--color-backdrop);
    transform: translate(-50%, -50%);
}

/* 서버 확인 대기 표시: QR 틀 가운데에 겹쳐 화면 밀림 없음 */
.scan-checking {
    position: absolute;
    top: 50%;
    left: 50%;
    color: var(--color-on-primary);
    transform: translate(-50%, -50%);
}

.scan-guide {
    margin-bottom: var(--space-3);
    font-weight: 600;
    text-align: center;
}

.scan-camera-area {
    margin-bottom: var(--space-4);
}

/* ===== 스캔 결과 (APR-SCR-007): 결과 문구와 사이즈를 크게, 사진은 확인용으로 작게 ===== */
/* 결과 영역: 아이콘·문구·색 3중 구분 */
.result {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    border: 1px solid;
    border-radius: var(--radius-medium);
}

.result p {
    margin: 0;
}

.result-added {
    border-color: var(--color-success);
    background: var(--color-success-surface);
    color: var(--color-success);
}

.result-neutral {
    border-color: var(--color-input-border);
    background: var(--color-neutral-surface);
    color: var(--color-text);
}

.result-unavailable {
    border-color: var(--color-danger);
    background: var(--color-danger-surface);
    color: var(--color-danger);
}

.result-icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: currentcolor;
}

.result-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--color-on-primary);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.result-title {
    font-size: var(--font-size-title);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.result .result-note {
    margin-top: var(--space-1);
    color: var(--color-text);
}

.scan-result {
    display: grid;
    grid-template-columns: var(--size-item-photo-width) minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
}

.scan-result p {
    margin: 0;
}

/* 사진: 여러 장은 작은 틀 안에서 옆으로 밀면 한 장씩 멈춤 */
.item-gallery {
    display: flex;
    width: var(--size-item-photo-width);
    height: var(--size-item-photo-height);
    overflow-x: auto;
    border-radius: var(--radius-small);
    background: var(--color-neutral-surface);
    scroll-snap-type: x mandatory;
}

.item-gallery img {
    flex: none;
    width: var(--size-item-photo-width);
    height: var(--size-item-photo-height);
    object-fit: contain;
    scroll-snap-align: start;
}

.item-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-item-photo-width);
    height: var(--size-item-photo-height);
    border-radius: var(--radius-small);
    background: var(--color-neutral-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    text-align: center;
}

.scan-result .item-photo-note {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    text-align: center;
}

.item-title {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
}

.item-size {
    font-size: var(--font-size-size);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.item-size-label {
    white-space: nowrap;
}

.scan-result .item-price {
    margin-top: var(--space-1);
    font-size: var(--font-size-medium);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.item-period {
    font-variant-numeric: tabular-nums;
}

.item-period span:not(.visually-hidden) {
    display: block;
}

.scan-result .item-warning {
    grid-column: 1 / -1;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-small);
    background: var(--color-warning-surface);
    color: var(--color-warning);
    font-weight: 600;
}

/* 이 디자인 추천 사이즈 (CHG-021 3.6): 경고보다 낮은 위계의 안내 띠(추천 칩과 같은 중립 면), 다르면 아래 경고가 이어짐 */
.scan-result .item-recommend {
    grid-column: 1 / -1;
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-small);
    background: var(--color-neutral-surface);
    color: var(--color-text);
    font-weight: 600;
}

.remove-action {
    margin-bottom: var(--space-3);
}

/* 확인 화면 담기 (APR-CHG-020 3-2): 큰 먹색 버튼 + 아래 작은 확보 안내 */
.add-action {
    margin-bottom: var(--space-4);
}

.add-action-note {
    margin: var(--space-2) 0 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    text-align: center;
}

/* 근접 추천 목록: 사진·설명 한 줄 아래 전체 폭 버튼 */
.suggestion-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.suggestion {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.suggestion-body {
    display: grid;
    grid-template-columns: var(--size-line-photo-width) minmax(0, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.suggestion .thumbnail {
    width: var(--size-line-photo-width);
    height: var(--size-line-photo-height);
}

.suggestion-text p {
    margin: 0;
}

.suggestion-size {
    font-size: var(--font-size-large);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.suggestion-price {
    font-variant-numeric: tabular-nums;
}

/* 비슷한 옷이 없을 때 대여 불가 띠 바로 아래 한 줄: 다음 행동 안내라 본문색·굵게 */
.no-recommendation {
    margin: calc(-1 * var(--space-1)) 0 var(--space-3);
    font-weight: 600;
}

/* 바로 담기: 화면당 먹색 면 버튼 1개 원칙에 따라 굵은 윤곽 버튼 */
.button-strong {
    border: 2px solid var(--color-primary);
}

/* ===== 장바구니 (APR-SCR-008): 남은 시간 상단 고정, 합계 + 결제 하단 고정 ===== */
/* 남은 시간: 스크롤해도 위에 고정 */
.hold-section {
    position: sticky;
    top: 0;
    z-index: 3;
}

.hold-timer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: var(--font-size-medium);
    font-variant-numeric: tabular-nums;
}

.hold-timer svg {
    flex: none;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
}

.hold-timer strong {
    font-size: var(--font-size-large);
}

/* 남은 시간 5분 이하 강조: 색 + 면 + 굵기 (shop-cart.js가 지정) */
.hold-urgent {
    border-color: var(--color-danger);
    background: var(--color-danger-surface);
    color: var(--color-danger);
    font-weight: 700;
}

.hold-text {
    margin-bottom: var(--space-3);
}

.cart-group {
    margin-bottom: var(--space-2);
    padding-block: var(--space-1);
}

/* 카드 위 여백이 좁아 제목을 다른 카드와 맞춤 */
.cart-group > h2 {
    margin-top: var(--space-3);
}

.cart-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart-line {
    display: grid;
    grid-template-columns: var(--size-line-photo-width) minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.cart-line + .cart-line {
    border-top: 1px solid var(--color-border);
}

.cart-line .thumbnail {
    width: var(--size-line-photo-width);
    height: var(--size-line-photo-height);
}

.cart-line-text p {
    margin: 0;
}

.cart-line-name {
    display: block;
    font-size: var(--font-size-medium);
    font-weight: 700;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
}

.line-reason {
    display: block;
}

.cart-line-side {
    display: grid;
    justify-items: end;
    align-content: space-between;
    gap: var(--space-2);
}

.cart-line-price {
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 예상 금액 목록 */
.amount-list {
    margin: 0;
}

.amount-list div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 2px 0;
}

.amount-list dt {
    flex: none;
    color: var(--color-text-muted);
}

.amount-list dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* 014 대여품 카드 안 금액 줄: 카드 아래 여백 맞춤 */
.cart-group > .amount-list {
    padding-bottom: var(--space-3);
}

/* 014 끝난 금액 합계: 결제 줄과 구분 */
.order-settlement-totals {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

/* 합계: 하단 고정 막대에 한 번만 표시 */
.amount-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
}

.amount-total dt {
    font-weight: 600;
}

.amount-total dd {
    margin: 0;
    font-size: var(--font-size-large);
    font-weight: 800;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.amount-total dd.amount-pending {
    font-size: var(--font-size-base);
    font-weight: 600;
}

/* ===== 주문서 (APR-SCR-009): 입력과 하단 버튼이 한 폼이라 폼이 body의 세로 배치를 이어받음 ===== */
.checkout-form {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    width: 100%;
}

.checkout-form > main {
    flex: 1 0 auto;
    width: 100%;
}

.pickup-field {
    margin: 0;
    padding: 0;
    border: 0;
}

.pickup-field legend {
    margin-bottom: var(--space-2);
    padding: 0;
    font-weight: 700;
}

.pickup-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--space-2);
}

/* 라디오를 버튼 전체에 투명하게 덮어 눌림 범위와 키보드 동작을 그대로 사용 */
.pickup-option {
    position: relative;
    display: block;
}

.pickup-option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.pickup-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 선택: 굵은 테두리·면·체크 표시 3중 (화면당 먹색 면 버튼 1개 원칙으로 먹색 면은 쓰지 않음) */
.pickup-option input:checked + span {
    border: 2px solid var(--color-primary);
    background: var(--color-neutral-surface);
    font-weight: 800;
}

/* 체크 표시: 글꼴에 없는 기호 대신 SVG를 글자색으로 칠함 (기기 글꼴 차이 방지) */
.pickup-option input:checked + span::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-right: var(--space-1);
    background: currentcolor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pickup-option input:focus-visible + span {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.pickup-option input:disabled {
    cursor: not-allowed;
}

.pickup-option input:disabled + span {
    border-color: var(--color-disabled-surface);
    background: var(--color-disabled-surface);
    color: var(--color-disabled-text);
    text-decoration: line-through;
}

.checkout-check {
    font-weight: 600;
}

/* 결제 전 동의 (009, APR-REQ-081): 줄 사이 구분선, 펼친 전문은 체크 줄 아래 */
.consent-row + .consent-row {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

/* 알림 일정 카드 (011·014): 회차 사이에서만 줄이 바뀌게 회차 하나는 한 덩어리 */
.notice-list .notification-times {
    white-space: normal;
}

.notification-time {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* 픽업·반납 안내: 매장 설정 문구의 줄바꿈 유지 */
.notice-list {
    margin: 0;
}

.notice-list dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

.notice-list dd {
    margin: 0 0 var(--space-3);
    white-space: pre-line;
}

.notice-list dd:last-child {
    margin-bottom: 0;
}

/* 결제 금액: 줄 목록 바로 아래 강조 */
.amount-list + .amount-total {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

/* 막대·카드 안 남은 시간: 위쪽 고정 없이 그 자리에 표시 */
.hold-inline {
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-small);
}

.hold-inline .hold-timer {
    justify-content: center;
}

.shop-action-main {
    min-height: var(--touch-target-action);
    font-size: var(--font-size-medium);
}

.shop-bottom-note {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
    font-weight: 600;
    text-align: center;
}

/* ===== 주문 줄 (009·010·011) ===== */
.order-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-line {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.order-line + .order-line {
    border-top: 1px solid var(--color-border);
}

.order-line p {
    margin: 0;
}

.order-line-name {
    font-variant-numeric: tabular-nums;
}

.order-line-price {
    flex: none;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* 줄 목록과 합계 사이 구분선 */
.order-lines + .amount-list,
.order-lines + .amount-total {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

/* ===== 결제 완료 (APR-SCR-011): 세리프를 쓰는 화면 ===== */
.order-complete-title {
    margin-bottom: var(--space-2);
    font-family: var(--font-family-serif);
    font-weight: 600;
    letter-spacing: 0;
    text-align: center;
}

.order-number {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-order-number);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.order-notified {
    text-align: center;
}

/* ===== 고객 홈의 진행 중 주문 안내 (005): 문구 왼쪽, [보기] 오른쪽 ===== */
.active-order-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.active-order-notice p {
    margin: 0;
}

.active-order-notice .button {
    flex: none;
}

/* 연체 안내: 문구·면·테두리로 강조 */
.active-order-overdue {
    border-color: var(--color-danger);
    background: var(--color-danger-surface);
    color: var(--color-danger);
}

/* ===== 내 주문 (APR-SCR-013): 카드 전체가 014 링크 ===== */
.order-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 카드 전체가 눌리게 안쪽 여백을 링크로 옮김 */
.order-list .card {
    padding: 0;
    overflow: hidden;
}

.order-list-link {
    display: block;
    padding: var(--space-4);
    color: inherit;
    text-decoration: none;
}

.order-list-link p {
    margin: 0;
}

.order-list-link:hover {
    background: var(--color-button-hover);
}

.order-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

/* 상태 칩과 연체 칩 */
.order-list-badges {
    display: flex;
    flex: none;
    gap: var(--space-1);
}

.order-list-number {
    font-size: var(--font-size-medium);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.order-list-period {
    font-variant-numeric: tabular-nums;
}

/* 금액 오른쪽 정렬: 벌 수와 같은 줄 */
.order-list-amount {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ===== 결제 대기 (010)·카운터 안내 (012) ===== */
/* 결제 진행 안내 (008·009·010): 그만하기는 보조 동작이라 주요 버튼 아래 */
.payment-stop {
    margin-top: var(--space-2);
}

.payment-stop-guide {
    margin: var(--space-1) 0 0;
    text-align: center;
}

/* 모의 응답 버튼 (시험용): 좁은 폭에서도 한 줄에 셋 */
.mock-response {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.mock-response .button {
    padding-inline: var(--space-1);
}

/* 결과를 기다리는 중임을 보이는 회전 표시 */
.status-spinner {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto var(--space-3);
    border: 3px solid var(--color-input-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: status-spin 1s linear infinite;
}

@keyframes status-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 움직임 줄이기 설정이면 멈춘 고리로 표시 */
@media (prefers-reduced-motion: reduce) {
    .status-spinner {
        animation: none;
    }
}

.status-title {
    text-align: center;
    text-wrap: balance;
}

.status-guide {
    text-align: center;
}

.counter-card {
    text-align: center;
}

.counter-card .amount-total {
    text-align: left;
}

.counter-number-label {
    margin: 0;
    color: var(--color-text-muted);
    font-weight: 600;
}

.counter-number {
    margin-bottom: var(--space-2);
    font-size: var(--font-size-cart-number);
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.counter-number-long {
    font-size: var(--font-size-cart-number-long);
}

.counter-phone {
    white-space: nowrap;
}

.counter-customer {
    font-size: var(--font-size-medium);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.counter-card .hold-inline {
    margin-top: var(--space-3);
}

/* ===== 사진 크게 보기 (007) ===== */
/* 사진 버튼: 틀 모양은 그대로 두고 누를 수 있게만 함 */
.photo-open {
    display: block;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: var(--radius-small);
    background: none;
    cursor: zoom-in;
}

.item-gallery .photo-open {
    width: var(--size-item-photo-width);
    height: var(--size-item-photo-height);
    scroll-snap-align: start;
}

/* 넘치는 부분을 자르는 틀 안이라 포커스 선을 안쪽으로 표시 */
.item-gallery .photo-open:focus-visible {
    outline-offset: -3px;
}

.photo-viewer {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--color-camera-background);
    color: var(--color-on-primary);
}

/* 닫힌 dialog가 보이지 않게 열렸을 때만 세로 배치 지정 */
.photo-viewer[open] {
    display: flex;
    flex-direction: column;
}

/* 배경 스크롤 잠금 */
html:has(.photo-viewer[open]) {
    overflow: hidden;
}

.photo-viewer :focus-visible {
    outline-color: var(--color-on-primary);
}

.photo-viewer-bar,
.photo-viewer-nav {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
}

.photo-viewer-nav {
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
}

.photo-viewer-nav .button {
    flex: 1 1 0;
}

.photo-viewer-count {
    margin: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 옆으로 밀면 한 장씩 멈춤 */
.photo-viewer-track {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.photo-viewer-track img {
    flex: none;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
    scroll-snap-align: start;
}

/* ===== 고객 웹 바닥 (CHG-023 D-09): 모든 고객 화면 맨 아래, 처리방침(굵게)·매장 이름·전화 ===== */
.shop-footer {
    display: flex;
    flex: none;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 var(--space-4);
    width: 100%;
    max-width: var(--width-shop);
    margin: 0 auto;
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--font-size-small);
}

/* 바닥 링크: 글자 줄만이 아니라 터치 대상 높이 전체를 누를 수 있게 함 */
.shop-footer a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
}

/* 처리방침: 작성지침의 '눈에 띄는 표시'로 굵게, 본문 글자색 */
.shop-footer-policy {
    color: var(--color-text);
    font-weight: 700;
}

.shop-footer-store {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-2);
    margin: 0;
}

/* ===== 가입 동의 보탬 (CHG-023 D-08·D-09): 전체 동의, 처리방침 보기 링크 ===== */
.consent-all {
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    font-weight: 700;
}

.signup-policy-link {
    margin: 0;
}

.signup-policy-link a {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch-target);
}

/* 동의 목록 아래 안내와 [동의하고 시작하기] 사이 여백 */
.signup-policy-link + .field-hint {
    margin-bottom: var(--space-4);
}

/* 14세 확인의 [취소하고 로그아웃]: 주요 버튼과 떨어뜨려 잘못 누르지 않게 함 */
.age-confirm-cancel {
    margin-top: var(--space-3);
}

/* ===== 015 개인정보 처리방침: 시행일·이전 판, 목차, 장별 본문 표 ===== */
.privacy-effective-date {
    margin-bottom: var(--space-2);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.privacy-version-form label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--font-size-small);
}

/* 판 고르기 + [보기]: 좁은 폭에서도 한 줄, 고르기 칸이 남은 폭 사용 */
.privacy-version-row {
    display: flex;
    gap: var(--space-2);
}

.privacy-version-row select {
    flex: 1 1 auto;
    min-width: 0;
}

.privacy-version-row .button {
    flex: none;
}

.privacy-toc ol {
    margin: 0;
    padding-left: var(--space-5);
}

/* 목차 링크: 줄마다 터치 대상 높이 */
.privacy-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.privacy-section {
    margin-top: var(--space-5);
    /* 목차로 이동했을 때 제목이 화면 맨 위에 붙지 않게 함 */
    scroll-margin-top: var(--space-4);
}

.privacy-section ul {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
}

/* 본문 표: 가로 스크롤 없이 칸 안에서 줄바꿈 */
.privacy-table {
    width: 100%;
    margin-bottom: var(--space-3);
    border-collapse: collapse;
    font-size: var(--font-size-small);
    table-layout: fixed;
}

.privacy-table th,
.privacy-table td {
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.privacy-table th {
    background: var(--color-neutral-surface);
}

.privacy-facts {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    margin: 0;
}

.privacy-facts dt {
    color: var(--color-text-muted);
}

.privacy-facts dd {
    margin: 0;
}

/* ===== 016 내 정보: 마케팅 스위치, 동의 내역, 탈퇴 안내·확인 창 ===== */
.home-secondary:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.marketing-form {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
}

/* 켜기·끄기 스위치: 글자 상태(켜짐·꺼짐)를 함께 보여 색만으로 상태를 전하지 않음 */
.switch {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
    min-width: var(--touch-target);
    min-height: var(--touch-target);
    padding: 0 var(--space-1);
    border: 0;
    border-radius: var(--radius-small);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
}

.switch-track {
    position: relative;
    width: 48px;
    height: 28px;
    border: 1px solid var(--color-input-border);
    border-radius: 14px;
    background: var(--color-disabled-surface);
}

.switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 0 0 1px var(--color-input-border);
    transition: transform 0.15s ease;
}

.switch[aria-checked="true"] .switch-track {
    border-color: var(--color-primary);
    background: var(--color-primary);
}

.switch[aria-checked="true"] .switch-thumb {
    transform: translateX(20px);
}

.switch-state {
    min-width: 2.5em;
    font-weight: 600;
}

.switch:disabled {
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    .switch-thumb {
        transition: none;
    }
}

.consent-history {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 동의 내역 한 줄: 종류 · 동의/철회 · 날짜, 좁으면 날짜가 다음 줄 */
.consent-history li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.consent-history li:last-child {
    border-bottom: 0;
}

.consent-history-type {
    flex: 1 1 auto;
}

.consent-history-date {
    font-variant-numeric: tabular-nums;
}

.withdraw-block .button {
    margin-top: var(--space-1);
}

/* 로그인 필요 안내 상자 (001, APR-CHG-024 2.1): 오류 빨강이 아닌 안내, 먹색 띠 + 중립 면 */
.login-notice {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--color-text);
    border-radius: var(--radius-small);
    background: var(--color-neutral-surface);
    color: var(--color-text);
}

/* 로그인 풀림·화면 오래됨 안내창 (request-notice.js): 고객 확인 창 모양, 버튼이 하나면 한 칸 전체 */
.request-notice .shop-dialog-actions {
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
}

.request-notice .request-notice-draft {
    margin-top: var(--space-2);
}

/* 고객 확인 창 (내 정보 탈퇴): 기본 dialog, 좁은 폭에서 양옆 여백 유지 */
.shop-dialog {
    width: min(400px, calc(100vw - 32px));
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-surface);
    color: var(--color-text);
}

.shop-dialog::backdrop {
    background: var(--color-backdrop);
}

.shop-dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-4);
}