/* Small Wish 스토어 스타일. 토큰은 styles.css의 :root를 그대로 쓴다. */

.shop-header { height:72px; padding:0 clamp(20px,5vw,56px); display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:20; }
.shop-nav { display:flex; gap:clamp(14px,2.4vw,30px); }
.shop-nav a { color:var(--ink); font:600 .82rem "Noto Sans KR",sans-serif; letter-spacing:-.04em; text-decoration:none; padding:6px 0; border-bottom:1px solid transparent; }
.shop-nav a:hover, .shop-nav a[aria-current="page"] { border-color:var(--ink); }
.wordmark { display:inline-flex; align-items:center; gap:6px; color:var(--ink); text-decoration:none; }
.wordmark b { white-space:nowrap; font:800 .95rem/1 Manrope,sans-serif; letter-spacing:.22em; text-indent:.22em; text-transform:uppercase; }
.wordmark i { width:5px; height:5px; background:var(--lime-dark); font-style:normal; }
.wordmark:hover i { background:var(--ink); }
.cart-link { position:relative; font-weight:600; color:var(--ink) !important; }
.cart-link em[hidden] { display:none; }
.cart-link em { display:inline-grid; place-items:center; min-width:16px; height:16px; margin-left:6px; padding:0 4px; background:var(--ink); color:var(--lime); font:700 .58rem/1 "DM Mono",monospace; font-style:normal; }

