/* Search workspace: readable hierarchy, responsive cards, and deliberate actions. */
:root { --ink:#20342e; --muted:#5e6e67; --accent:#16705a; --accent-dark:#105541; --line:#dbe3dd; }
html { scroll-padding-top:24px; }
body { background:#f5f6f2; color:var(--ink); }
body.chart-open { overflow:hidden; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
:is(button,a,input,select,summary):focus-visible { outline:3px solid #c16e24; outline-offset:4px; }
.container { max-width:1480px; padding:0 32px 110px; }
.app-topbar { position:relative; top:auto; min-height:88px; margin:0; padding:18px 0; gap:20px; background:transparent; border-bottom:1px solid var(--line); box-shadow:none; backdrop-filter:none; }
.brand-lockup { flex-shrink:0; }
.brand-name { display:none; }
.brand-mark,.brand-logo { width:40px; height:40px; }
.app-heading { flex:1; min-width:0; padding-left:0; border:0; }
.app-title { font-size:19px; line-height:1.5; letter-spacing:-.03em; }
.app-subtitle { display:block; margin-top:3px; color:var(--muted); font-size:12px; font-weight:400; }
.condition-summary { display:none; }
#guidePanel:not([open]) { display:none; }
.topbar-actions { margin-left:auto; gap:12px; }
.topbar-link.primary,.guide-toggle-btn { min-height:44px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); box-shadow:none; font-size:12px; }
.topbar-link.primary:hover,.guide-toggle-btn:hover { background:#edf2eb; color:var(--accent-dark); }
.search-intro { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px 0 24px; }
.search-intro h2 { font-size:clamp(23px,2.3vw,32px); line-height:1.45; letter-spacing:-.05em; }
.search-intro p { margin:8px 0 0; font-size:13px; color:var(--muted); line-height:1.8; }
.search-steps { display:flex; gap:20px; list-style:none; padding:0; color:var(--muted); font-size:12px; white-space:nowrap; }
.search-steps li { display:flex; align-items:center; gap:8px; }
.search-steps span { display:grid; place-items:center; width:25px; height:25px; border:1px solid #ccd8ce; border-radius:50%; color:var(--accent); font-weight:700; }
.main-layout { grid-template-columns:272px minmax(0,1fr); gap:28px; margin-top:0; }
.sidebar { top:20px; max-height:calc(100dvh - 40px); border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:none; scrollbar-width:thin; }
.sidebar-header { padding:18px; min-height:76px; background:#fff; }
.sidebar-heading h3 { font-size:16px; }
.sidebar-heading small { font-size:11px; font-weight:400; line-height:1.6; }
.wizard-step { padding:17px 16px; }
.wizard-title { font-size:13px; margin-bottom:12px; gap:8px; }
.wizard-number { border-radius:5px; background:#edf2eb; color:var(--accent); width:23px; height:23px; }
.foot-grid { gap:7px; }
.foot-card { min-height:98px; padding:8px 4px; border:1px solid var(--line); border-radius:8px; box-shadow:none; }
.foot-illustration { width:40px; height:40px; }
.foot-title { font-size:12px; }
.foot-desc { font-size:10px; line-height:1.4; color:var(--muted); }
.foot-card.active,.filter-btn.active { background:#eaf3eb; border-color:var(--accent); color:var(--accent-dark); box-shadow:inset 0 0 0 1px var(--accent); }
.wizard-options { gap:6px; }
.wizard-options .filter-btn { min-height:42px; padding:6px; border-radius:6px; font-size:12px; }
.wizard-options.three { grid-template-columns:repeat(2,minmax(0,1fr)); }
.advanced-filter summary { min-height:50px; color:var(--accent-dark); font-size:12px; }
.extra-filter-grid { grid-template-columns:1fr; gap:12px; }
.extra-filter-grid label,.filter-label { font-size:12px; }
.extra-filter-grid select { min-height:44px; }
.sidebar-actions { gap:9px; }
.reset-diagnosis-btn,.sync-data-btn { font-size:12px; }
.filter-apply { display:none; }
.results-head { padding:0 0 12px; }
.results-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.results-title h2 { font-size:18px; letter-spacing:-.02em; }
.results-title p { margin:0; font-size:12px; color:var(--muted); }
.result-controls { display:flex; gap:10px; width:100%; }
.result-search { flex:1; width:auto; min-width:0; height:50px; grid-template-columns:44px minmax(0,1fr); border:1px solid #becdc2; border-radius:8px; }
.result-search:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px #16705a18; }
.result-search input { width:100%; height:100%; font-size:14px; }
.sort-select { width:174px; max-width:none; min-height:50px; border-radius:8px; font-size:13px; color:var(--ink); }
.active-filters { min-height:0; margin:0 0 12px; padding:0; gap:6px; flex-wrap:wrap; overflow:visible; }
.active-filters[data-empty="true"] { display:none; }
.active-filters-label { color:var(--muted); font-size:11px; }
.active-filter-chip { min-height:32px; background:#eaf3eb; border-color:#cadbcb; border-radius:6px; font-size:12px; }
.research-status { margin:0 0 14px; padding:0; font-size:12px; align-items:center; }
#resultCount { font-weight:700; color:var(--ink); }
.research-status details { max-width:100%; }
.research-status details[open] { flex-basis:100%; padding:14px; background:#fff; border:1px solid var(--line); border-radius:8px; }
.research-status summary { color:var(--muted); }
#refreshFeedback { margin:0 0 10px; }
#refreshFeedback:empty { display:none; }
.shoe-grid { grid-template-columns:minmax(0,1fr); gap:14px; }
.recommendation-row { grid-template-columns:minmax(0,280px) minmax(0,1fr) 176px; min-height:232px; gap:20px; padding:20px; border:1px solid var(--line); border-radius:12px; box-shadow:0 2px 3px #20342e03; }
.recommendation-row:hover { transform:none; border-color:#9cb7a3; box-shadow:0 4px 16px #20342e08; }
.recommendation-row:has(.compare-cb input:checked) { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.recommendation-visual { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.recommendation-image { border-radius:8px; background:#f7f8f4; }
.recommendation-image img { padding:8px; }
.rank-badge,.rank-badge.top { width:26px; height:26px; top:5px; left:5px; border-radius:5px; background:#fff; color:var(--muted); border:1px solid var(--line); font-size:11px; box-shadow:none; }
.inline-radar-label { fill:#52675a; font-size:7.5px; }
.inline-radar-shape { fill:#16705a24; stroke:var(--accent); }
.inline-radar-point { fill:var(--accent); }
.recommendation-info { align-self:center; }
.recommendation-brand { color:var(--accent); font-size:10px; letter-spacing:.09em; }
.recommendation-name { font-size:20px; line-height:1.4; overflow-wrap:anywhere; }
.why-label { display:none; }
.reason-tags { margin-top:10px; gap:5px; }
.reason-tag { min-height:25px; padding:3px 7px; font-size:10px; font-weight:600; border-radius:4px; color:#375b42; background:#edf2e8; }
.recommendation-reason { margin-top:10px; font-size:12px; line-height:1.8; color:var(--muted); }
.use-tags { display:none; }
.research-details { margin-top:10px; font-size:12px; line-height:1.8; }
.research-details summary { color:var(--accent-dark); min-height:30px; display:flex; align-items:center; gap:6px; }
.research-details summary::before { content:'＋'; }
.research-details[open] summary::before { content:'−'; }
.recommendation-decision { grid-column:auto; display:flex; align-self:stretch; justify-content:center; gap:10px; border-left:1px solid var(--line); padding-left:18px; }
.decision-meta { display:flex; flex-wrap:wrap; gap:7px; }
.recommendation-price { font-size:22px; font-variant-numeric:tabular-nums; }
.recommendation-price small { font-size:10px; }
.stock-note { font-size:11px!important; line-height:1.7; color:var(--muted); }
.compare-cb { min-height:36px; padding:4px 8px; border:1px solid var(--line); border-radius:6px; font-size:12px; color:var(--ink); cursor:pointer; }
.compare-cb:has(input:checked) { background:#eaf3eb; border-color:var(--accent); color:var(--accent-dark); }
.compare-cb input { width:17px; height:17px; accent-color:var(--accent); }
.decision-actions { grid-template-columns:1fr; gap:7px; min-width:0; }
.decision-actions .shoe-link,.decision-actions .shoe-nolink { min-height:42px; border-radius:6px; font-size:12px; background:var(--accent); border-color:var(--accent); }
.decision-actions .shoe-link:hover { background:var(--accent-dark); }
.decision-actions .shoe-nolink { background:#f1f3ef; color:#5e6e67; border-color:var(--line); }
.decision-actions .shoe-detail-btn { min-height:38px; padding:6px 8px; display:flex; justify-content:center; align-items:center; gap:6px; border:1px solid var(--line); border-radius:6px; background:white; color:var(--ink); font-size:12px; }
.decision-actions .shoe-detail-btn .material-symbols-rounded { font-size:18px; }
.attention-box { background:transparent; border:0; border-radius:6px; padding:0; margin-top:4px; font-size:11px; line-height:1.8; }
.attention-box summary { min-height:30px; display:list-item; }
.attention-box summary { color:#77633d; cursor:pointer; font-weight:600; }
.attention-box p { margin-top:6px; }
.compare-bar { display:none; width:min(880px,calc(100% - 32px)); gap:12px; min-height:70px; border-radius:12px; background:#203e32; color:#fff; border:0; padding:12px 18px; }
.compare-bar.show { display:flex; }
.compare-bar::before { display:none; }
.compare-bar button { background:#e0efad; color:#20342e; white-space:nowrap; }
.compare-bar button:disabled { background:#456052; color:#e3eae4; }
.compare-bar .compare-clear { border-color:#789283; color:#fff; background:transparent; }
.compare-selection { flex:1; min-width:0; }
#compareCnt { display:block; font-weight:700; }
#compareNames { font-size:11px; color:#d6e3d9; line-height:1.5; margin-top:4px; overflow-wrap:anywhere; }
.chart-content { border-radius:14px; width:min(1000px,94vw); max-height:90dvh; padding:28px; }
.chart-close { width:44px; height:44px; font-size:24px; }
.research-compare { gap:24px; }
.research-compare section { padding:12px; border:1px solid var(--line); border-radius:8px; }
.research-compare h4 { font-size:16px; }
.site-footer { border-radius:12px!important; color:var(--muted)!important; }
@media (min-width:1101px) and (max-width:1280px) {
  .main-layout { grid-template-columns:250px minmax(0,1fr); gap:20px; }
  .recommendation-row { grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:16px; }
  .recommendation-decision { grid-column:1/-1; display:flex; flex-direction:row; justify-content:space-between; align-items:center; border-left:0; border-top:1px solid var(--line); padding:12px 0 0; }
  .decision-meta { gap:18px; }
  .decision-actions { display:flex; }
  .decision-actions .shoe-link,.decision-actions .shoe-detail-btn { min-width:120px; }
}
@media (max-width:1100px) {
  .container { padding:0 24px 100px; }
  .main-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .search-steps { display:none; }
  .sidebar { position:fixed; top:0; bottom:0; left:0; width:min(360px,92vw); max-height:100dvh; height:100dvh; border-radius:0 16px 16px 0; z-index:10002; visibility:hidden; transform:translateX(-105%); }
  body.filters-open .sidebar { visibility:visible; transform:translateX(0); }
  .filter-backdrop { z-index:10001; }
  .sidebar-header { position:sticky; top:0; z-index:3; }
  .mobile-filter-btn { display:flex; min-height:50px; background:var(--accent); border-radius:8px; box-shadow:none; }
  .filter-apply { display:block; position:sticky; bottom:0; padding:12px 16px max(12px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#fff; z-index:3; }
  .filter-apply button { width:100%; min-height:46px; border:0; border-radius:8px; background:var(--accent); color:#fff; font-size:14px; font-weight:700; cursor:pointer; }
  .recommendation-row { grid-template-columns:minmax(0,280px) minmax(0,1fr) 176px; }
}
@media (min-width:701px) and (max-width:900px) {
  .recommendation-row { grid-template-columns:minmax(0,240px) minmax(0,1fr); }
  .recommendation-decision { grid-column:1/-1; flex-direction:row; justify-content:space-between; border-left:0; border-top:1px solid var(--line); padding:12px 0 0; }
  .decision-meta { gap:18px; }
  .decision-actions { display:flex; }
  .decision-actions .shoe-link,.decision-actions .shoe-detail-btn { min-width:110px; }
}
@media (max-width:700px) {
  .container { padding:0 14px 110px; }
  .app-topbar { margin:0; padding:12px 0; min-height:76px; gap:9px; }
  .brand-mark,.brand-logo { width:32px; height:32px; }
  .app-heading { padding:0; }
  .app-title { font-size:14px; white-space:normal; line-height:1.4; overflow:visible; }
  .app-subtitle { font-size:10px; line-height:1.5; }
  .topbar-actions { gap:0; }
  .topbar-link.primary { display:none; }
  .guide-toggle-btn { width:46px; min-width:46px; min-height:46px; padding:4px; border:0; background:transparent; }
  .search-intro { padding:22px 0 20px; }
  .search-intro h2 { font-size:24px; }
  .search-intro p { font-size:12px; margin-top:6px; }
  .results-title { margin-bottom:12px; }
  .results-title h2 { font-size:16px; }
  .results-title p { font-size:11px; }
  .result-controls { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:9px; }
  .result-search { grid-column:1/-1; grid-row:1; height:50px; }
  .result-search input { font-size:16px; }
  .mobile-filter-btn { grid-column:1; grid-row:2; width:100%; min-width:0; min-height:44px; padding:0 10px; gap:6px; font-size:12px; }
  .mobile-filter-selection-count { font-size:9px; padding:0 5px; }
  .sort-select { grid-column:2; grid-row:2; width:100%; max-width:none; min-height:44px; height:44px; padding:0 24px 0 10px; font-size:12px; }
  .research-status { font-size:11px; gap:8px; }
  .recommendation-row { grid-template-columns:minmax(0,1fr); padding:18px; gap:12px; }
  .recommendation-info { grid-row:1; grid-column:1; }
  .recommendation-name { font-size:20px; }
  .recommendation-visual { grid-row:2; grid-column:1; gap:14px; }
  .recommendation-reason { margin-top:8px; }
  .recommendation-info > .research-details { margin-top:5px; }
  .recommendation-decision { grid-row:3; grid-column:1; display:flex; flex-direction:column; border-left:0; border-top:1px solid var(--line); padding:12px 0 0; }
  .decision-meta { width:100%; order:0; }
  .compare-cb { min-height:44px; padding:5px 10px; }
  .decision-actions { display:grid; grid-template-columns:1fr 1fr; order:1; }
  .decision-actions .shoe-link,.decision-actions .shoe-detail-btn { min-height:44px; }
  .compare-bar { width:calc(100% - 20px); bottom:10px; padding:10px 12px; gap:8px; }
  .compare-bar button { margin-left:0; min-height:44px; padding:0 12px!important; font-size:12px!important; }
  .compare-bar .compare-clear { min-width:36px; padding:0 6px!important; margin-left:0; }
  .compare-bar .compare-clear .material-symbols-rounded { display:block; }
  #compareNames { display:none; }
  .chart-content { padding:24px 16px; }
  .research-compare { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}