/* 매장 계정 화면(첫 화면·가입·마이페이지)과 상담 화면 상단 바. product-ui.css 토큰을 그대로 쓴다. */
.shop-kakao { display: inline-flex; align-items: center; justify-content: center; gap: var(--tr-space-sm); min-height: 52px; padding: 0 var(--tr-space-lg); border-radius: var(--tr-radius-control); background: #FEE500; color: #191919 !important; font-weight: 700; text-decoration: none; }
.shop-kakao:hover { filter: brightness(.97); }
.shop-kakao:focus-visible { outline: 2px solid var(--tr-accent-text); outline-offset: 3px; }
.shop-kakao svg { width: 20px; height: 20px; }
.shop-hero { padding-block: var(--tr-space-xl); border-bottom: 1px solid var(--tr-border); }
.salon-studio .shop-hero h1 { font-size: 32px; line-height: 1.3; margin-top: var(--tr-space-lg); }
.shop-hero p { color: var(--tr-muted); }
.shop-notice { padding: var(--tr-space-md); border: 1px solid var(--tr-accent-text); border-radius: var(--tr-radius-control); background: var(--tr-surface); }
.shop-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--tr-space-md); padding: 0; margin: var(--tr-space-lg) 0 0; list-style: none; }
.shop-features li { padding: var(--tr-space-md); border-radius: var(--tr-radius-card); background: var(--tr-surface); border: 1px solid var(--tr-border); }
.shop-features strong { display: block; margin-bottom: var(--tr-space-xs); }
.shop-features span { color: var(--tr-muted); font-size: var(--tr-label); }
.shop-steps { padding-left: var(--tr-space-lg); }
.shop-steps li { margin-bottom: var(--tr-space-sm); }
.shop-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tr-space-md); margin-top: var(--tr-space-lg); }
.shop-price { padding: var(--tr-space-lg); border-radius: var(--tr-radius-card); background: var(--tr-surface); border: 1px solid var(--tr-border); }
.shop-price h3 { margin: 0; font-size: var(--tr-body); color: var(--tr-muted); font-weight: 600; }
.shop-price strong { display: block; margin-top: var(--tr-space-sm); font-size: 28px; line-height: 1.2; }
.shop-price span { display: block; margin-top: var(--tr-space-xs); color: var(--tr-accent-text); font-size: var(--tr-label); }
.shop-business { flex-direction: column; gap: var(--tr-space-xs); }
/* 가입·마이페이지 폼 */
.shop-form { display: grid; gap: var(--tr-space-md); max-width: 560px; margin-top: var(--tr-space-lg); }
.shop-form label { display: grid; gap: var(--tr-space-xs); font-size: var(--tr-label); }
.shop-form input:not([type=checkbox]) { width: 100%; box-sizing: border-box; }
.shop-form .shop-check { display: flex; align-items: flex-start; gap: var(--tr-space-sm); font-size: var(--tr-body); }
.salon-studio .shop-form .shop-check input { width: 20px; height: 20px; min-height: 20px; padding: 0; margin: 2px 0 0; flex: none; accent-color: var(--tr-accent-text); }
.shop-terms { border: 1px solid var(--tr-border); border-radius: var(--tr-radius-control); padding: var(--tr-space-md); background: var(--tr-surface); display: grid; gap: var(--tr-space-sm); }
.shop-terms details { font-size: var(--tr-label); color: var(--tr-muted); }
.shop-terms summary { cursor: pointer; color: var(--tr-accent-text); min-height: 32px; display: flex; align-items: center; }
.shop-terms ul { margin: var(--tr-space-xs) 0 0; padding-left: var(--tr-space-lg); }
.shop-readonly { padding: var(--tr-space-sm) var(--tr-space-md); border-radius: var(--tr-radius-control); background: var(--tr-band); min-height: var(--tr-control-height); box-sizing: border-box; display: flex; align-items: center; }
.salon-studio .shop-form button[type=submit] { justify-self: start; }
.shop-table { overflow-x: auto; margin-top: var(--tr-space-md); }
.shop-table table { border-collapse: collapse; width: 100%; font-size: var(--tr-label); min-width: 420px; }
.shop-table th, .shop-table td { padding: var(--tr-space-sm); text-align: left; border-bottom: 1px solid var(--tr-border); white-space: nowrap; }
.shop-table th { background: var(--tr-band); }
.shop-total { font-size: 28px; font-weight: 700; margin: var(--tr-space-sm) 0; }
/* 상담 화면 상단 바 */
.shop-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--tr-space-sm) var(--tr-space-md); margin-top: var(--tr-space-lg); padding: var(--tr-space-sm) var(--tr-space-md); border-radius: var(--tr-radius-card); background: var(--tr-surface); border: 1px solid var(--tr-border); }
.shop-bar[hidden] { display: none; }
.shop-bar-name { font-weight: 700; overflow-wrap: anywhere; }
.shop-bar-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--tr-space-sm); }
.shop-bar-balance { font-weight: 700; color: var(--tr-accent-text); margin-right: var(--tr-space-xs); }
.salon-studio .shop-bar-actions a { display: inline-flex; align-items: center; min-height: var(--tr-control-height); padding: 0 var(--tr-space-sm); }
.shop-bar-expiry { width: 100%; margin: 0 !important; }
.shop-no-credit { padding: var(--tr-space-md); border-radius: var(--tr-radius-control); background: var(--tr-band); }
body.shop-empty #photo-label, body.shop-empty #photo, body.shop-empty #photo-help { display: none; }
@media (max-width: 900px) { .shop-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .salon-studio .shop-hero h1 { font-size: 26px; }
    .shop-kakao { width: 100%; box-sizing: border-box; }
    .shop-features, .shop-prices { grid-template-columns: 1fr; }
    .shop-bar { align-items: stretch; flex-direction: column; }
    .shop-bar-actions { justify-content: space-between; }
    .shop-bar-balance { width: 100%; }
    .salon-studio .shop-form button[type=submit] { justify-self: stretch; }
}

/* 첫 화면: 소개 블록 하나를 화면 가운데에 둔다 */
.shop-home { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.shop-home .shop-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-bottom: 0; }
.shop-home .shop-hero .salon-brand { justify-content: center; }
.shop-home .shop-notice { max-width: 480px; }
.shop-home .shop-business { justify-content: center; text-align: center; }