.shop-main { max-width:1180px; margin:auto; padding:clamp(28px,4vw,52px) clamp(20px,5vw,56px) 96px; }
.shop-hero { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); align-items:end; gap:clamp(22px,4vw,54px); margin-bottom:clamp(46px,6vw,80px); }
.shop-hero .eyebrow { color:var(--lime-dark); }
.shop-hero h1 { margin:14px 0 18px; font-size:clamp(2.1rem,4.6vw,3.5rem); line-height:1.06; letter-spacing:-.075em; font-weight:700; }
.shop-hero p { max-width:420px; margin:0 0 28px; color:var(--muted); font-size:.92rem; line-height:1.8; }
.hero-figure { position:relative; margin:0; aspect-ratio:4/5; max-height:520px; overflow:hidden; background:#ded7cc; }
.hero-figure img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.82) contrast(.97); }
.hero-figure figcaption { position:absolute; left:0; bottom:0; padding:8px 11px; background:var(--paper); color:var(--ink); font:500 .58rem "DM Mono",monospace; letter-spacing:.06em; }
.btn { display:inline-flex; align-items:center; gap:14px; padding:14px 19px; border:0; background:var(--ink); color:white; font:700 .84rem "Noto Sans KR",sans-serif; text-decoration:none; cursor:pointer; transition:background .15s,color .15s,transform .15s; }
.btn:hover:not(:disabled) { background:var(--lime); color:var(--ink); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn.ghost { background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn.ghost:hover { background:var(--ink); color:white; }
.btn.wide { width:100%; justify-content:center; }

.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:0 0 22px; padding-bottom:14px; border-bottom:1px solid var(--ink); }
.section-head h2 { margin:0; font-size:clamp(1.3rem,2.4vw,1.8rem); letter-spacing:-.06em; }
.section-head a { color:var(--muted); font-size:.75rem; text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:3px; }
.section-head a:hover { color:var(--ink); border-color:var(--ink); }

.cat-strip { display:grid; grid-template-columns:repeat(5,1fr); margin:0 0 clamp(46px,6vw,74px); border-top:1px solid var(--ink); border-bottom:1px solid var(--line); }
.cat-strip a { display:grid; place-items:center; min-height:62px; border-right:1px solid var(--line); color:var(--ink); font:700 .84rem "Noto Sans KR",sans-serif; letter-spacing:-.04em; text-decoration:none; transition:background .15s; }
.cat-strip a:last-child { border-right:0; }
.cat-strip a:hover { background:var(--lime); }

.product-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,22px) clamp(10px,1.6vw,16px); margin-bottom:clamp(48px,7vw,84px); }
.product-card { display:block; color:var(--ink); text-decoration:none; }
.product-card .thumb { position:relative; aspect-ratio:3/4; overflow:hidden; background:#ded7cc; }
.product-card .thumb img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.product-card:hover .thumb img { transform:scale(1.035); }
.thumb-empty { width:100%; height:100%; background:repeating-linear-gradient(135deg,#ded7cc 0 12px,#d7cfc4 12px 24px); }
.soldout { position:absolute; inset:auto 0 0 0; padding:8px; background:rgba(25,24,23,.82); color:white; font:700 .68rem "Noto Sans KR",sans-serif; font-style:normal; text-align:center; }
.p-name { margin:11px 0 4px; font-size:.85rem; font-weight:600; line-height:1.45; letter-spacing:-.04em; }
.p-price { display:flex; align-items:baseline; gap:7px; margin:0; font:500 .8rem "DM Mono",monospace; }
.p-price s { color:var(--muted); font-size:.72rem; }
.p-price strong { font-size:.88rem; }
.grid-empty { grid-column:1/-1; margin:0; padding:60px 0; color:var(--muted); font-size:.86rem; text-align:center; }

.page-head { margin:0 0 clamp(26px,4vw,42px); padding-bottom:16px; border-bottom:1px solid var(--ink); }
.page-head h1 { margin:10px 0 0; font-size:clamp(1.9rem,4vw,2.9rem); letter-spacing:-.07em; }
.page-head p { margin:10px 0 0; color:var(--muted); font-size:.85rem; }

/* 상품 상세 */
.pdp { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(26px,4vw,60px); align-items:start; }
.pdp-gallery { display:grid; gap:10px; }
.pdp-gallery .shot { aspect-ratio:3/4; overflow:hidden; background:#ded7cc; }
.pdp-gallery .shot img { width:100%; height:100%; object-fit:cover; display:block; }
.pdp-info { position:sticky; top:96px; }
.pdp-info h1 { margin:8px 0 12px; font-size:clamp(1.5rem,2.8vw,2.1rem); line-height:1.28; letter-spacing:-.06em; }
.pdp-price { display:flex; align-items:baseline; gap:10px; margin:0 0 22px; font:500 1rem "DM Mono",monospace; }
.pdp-price s { color:var(--muted); font-size:.85rem; }
.pdp-price strong { font-size:1.5rem; }
.pdp-desc { margin:0 0 24px; color:var(--muted); font-size:.88rem; line-height:1.85; white-space:pre-line; }
.option-field { display:grid; gap:7px; margin:0 0 15px; }
.option-field span { color:var(--muted); font-size:.72rem; }
.option-field select, .option-field input { width:100%; padding:12px; border:1px solid var(--line); background:white; color:var(--ink); font:500 .86rem "Noto Sans KR",sans-serif; outline:none; }
.option-field select:focus, .option-field input:focus { border-color:var(--ink); }
.pdp-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:22px; }
.pdp-status { min-height:20px; margin:12px 0 0; color:var(--lime-dark); font-size:.76rem; }

.spec-table { width:100%; margin:clamp(46px,6vw,74px) 0 0; border-top:1px solid var(--ink); border-collapse:collapse; }
.spec-table caption { padding-bottom:14px; font:700 1.05rem "Noto Sans KR",sans-serif; letter-spacing:-.05em; text-align:left; }
.spec-table th, .spec-table td { padding:14px 12px; border-bottom:1px solid var(--line); font-size:.82rem; line-height:1.6; text-align:left; vertical-align:top; }
.spec-table th { width:180px; color:var(--muted); font-weight:500; }

/* 장바구니 · 주문 */
.cart-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(260px,.9fr); gap:clamp(24px,4vw,48px); align-items:start; }
.cart-lines { border-top:1px solid var(--ink); }
.cart-line { display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center; }
.cart-line .thumb { aspect-ratio:3/4; overflow:hidden; background:#ded7cc; }
.cart-line .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.cart-line h3 { margin:0 0 5px; font-size:.88rem; letter-spacing:-.04em; }
.cart-line .opt { margin:0 0 8px; color:var(--muted); font-size:.72rem; }
.cart-line .qty { display:inline-flex; align-items:center; gap:9px; }
.cart-line .qty button { width:26px; height:26px; cursor:pointer; border:1px solid var(--line); background:white; color:var(--ink); font-size:.85rem; line-height:1; }
.cart-line .qty button:hover { border-color:var(--ink); }
.cart-line .right { text-align:right; display:grid; gap:9px; justify-items:end; }
.cart-line .right strong { font:500 .9rem "DM Mono",monospace; }
.cart-line .remove { cursor:pointer; border:0; background:transparent; color:var(--muted); font-size:.7rem; text-decoration:underline; text-underline-offset:3px; padding:0; }
.cart-line .remove:hover { color:var(--red); }

.summary { padding:24px; border:1px solid var(--ink); background:white; position:sticky; top:96px; }
.summary h2 { margin:0 0 18px; font-size:1.05rem; letter-spacing:-.05em; }
.summary dl { margin:0 0 16px; display:grid; gap:11px; }
.summary dl > div { display:flex; justify-content:space-between; gap:14px; font-size:.82rem; }
.summary dt { color:var(--muted); }
.summary dd { margin:0; font-family:"DM Mono",monospace; }
.summary .total { padding-top:14px; border-top:1px solid var(--line); font-size:.95rem; font-weight:700; }
.summary .total dd { font-size:1.1rem; }
.summary .note { margin:14px 0 0; color:var(--muted); font-size:.7rem; line-height:1.6; }

.order-form { display:grid; gap:15px; }
.order-form fieldset { margin:0; padding:0; border:0; }
.order-form legend { padding:0 0 12px; font:700 1rem "Noto Sans KR",sans-serif; letter-spacing:-.05em; }
.order-form label { display:grid; gap:7px; margin:0 0 13px; color:var(--muted); font-size:.73rem; }
.order-form input, .order-form textarea, .order-form select { width:100%; padding:12px; border:1px solid var(--line); background:white; color:var(--ink); font:500 .86rem "Noto Sans KR",sans-serif; outline:none; }
.order-form input:focus, .order-form textarea:focus, .order-form select:focus { border-color:var(--ink); }
.order-form textarea { min-height:76px; resize:vertical; }
.agree { display:flex; align-items:flex-start; gap:9px; margin:6px 0 0; color:var(--muted); font-size:.75rem; line-height:1.6; cursor:pointer; }
.agree input { width:auto; margin-top:2px; accent-color:var(--ink); }
.form-error { margin:10px 0 0; color:var(--red); font-size:.76rem; min-height:18px; }

.bank-box { margin:24px 0; padding:22px; border:1px solid var(--ink); background:var(--blue); }
.bank-box h2 { margin:0 0 12px; font-size:1rem; letter-spacing:-.05em; }
.bank-box p { margin:0 0 8px; font-size:.86rem; line-height:1.7; }
.bank-box .acct { font:700 1.05rem "DM Mono",monospace; }

/* 안내 문서 페이지 */
.doc-page { max-width:780px; }
.doc-page h2 { margin:34px 0 12px; font-size:1.08rem; letter-spacing:-.05em; }
.doc-page p, .doc-page li { color:var(--muted); font-size:.86rem; line-height:1.85; }
.doc-page ul, .doc-page ol { margin:0 0 8px; padding-left:20px; }
.doc-page table { width:100%; margin:16px 0; border-top:1px solid var(--ink); border-collapse:collapse; }
.doc-page th, .doc-page td { padding:12px; border-bottom:1px solid var(--line); font-size:.82rem; line-height:1.6; text-align:left; vertical-align:top; }
.doc-page th { width:170px; color:var(--muted); font-weight:500; }

/* 푸터 */
.shop-footer { padding:34px clamp(20px,5vw,56px) 46px; border-top:1px solid var(--line); background:#ece7de; }
.footer-cols { max-width:1180px; margin:auto; }
.footer-nav { display:flex; flex-wrap:wrap; gap:18px; margin-bottom:18px; }
.footer-nav a { color:var(--ink); font-size:.76rem; text-decoration:none; }
.footer-nav a:hover { text-decoration:underline; }
.footer-biz { display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--muted); font-size:.7rem; line-height:1.7; }
.footer-copy { margin:16px 0 0; color:var(--muted); font:400 .65rem "DM Mono",monospace; }

@media (max-width:900px) {
  .shop-hero { grid-template-columns:1fr; }
  .pdp { grid-template-columns:1fr; }
  .pdp-info { position:static; }
  .cart-layout { grid-template-columns:1fr; }
  .summary { position:static; }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:640px) {
  /* 좁은 화면에서는 워드마크·장바구니가 윗줄, 카테고리 내비가 아랫줄로 내려간다. */
  .shop-header { height:auto; flex-wrap:wrap; gap:0; padding:11px clamp(16px,4vw,24px) 0; }
  .wordmark { order:1; }
  .wordmark b { font-size:.78rem; letter-spacing:.15em; text-indent:.15em; }
  .header-actions { order:2; margin-left:auto; gap:12px; }
  .shop-nav { order:3; width:100%; margin-top:10px; padding:9px 0 8px; gap:17px; overflow-x:auto; border-top:1px solid var(--line); scrollbar-width:none; }
  .shop-nav::-webkit-scrollbar { display:none; }
  .shop-nav a { font-size:.78rem; white-space:nowrap; padding:0; }
  .cat-strip { display:flex; overflow-x:auto; scrollbar-width:none; }
  .cat-strip::-webkit-scrollbar { display:none; }
  .cat-strip a { flex:0 0 34%; min-height:56px; }
  .product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pdp-actions { grid-template-columns:1fr; }
  .spec-table th { width:110px; }
  .cart-line { grid-template-columns:66px minmax(0,1fr); }
  .cart-line .right { grid-column:1/-1; justify-items:start; text-align:left; }
}

/* 주문 관리 (admin.html) */
.admin-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 0 22px; }
.admin-bar .who { color:var(--muted); font:500 .7rem "DM Mono",monospace; }
.status-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 18px; }
.status-tabs button { padding:8px 12px; cursor:pointer; border:1px solid var(--line); background:white; color:var(--ink); font:600 .74rem "Noto Sans KR",sans-serif; }
.status-tabs button[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:white; }
.status-tabs button em { margin-left:5px; font:500 .66rem "DM Mono",monospace; font-style:normal; opacity:.7; }
.order-list { border-top:1px solid var(--ink); }
.order-row { border-bottom:1px solid var(--line); }
.order-row summary { display:grid; grid-template-columns:150px 92px minmax(0,1fr) 110px 80px; gap:14px; align-items:center; padding:15px 0; cursor:pointer; font-size:.82rem; list-style:none; }
.order-row summary::-webkit-details-marker { display:none; }
.order-row summary:hover { background:rgba(255,255,255,.5); }
.order-row .no { font:500 .78rem "DM Mono",monospace; }
.order-row .no small { display:block; color:var(--muted); font-size:.62rem; }
.order-row .items { color:var(--muted); font-size:.76rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.order-row .amt { text-align:right; font:500 .8rem "DM Mono",monospace; }
.badge { display:inline-block; padding:4px 8px; font:700 .64rem "Noto Sans KR",sans-serif; background:var(--blue); color:var(--ink); white-space:nowrap; }
.badge.awaiting_payment { background:#f3e3c0; }
.badge.paid { background:var(--lime); }
.badge.ordered { background:#d7e6f7; }
.badge.shipped { background:#e0d7f7; }
.badge.done { background:var(--blue); color:var(--muted); }
.badge.cancelled { background:#f0d4cc; color:var(--red); }
.order-detail { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:24px 36px; padding:6px 0 26px; }
.order-detail h3 { margin:0 0 10px; font-size:.8rem; letter-spacing:-.04em; }
.order-detail table { width:100%; border-collapse:collapse; border-top:1px solid var(--line); }
.order-detail td, .order-detail th { padding:8px 6px; border-bottom:1px solid var(--line); font-size:.78rem; line-height:1.5; text-align:left; vertical-align:top; }
.order-detail th { width:88px; color:var(--muted); font-weight:500; }
.order-detail .sku { color:var(--muted); font:500 .66rem "DM Mono",monospace; }
.copy-box { position:relative; margin:0; padding:12px 14px; border:1px solid var(--line); background:white; font:500 .76rem/1.7 "Noto Sans KR",sans-serif; white-space:pre-wrap; }
.copy-box button { position:absolute; top:8px; right:8px; padding:4px 8px; cursor:pointer; border:1px solid var(--line); background:var(--paper); font:600 .64rem "Noto Sans KR",sans-serif; }
.copy-box button:hover { border-color:var(--ink); }
.order-actions { display:grid; gap:12px; grid-column:1/-1; padding-top:14px; border-top:1px solid var(--ink); }
.order-actions .row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.order-actions input, .order-actions select, .order-actions textarea { padding:9px 10px; border:1px solid var(--line); background:white; color:var(--ink); font:500 .8rem "Noto Sans KR",sans-serif; outline:none; }
.order-actions input:focus, .order-actions select:focus, .order-actions textarea:focus { border-color:var(--ink); }
.order-actions textarea { width:100%; min-height:54px; resize:vertical; }
.order-actions .btn { padding:10px 14px; font-size:.76rem; }
.order-actions .btn.danger { background:transparent; color:var(--red); border:1px solid var(--red); }
.order-actions .btn.danger:hover { background:var(--red); color:white; }
.admin-note { margin:0; padding:40px 0; color:var(--muted); font-size:.84rem; text-align:center; }
.admin-gate { max-width:420px; margin:60px auto; padding:32px; border:1px solid var(--ink); background:white; text-align:center; }
.admin-gate p { color:var(--muted); font-size:.82rem; line-height:1.7; }
@media (max-width:900px) {
  .order-row summary { grid-template-columns:1fr auto; }
  .order-row .items { grid-column:1/-1; white-space:normal; }
  .order-row .when { display:none; }
  .order-detail { grid-template-columns:1fr; }
}