/* ANNEX adaptation of Digital Agency Design System guidance.
   https://design.digital.go.jp/dads/ (reviewed 2026-10-06)
   Dark theme and compact product rows are ANNEX-specific adaptations. */
:root{
 --main_bg_dark:#f5f5f5;--main_bg_light:#fff;--main_bg_light_border:#767676;
 --main_text:#1a1a1a;--muted:#595959;--accent:#0031d8;--button-text:#fff;
 --tint:#e8f1fe;--stripe:#f5f5f5;--warning-bg:#fff8e1;--warning-text:#604600;
 --shadow:none;--pop_action:#0031d8;--pop_line:#0031d8;--pop_action_text:#fff;
 --bg:var(--main_bg_dark);--panel:var(--main_bg_light);--text:var(--main_text);--border:var(--main_bg_light_border);
 --stock_low_bg:#fff0e5;--stock_low_text:#8b3600;--stock_mid_bg:#fff8cc;--stock_mid_text:#665000;
 --stock_good_bg:#e8f1fe;--stock_good_text:#0031d8;--stock_high_bg:#e6f5ec;--stock_high_text:#005c35;
 --rule:#c4c4c4;--hover:#e8f1fe;
}
@media(prefers-color-scheme:dark){:root{
 --main_bg_dark:#181818;--main_bg_light:#242424;--main_bg_light_border:#a3a3a3;
 --main_text:#f2f2f2;--muted:#c4c4c4;--accent:#99baff;--button-text:#00174a;
 --tint:#263750;--stripe:#2d2d2d;--warning-bg:#393218;--warning-text:#ffe28a;
 --pop_action:#99baff;--pop_line:#99baff;--pop_action_text:#00174a;
 --stock_low_bg:#482b1b;--stock_low_text:#ffc49c;--stock_mid_bg:#3d3519;--stock_mid_text:#ffe28a;
 --stock_good_bg:#263750;--stock_good_text:#b3ceff;--stock_high_bg:#193b2c;--stock_high_text:#9be3bc;
 --rule:#595959;--hover:#263750;
}}
body{font-family:"Noto Sans JP","BIZ UDPGothic","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.75;letter-spacing:.02em;background:var(--main_bg_dark);color:var(--main_text)}
h1{font-size:32px;line-height:1.5;letter-spacing:.01em;font-weight:700}h2{font-size:24px;line-height:1.5;letter-spacing:.02em}h3{font-size:20px;line-height:1.5}
a{color:var(--accent);text-decoration:underline;text-underline-offset:.2em}a:hover{text-decoration-thickness:3px}
button,input,select,textarea{border-radius:4px;border-color:var(--main_bg_light_border);font-family:inherit;letter-spacing:inherit}
button{min-height:44px;padding:10px 20px;color:var(--accent);border:1px solid var(--accent);background:var(--main_bg_light);font-weight:700;box-shadow:none}
button:hover:not(:disabled){background:var(--hover);text-decoration:underline;text-underline-offset:.2em}
button:disabled{opacity:1;background:var(--stripe);border-color:var(--rule);color:var(--muted);cursor:not-allowed;box-shadow:none}
input:not([type=checkbox]),select,textarea{color:var(--main_text);background:var(--main_bg_light)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
input[type=checkbox]{accent-color:var(--accent);width:20px;height:20px;flex-shrink:0}
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:4px solid #000!important;outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 7px #ffd43d!important}
.skip-link{position:fixed;left:16px;top:12px;z-index:1000;transform:translateY(-180%);padding:12px 24px;color:#0031d8;background:#fff;border:2px solid #0031d8}
.skip-link:focus{transform:none}
.primary,#add-draft{background:var(--accent);border-color:var(--accent);color:var(--button-text);border-radius:4px;box-shadow:none;min-height:48px;font-size:16px}
.primary:hover:not(:disabled),#add-draft:hover:not(:disabled){background:var(--accent);filter:brightness(.9);color:var(--button-text)}
.primary:disabled{background:var(--stripe);border-color:var(--rule);color:var(--muted);filter:none}
.quiet{color:var(--accent);text-decoration:underline}
.site-header{border-top:4px solid var(--accent);background:var(--main_bg_light);border-bottom:1px solid var(--rule);box-shadow:none}
.header-inner{padding-top:24px;padding-bottom:20px;gap:16px}
.brand,.brand:hover{text-decoration:none;color:var(--main_text)}.brand-parent{letter-spacing:.08em;font-size:11px}.brand strong{font-size:32px;letter-spacing:.04em}
.site-header nav{font-size:14px;gap:16px}.site-header nav a{color:var(--accent);text-decoration:underline}.basket-link{border:1px solid var(--accent);border-radius:4px;min-height:44px;display:inline-flex;align-items:center}
.preview-bar{background:var(--tint);color:var(--main_text);font-size:14px;padding:8px 16px;border-bottom:1px solid var(--rule)}
main{padding-top:32px}.page-heading{margin-bottom:32px}.page-heading .muted{font-size:16px;line-height:1.75}
.eyebrow{background:none;border:0;border-radius:0;padding:0;font-size:12px;letter-spacing:.06em;color:var(--muted)}
.snapshot{font-size:12px;line-height:1.6}.snapshot strong{font-size:18px}
.search-panel{background:var(--main_bg_light);border:1px solid var(--rule);border-radius:0;padding:20px 16px 0;box-shadow:none}
.search-main label,.filter-grid label{font-size:14px;font-weight:700}.search-main input{min-height:48px;font-size:16px}.search-submit{min-height:48px}
.search-main .clear-link{position:static;font-size:14px}.advanced{font-size:14px;margin-top:24px}.advanced summary{padding:8px 0;min-height:44px;text-decoration:underline}
.result-toolbar{margin-top:24px;padding:16px 0;border-color:var(--rule)}.display-controls{font-size:14px;gap:16px}.display-controls select{font-size:14px;min-height:44px}
.quantity-help{background:var(--tint);color:var(--main_text);font-size:14px;line-height:1.7;border-color:var(--rule);padding:16px 12px}.quantity-help button{font-size:14px;min-height:44px;white-space:normal}
.table-scroll{border-color:var(--rule);border-radius:0;box-shadow:none}.table-scroll thead{background:var(--stripe)}.table-scroll th{background:var(--stripe);color:var(--main_text);border-bottom:2px solid var(--main_text)}
#catalog-products tbody td{border-color:var(--rule)}#catalog-products tbody tr:hover td{background:var(--hover)}
#products:not(.compact) #catalog-products tbody td{font-size:14px;line-height:1.5}
#products:not(.compact) #catalog-products th{font-size:12px;line-height:1.5}
#products:not(.compact) #catalog-products .price{font-size:14px!important}
#products:not(.compact) #catalog-products .jan{font-size:11px}
#products:not(.compact) #catalog-products .row-quantity{font-size:14px;height:32px}
#products:not(.compact) #catalog-products :is(.add-row,.remove-row){height:32px}
#catalog-products .add-row,#catalog-products .remove-row{min-height:24px;box-shadow:none;border-radius:4px;background:var(--main_bg_light);border-color:var(--accent);color:var(--accent)}
#products.compact :is(.add-row,.remove-row){min-height:14px}
.stock-pill,.stock-legend b{border-radius:4px}.stock-legend{font-size:12px;line-height:1.6}
.basket-dock,.basket-dock.has-draft{background:var(--main_bg_light);border-top:2px solid var(--accent);box-shadow:none}.basket-dock button{border-radius:4px}
.notice,.status-message,.return-panel,.order-summary,.checkout-layout aside{border-radius:0;box-shadow:none}
.notice{background:var(--tint);color:var(--main_text);border:1px solid var(--rule);border-left:4px solid var(--accent);padding:16px}
.quantity-toast{border-radius:4px}
.annex-admin main{max-width:1120px;padding:32px 24px 80px}
.annex-admin main>nav:first-child{padding:16px 0;border-bottom:1px solid var(--rule);font-size:14px}
.annex-admin h1{margin:24px 0 32px}.annex-admin h2{margin-top:0;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.annex-admin section{background:var(--panel);padding:32px;border:1px solid var(--rule);border-radius:0;margin:32px 0;scroll-margin-top:24px}
.annex-admin article{border-radius:0;border-color:var(--rule);padding:24px;box-shadow:none}
.annex-admin .stats{gap:0;border:1px solid var(--rule);background:var(--panel)}.annex-admin .stats div{border:0;border-right:1px solid var(--rule);border-radius:0;padding:24px}.annex-admin .stats div:last-child{border-right:0}.annex-admin .stats span{font-size:14px}.annex-admin .stats strong{font-size:32px;line-height:1.5}
.annex-admin .work-nav{gap:0;border-bottom:1px solid var(--rule);padding:0}.annex-admin .work-nav a{border:0;border-radius:0;background:none;text-decoration:underline;padding:16px 20px;min-height:48px;font-weight:700}
.annex-admin summary{padding:20px 4px;color:var(--accent);text-decoration:underline;line-height:1.75}.annex-admin details+details{border-color:var(--rule)}
.annex-admin form{padding:16px 0}.annex-admin form button{min-height:48px;background:var(--accent);color:var(--button-text)}.annex-admin form button:hover{background:var(--accent);filter:brightness(.9)}
.annex-admin label{margin:16px 0;font-weight:700}.annex-admin input:not([type=checkbox]),.annex-admin textarea{min-height:48px;font-size:16px;padding:12px;border:1px solid var(--border)}
.annex-admin .small{font-size:14px;color:var(--muted)}
@media(max-width:900px){.header-inner,main{max-width:560px}.header-inner{flex-wrap:wrap}.site-header nav{width:100%;justify-content:space-between;margin:0}.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:901px){.site-header nav{flex:auto;width:100%;justify-content:space-between;font-size:14px}.search-main{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 80px}.search-main label{font-size:14px}.search-main input,.search-submit{min-height:48px}.quantity-help{font-size:14px}.quantity-help button{font-size:14px}}
@media(max-width:600px){h1{font-size:28px}h2{font-size:22px}.page-heading{flex-direction:column;gap:16px}.snapshot{flex:auto;text-align:left}.snapshot strong{display:inline;margin-left:8px}.snapshot span{margin-top:4px}.header-inner{padding:20px 16px}.site-header nav{gap:12px;font-size:13px}.basket-link{padding:8px}.search-panel{padding:16px 12px 0}.search-main{display:grid;grid-template-columns:1fr 80px;gap:12px}.search-main .keyword{grid-column:1/-1}.search-main .clear-link{grid-column:1/-1;text-align:right}.search-main input{margin-top:8px}.display-controls{flex-wrap:wrap;gap:12px}.quantity-help{align-items:flex-start;flex-wrap:wrap}.annex-admin main{padding:16px 16px 48px}.annex-admin section{padding:20px 16px}.annex-admin article{padding:16px}.annex-admin .stats div{padding:16px;border-bottom:1px solid var(--rule)}.annex-admin .stats div:nth-child(2){border-right:0}.annex-admin .stats strong{font-size:28px}.annex-admin .work-nav a{padding:12px 16px}.filter-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
@media print{body{background:#fff;color:#000}.skip-link{display:none}}

/* Customer catalog: wider desktop list, viewport-bounded on mobile. */
.annex-catalog main,.annex-catalog .header-inner{max-width:760px}

.first-visit{border:1px solid var(--border);background:var(--panel);padding:24px;margin-bottom:32px}.first-visit h2{margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--rule)}.intro-lead{margin-bottom:24px}.intro-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0;list-style:none}.intro-steps li{padding:16px;background:var(--tint);min-width:0}.intro-steps svg{display:block;width:56px;height:52px;fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}.intro-steps strong{display:block}.intro-steps p{font-size:14px;margin:8px 0 0}.intro-dismiss{display:flex;gap:10px;align-items:center;border-top:1px solid var(--rule);padding-top:16px;margin-top:24px}.intro-reopen{margin-bottom:24px}[hidden]{display:none!important}@media(max-width:600px){.first-visit{padding:20px 16px}.intro-steps{grid-template-columns:1fr;gap:12px}.intro-steps li{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px}.intro-steps svg{width:44px;height:44px;grid-row:span 2;margin:0}.intro-steps p{grid-column:2}}