.shop-tools { border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin-block:16px; background:var(--surface); color:var(--text); min-width:0; }
.shop-tools h1,.shop-tools h2 { margin:0 0 12px; }
.shop-tools p { line-height:1.65; }
.shop-tools small { display:block; color:var(--text-muted); font-weight:400; overflow-wrap:anywhere; }
.shop-tools-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; list-style:none; padding:0; margin:16px 0; }
.shop-tools-list li { border:1px solid var(--border); border-radius:var(--radius); padding:16px; min-width:0; overflow-wrap:anywhere; }
.shop-tools-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-block:16px; }
.shop-tools label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.shop-tools input { min-width:0; max-width:100%; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px; }
.shop-tools .shop-btn-primary { width:auto; min-height:44px; }
.shop-tools button:disabled { opacity:.5; cursor:not-allowed; }
.shop-tools button,.shop-tools .shop-btn-line,.shop-compare-pick,.shop-tools summary { min-height:44px; }
.shop-tools-scroll { overflow-x:auto; max-width:100%; }
.shop-tools-scroll table { min-width:560px; }
.shop-compare-table th,.shop-compare-table td { min-width:160px; max-width:300px; vertical-align:top; white-space:normal; overflow-wrap:anywhere; }
.shop-compare-pick { background:var(--surface); color:var(--accent); border:1px solid var(--border-strong); border-radius:var(--radius); padding:8px 12px; cursor:pointer; }
.shop-compare-pick[aria-pressed=true] { background:var(--accent); color:var(--accent-ink,#fff); }
/* 규격 비교 — 오른쪽 가장자리 작은 버튼(N/3) + 오른쪽에서 펼치는 패널(2026-10-12). 본문을 덜 가리게 PC 는 가장자리에 붙인 탭, 폰은 오른쪽 아래 둥근 버튼. */
.shop-compare-dock[hidden],.shop-compare-fab[hidden],.shop-compare-panel[hidden] { display:none; }
.shop-compare-fab { position:fixed; z-index:80; right:0; bottom:96px; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 12px 8px 14px; border:1px solid var(--border-strong); border-right:0; border-radius:var(--radius-lg) 0 0 var(--radius-lg); background:var(--surface); color:var(--accent); font:inherit; font-size:14px; font-weight:600; box-shadow:var(--shadow-md,0 4px 20px #0002); cursor:pointer; }
.shop-compare-fab b { min-width:32px; padding:2px 7px; border-radius:999px; background:var(--accent); color:var(--accent-ink,#fff); font-size:12px; text-align:center; }
.shop-compare-fab:hover { background:var(--accent-soft); }
.shop-compare-fab:focus-visible,.shop-compare-close:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.shop-compare-note { position:fixed; z-index:81; right:12px; bottom:150px; max-width:min(320px,calc(100vw - 24px)); margin:0; padding:10px 12px; border-radius:var(--radius); background:#1f2937; color:#fff; font-size:13px; line-height:1.5; box-shadow:var(--shadow-md,0 4px 20px #0002); }
.shop-compare-note:empty { display:none; }
.shop-compare-panel { position:fixed; z-index:82; right:0; bottom:96px; width:min(380px,calc(100vw - 24px)); max-height:calc(100vh - 140px); overflow-y:auto; margin:0; border-right:0; border-radius:var(--radius-lg) 0 0 var(--radius-lg); box-shadow:var(--shadow-md,0 4px 20px #0002); animation:shop-compare-in .18s ease-out; }
@keyframes shop-compare-in { from { transform:translateX(100%); } to { transform:none; } }
@media (prefers-reduced-motion:reduce) { .shop-compare-panel { animation:none; } }
.shop-compare-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.shop-compare-close { flex:none; min-width:44px; min-height:44px; padding:0; border:0; background:transparent; color:var(--text-muted); font-size:24px; line-height:1; cursor:pointer; }
.shop-compare-panel ul { display:grid; gap:8px; list-style:none; padding:0; margin:12px 0; }
.shop-compare-panel li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius); overflow-wrap:anywhere; }
.shop-compare-panel li span { display:grid; gap:2px; min-width:0; }
.shop-compare-panel li button,.shop-compare-panel .shop-tools-actions button { flex:none; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; cursor:pointer; }
.shop-compare-panel .shop-tools-actions { margin-block:4px 0; }
/* 허브로 들어온 직원은 오른쪽에 업무 앱 레일(236px)이 있다 — 그 왼쪽에 붙인다(hub-apps.css) */
@media (min-width:1280px) { html:not(.apps-collapsed) body:has(#wp-appbar) :is(.shop-compare-fab,.shop-compare-panel,.shop-compare-note) { right:236px; } html:not(.apps-collapsed) body:has(#wp-appbar) .shop-compare-note { right:248px; } }
.shop-draft-state { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px; }
.shop-draft-state p { margin:0; }
.shop-tools[lang=th] { font-family:'Noto Sans Thai','Leelawadee UI',Tahoma,sans-serif; line-height:1.65; }
.shop-tools[data-tools-theme=dark],.shop-compare-pick[data-tools-theme=dark],.shop-compare-fab[data-tools-theme=dark] { --surface:#161719; --surface-strong:#212326; --border:#2A2D31; --border-strong:#44484F; --text:#E7E9ED; --text-muted:#A9AFB8; --accent:#81ACEE; --accent-hover:#A3C5F8; --accent-soft:#253A59; }
.shop-tools .shop-table { color:var(--text); background:var(--surface); }
.shop-tools .shop-table th,.shop-tools .shop-table td { background:var(--surface); color:var(--text); border-color:var(--border); }
.shop-tools a,.shop-tools .shop-btn-line { color:var(--accent); }
.shop-tools .shop-btn-line,.shop-tools select { background:var(--surface); border-color:var(--border-strong); color:var(--text); }
.shop-tools .shop-muted { color:var(--text-muted); }
.shop-tools select { max-width:100%; min-height:44px; border:1px solid var(--border); border-radius:var(--radius); padding:8px; }
@media(max-width:1024px) { .shop-tools-list { grid-template-columns:1fr; } }
@media(max-width:640px) { .shop-tools { padding:16px; }.shop-tools-actions { align-items:stretch; }.shop-tools-actions>* { max-width:100%; }.shop-compare-fab { right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); border-right:1px solid var(--border-strong); border-radius:999px; } .shop-compare-note { bottom:calc(68px + env(safe-area-inset-bottom)); } .shop-compare-panel { left:0; right:0; bottom:0; width:auto; max-height:75vh; padding:16px 16px calc(16px + env(safe-area-inset-bottom)); border-right:1px solid var(--border); border-bottom:0; border-radius:var(--radius-lg) var(--radius-lg) 0 0; } body.shop-compare-open { padding-bottom:72px; }.shop-tools-actions label { width:100%; }.shop-tools input { flex:1; } }
/* 상세 옵션 비교 버튼 - 옵션 선택칸 오른쪽, 선택칸 아래선에 맞춘다. 폰도 같은 줄(2026-10-12) */
.shop-option-compare { align-self:flex-end; min-height:0; padding:7px 14px; font-size:14px; white-space:nowrap; }
.shop-compare-pick:disabled { opacity:.45; cursor:not-allowed; }
@media(max-width:640px) { .shop-options:has(.shop-option-compare) { display:flex; flex-wrap:wrap; } .shop-options:has(.shop-option-compare) > .shop-option { flex:1 1 96px; min-width:0; } .shop-option-compare { flex:0 0 auto; margin-left:auto; min-height:40px; font-size:15px; } }