/*
  Redwood風トークン v2 — 実際のFusion画面(Shipment Details)から採色。
  チェロム(トップバー)は暖色寄りの黒、ヘッダー帯は深いティール、本文背景は明るいニュートラル。
  警告=琥珀、通知=オレンジという実画面の使い分けに合わせている。
  Oracle Sansは非公開フォントのため、日本語も含めて自然な近似書体(Noto Sans JP)で代替。
*/
:root{
  --ink:#211D1A; --ink-soft:#6B6058; --ink-faint:#9C9187;
  --paper:#F5F2EE; --surface:#FFFFFF; --surface-sunken:#ECE6DF; --border:#DBD3C8;
  --chrome:#241F1C;
  --accent:#2C5658; --accent-strong:#1B3D3F; --accent-tint:#DCEAE9;
  --good:#3F7D58; --good-tint:#DFEEE4;
  --warn:#C08A2E; --warn-tint:#F4EAD1;
  --notify:#D8562E; --notify-tint:#F9DED2;
  --shadow: 0 1px 2px rgba(33,29,26,.06), 0 10px 26px -14px rgba(33,29,26,.22);
  --radius: 14px;
  --font-display: "Noto Sans JP", system-ui, sans-serif;
  --font-body: "Noto Sans JP", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F1EAE3; --ink-soft:#C9BCB0; --ink-faint:#93857A;
    --paper:#1C1917; --surface:#262220; --surface-sunken:#2F2A27; --border:#423B35;
    --chrome:#131110;
    --accent:#5B9C9B; --accent-strong:#7CB8B6; --accent-tint:#1E3A3B;
    --good:#5EB584; --good-tint:#1B3327;
    --warn:#D9AA3F; --warn-tint:#3A2E13;
    --notify:#E2724A; --notify-tint:#3A2417;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 32px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ink:#F1EAE3; --ink-soft:#C9BCB0; --ink-faint:#93857A;
  --paper:#1C1917; --surface:#262220; --surface-sunken:#2F2A27; --border:#423B35;
  --chrome:#131110;
  --accent:#5B9C9B; --accent-strong:#7CB8B6; --accent-tint:#1E3A3B;
  --good:#5EB584; --good-tint:#1B3327;
  --warn:#D9AA3F; --warn-tint:#3A2E13;
  --notify:#E2724A; --notify-tint:#3A2417;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 30px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
body{
  background:var(--paper); color:var(--ink); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; display:flex; flex-direction:column; min-height:100vh; margin:0;
}
h1,h2,h3{font-family:var(--font-display); margin:0;}
p{margin:0; line-height:1.7;}
a{color:inherit;}
::selection{background:var(--accent-tint); color:var(--accent-strong);}

.eyebrow{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint);}

.topbar{
  position:sticky; top:0; z-index:80;
  flex:none; height:52px; background:var(--chrome); display:flex; align-items:center;
  gap:12px; padding:0 20px; color:#F2EEE9;
}
.topbar a{text-decoration:none;}
.nav-menu{position:relative;}
.topbar .burger{display:flex; flex-direction:column; gap:3px; background:none; border:none; padding:8px 6px; margin:0 -6px; cursor:pointer; border-radius:6px;}
.topbar .burger:hover{background:rgba(255,255,255,.1);}
.topbar .burger span{width:16px; height:2px; background:#F2EEE9; border-radius:1px;}
.nav-menu-dropdown{position:absolute; top:calc(100% + 8px); left:0; min-width:190px; background:var(--surface); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); padding:6px; z-index:95; display:none; flex-direction:column; gap:1px;}
.nav-menu-dropdown.open{display:flex;}
.nav-menu-dropdown a{display:block; padding:9px 12px; border-radius:7px; font-size:.84rem; font-weight:500; color:var(--ink); text-decoration:none;}
.nav-menu-dropdown a:hover{background:var(--surface-sunken);}
.topbar .tb-name{font-weight:700; font-size:.92rem; letter-spacing:.01em;}
.topbar .tb-spacer{flex:1;}
.topbar .tb-icon{width:8px; height:8px; border-radius:50%; background:var(--notify);}
.topbar .tb-link{color:rgba(242,238,233,.8); font-size:.76rem; text-decoration:none; white-space:nowrap;}
.topbar .tb-link:hover{color:#fff;}
.topbar .tb-user{padding:4px 10px; border:1px solid rgba(242,238,233,.3); border-radius:20px;}
.logout-form{display:inline-flex; margin:0;}
.tb-logout{background:none; border:none; cursor:pointer; font-family:inherit; padding:0;}
.topbar .notebook-btn{display:flex; align-items:center; gap:6px; background:rgba(255,255,255,.08); border:1px solid rgba(242,238,233,.3); color:#F2EEE9; font-size:.76rem; font-weight:600; padding:5px 12px; border-radius:20px; cursor:pointer; font-family:inherit;}
.topbar .notebook-btn:hover{background:rgba(255,255,255,.18);}
.topbar .notebook-btn.active{background:var(--accent); border-color:var(--accent);}
.topbar .notebook-btn svg{width:14px; height:14px;}

.app-body{display:flex; flex:1; min-height:0;}
.shell{display:flex; width:100%; flex:1 1 1240px; max-width:1240px; margin:0 auto; min-width:0;}
.main{flex:1; min-width:0; padding:36px 44px 32px;}
.page{max-width:960px;}

.breadcrumb{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); margin-bottom:14px; display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
.breadcrumb a{color:var(--ink-faint); text-decoration:none;}
.breadcrumb a:hover{color:var(--accent-strong);}

.hero{
  position:relative; overflow:hidden; border-radius:var(--radius); margin-bottom:28px;
  padding:26px 30px; color:#F4FAF9;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='140' viewBox='0 0 320 140'%3E%3Cpath d='M0 70 Q80 20 160 70 T320 70' stroke='%23C9A876' stroke-width='2' fill='none' opacity='.35'/%3E%3Cpath d='M0 105 Q80 55 160 105 T320 105' stroke='%23C9A876' stroke-width='1.5' fill='none' opacity='.22'/%3E%3Cpath d='M0 35 Q80 90 160 35 T320 35' stroke='%23C9A876' stroke-width='1.5' fill='none' opacity='.18'/%3E%3C/svg%3E"),
    linear-gradient(155deg, var(--accent), var(--accent-strong));
  background-size: 320px 140px, cover;
}
.hero .eyebrow{color:rgba(244,250,249,.72);}
.hero h1{color:#fff; font-size:1.6rem; font-weight:700; letter-spacing:-.01em;}
.hero p{color:rgba(244,250,249,.86); margin-top:8px; max-width:62ch;}
.hero .exam-code-badge{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; padding:5px 10px; border-radius:6px; font-family:var(--font-mono); font-size:.78rem;}
.hero-row{display:flex; justify-content:space-between; align-items:flex-start; gap:20px;}
.hero-cta{flex:none; font-family:var(--font-body); font-size:.82rem; font-weight:600; padding:9px 16px; border-radius:8px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; text-decoration:none; white-space:nowrap;}
.hero-cta:hover{background:rgba(255,255,255,.28);}
.hero-top-row{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;}
.hero-badges{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;}
.feedback-pill{flex:none; display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:600; text-decoration:none; padding:4px 11px; border-radius:20px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); color:#fff; white-space:nowrap;}
.feedback-pill:hover{background:rgba(255,255,255,.28);}
.feedback-pill .pill-icon{width:13px; height:13px; flex:none;}

.revision-log{margin-bottom:8px;}
.revision-log summary{cursor:pointer; font-size:.82rem; font-weight:600; color:var(--ink-soft); list-style:none;}
.revision-log summary::-webkit-details-marker{display:none;}
.revision-log summary::before{content:"▸ "; color:var(--ink-faint);}
.revision-log[open] summary::before{content:"▾ ";}
.revision-list{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.revision-list li{font-size:.8rem; color:var(--ink-soft); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;}
.revision-date{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint); flex:none;}
.revision-author{font-size:.72rem; color:var(--accent-strong); font-weight:600; flex:none;}

.revision-all-rows{display:flex; flex-direction:column; gap:8px; margin-top:16px;}
.revision-all-row{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 15px; font-size:.83rem;}
.revision-all-row .revision-date{font-size:.72rem;}
.revision-all-row .revision-author{font-size:.74rem;}
.revision-target-type{font-family:var(--font-mono); font-size:.66rem; padding:2px 8px; border-radius:20px; background:var(--surface-sunken); color:var(--ink-soft); flex:none;}
.revision-target-label{font-weight:600; color:var(--ink); text-decoration:none; flex:none;}
.revision-target-label:hover{color:var(--accent-strong);}
.revision-target-label.muted{color:var(--ink-faint); font-weight:500;}
.revision-summary{color:var(--ink-soft); flex:1; min-width:200px;}


.feedback-rows{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.feedback-row{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 15px;}
.feedback-head{display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap;}
.feedback-author{font-weight:600; font-size:.82rem;}
.feedback-date{font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); margin-left:auto;}
.feedback-status{font-family:var(--font-mono); font-size:.62rem; padding:2px 8px; border-radius:20px; flex:none;}
.feedback-status.status-open{background:var(--warn-tint); color:var(--warn);}
.feedback-status.status-updated{background:var(--accent-tint); color:var(--accent-strong);}
.feedback-status.status-approved{background:var(--good-tint); color:var(--good);}
.feedback-status.status-reopened{background:var(--notify-tint); color:var(--notify);}
.feedback-content{font-size:.85rem; color:var(--ink-soft); line-height:1.7;}
.feedback-update-note{font-size:.78rem; color:var(--ink-faint); margin-top:6px; padding-top:6px; border-top:1px dashed var(--border); line-height:1.6;}
.feedback-actions{display:flex; gap:8px; margin-top:10px;}
.feedback-actions button{font-family:var(--font-body); font-size:.76rem; font-weight:600; padding:6px 13px; border-radius:6px; border:1px solid var(--accent); background:var(--accent-tint); color:var(--accent-strong); cursor:pointer;}
.feedback-actions button.secondary{border-color:var(--border); background:var(--surface-sunken); color:var(--ink-soft);}
.feedback-actions button:hover{opacity:.85;}

.feedback-form{display:flex; flex-direction:column; gap:8px; margin-top:14px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 15px;}
.feedback-form input, .feedback-form textarea{font-family:var(--font-body); font-size:.85rem; padding:8px 10px; border:1px solid var(--border); border-radius:6px; background:var(--surface-sunken); color:var(--ink); resize:vertical;}
.feedback-form textarea{min-height:70px;}
.feedback-form button{align-self:flex-start; font-family:var(--font-body); font-size:.8rem; font-weight:600; padding:7px 16px; border-radius:6px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer;}
.feedback-form button:hover{background:var(--accent-strong);}

.stat-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:24px 0 32px;}
.stat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px;}
.stat-card .num{font-family:var(--font-mono); font-size:1.5rem; font-weight:600;}
.stat-card .label{font-size:.78rem; color:var(--ink-soft); margin-top:2px;}

.cert-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px;}
.cert-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; display:flex; flex-direction:column; gap:12px; text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;}
.cert-card:hover, .cert-card:focus-visible{border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-2px);}
.cert-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.cert-code{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint);}
.cert-title{font-weight:600; font-size:.98rem; margin-top:3px; line-height:1.4;}
.status-pill{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.03em; padding:3px 8px; border-radius:20px; white-space:nowrap; flex:none;}
.status-pill.building{background:var(--accent-tint); color:var(--accent-strong);}
.status-pill.todo{background:var(--surface-sunken); color:var(--ink-faint);}
.progress-row{display:flex; align-items:center; gap:8px;}
.progress-track{flex:1; height:5px; border-radius:3px; background:var(--surface-sunken); overflow:hidden;}
.progress-fill{height:100%; background:var(--accent); border-radius:3px;}
.progress-label{font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); white-space:nowrap;}

.legal-note{margin-top:32px; padding:14px 16px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--warn); border-radius:8px; font-size:.78rem; color:var(--ink-soft); line-height:1.7;}

.section{margin-top:30px;}
.section h2{font-size:1.02rem; font-weight:700; margin-bottom:10px;}
.section h2 .n{font-family:var(--font-mono); color:var(--accent); margin-right:8px; font-weight:600;}
.prose{color:var(--ink-soft); font-size:.9rem; line-height:1.9;}
.key-points{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px;}
.key-points li{position:relative; padding-left:18px; font-size:.87rem; color:var(--ink-soft); line-height:1.6;}
.key-points li::before{content:""; position:absolute; left:2px; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--accent);}

.plain-topic-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px;}
.plain-topic-list li{font-size:.87rem; color:var(--ink-soft); display:flex; align-items:baseline; gap:10px;}
.plain-topic-index{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); flex:none; width:18px;}

.topic-list{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.topic-row{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:11px 14px; text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease;}
.topic-row:hover, .topic-row:focus-visible{border-color:var(--accent); box-shadow:var(--shadow);}
.topic-row.disabled{cursor:default; opacity:.55; pointer-events:none;}
.topic-index{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); width:18px; flex:none;}
.topic-name{font-size:.87rem; font-weight:500; flex:1;}
.topic-arrow{color:var(--ink-faint); font-size:.8rem;}
.topic-row.reference{border-style:dashed;}
.topic-row.reference .topic-index{width:auto; font-family:inherit; padding:1px 6px; border-radius:5px; background:var(--surface-sunken); color:var(--ink-soft);}

.exam-format{display:flex; gap:22px; margin-top:14px; padding:14px 16px; background:var(--surface-sunken); border-radius:8px; font-size:.8rem; color:var(--ink-soft); flex-wrap:wrap;}
.exam-format div strong{display:block; color:var(--ink); font-size:.78rem; margin-bottom:2px;}

.setup-banner{margin-top:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:8px; padding:14px 18px; text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease;}
.setup-banner:hover, .setup-banner:focus-visible{border-color:var(--accent); box-shadow:var(--shadow);}
.setup-banner .t{font-weight:600; font-size:.9rem;}
.setup-banner .d{font-size:.78rem; color:var(--ink-soft); margin-top:3px;}
.setup-banner .go{font-family:var(--font-mono); font-size:.76rem; color:var(--accent-strong); white-space:nowrap;}

.tool-row{margin-top:22px;}
.tool-link{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; padding:9px 4px; border-radius:8px; transition:background .15s ease;}
.tool-link:hover, .tool-link:focus-visible{background:var(--surface-sunken);}
.tool-link .tool-icon{width:19px; height:19px; flex:none; color:var(--accent);}
.tool-link .t{font-weight:600; font-size:.82rem; display:block;}
.tool-link .d{font-size:.72rem; color:var(--ink-faint); display:block; margin-top:1px;}
.tool-link .go{margin-left:auto; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); white-space:nowrap;}

.setup-group{margin-top:26px;}
.setup-group-head{display:flex; align-items:baseline; gap:10px; margin-bottom:9px;}
.setup-group-head h3{font-size:.88rem; font-weight:700;}
.setup-group-head .count{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint);}
.setup-rows{display:flex; flex-direction:column; gap:6px;}
.setup-row{display:flex; align-items:flex-start; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 13px; text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease;}
a.setup-row:hover, a.setup-row:focus-visible{border-color:var(--accent); box-shadow:var(--shadow);}
.setup-row .name{font-family:var(--font-mono); font-size:.79rem; font-weight:500; flex:none; width:272px;}
.setup-row .desc{font-size:.8rem; color:var(--ink-soft); flex:1; line-height:1.6;}
.setup-row .go{font-size:.76rem; color:var(--ink-faint); flex:none; white-space:nowrap; align-self:center;}
.setup-row .ref{font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint); background:var(--surface-sunken); padding:2px 8px; border-radius:20px; flex:none; white-space:nowrap; align-self:flex-start; margin-top:1px; text-decoration:none;}
.setup-row a.ref:hover{color:var(--accent-strong);}

.nav-path-card{border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:16px 18px;}
.nav-path{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.nav-chip{font-family:var(--font-mono); font-size:.78rem; background:var(--surface-sunken); border:1px solid var(--border); padding:5px 11px; border-radius:6px; color:var(--ink);}
.nav-chip.final{background:var(--accent-tint); border-color:var(--accent); color:var(--accent-strong); font-weight:600;}
.nav-sep{color:var(--ink-faint); font-size:.8rem;}
.nav-path-note{font-size:.76rem; color:var(--ink-faint); margin-top:10px; line-height:1.6;}
.nav-path-note .flag{color:var(--warn); font-weight:600;}

.attach-placeholder{display:flex; align-items:center; gap:8px; margin-top:12px; padding:9px 13px; border:1px dashed var(--border); border-radius:8px; color:var(--ink-faint); font-size:.78rem; background:var(--surface-sunken); width:fit-content;}
.attach-placeholder svg{width:15px; height:15px; flex:none;}
.attach-placeholder .coming-soon{font-family:var(--font-mono); font-size:.6rem; letter-spacing:.03em; padding:2px 7px; border-radius:20px; background:var(--surface); border:1px solid var(--border); color:var(--ink-faint);}

.screenshot-gallery{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; margin-top:14px;}
.screenshot-item{display:block; margin:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface);}
.screenshot-item a{display:block; line-height:0;}
.screenshot-item img{display:block; width:100%; height:auto;}
.screenshot-item figcaption{padding:8px 10px; font-size:.74rem; color:var(--ink-soft); line-height:1.5; border-top:1px solid var(--border);}

.ui-toggle{display:flex; gap:26px; border-bottom:1px solid var(--border); margin-bottom:16px;}
.ui-toggle button{border:none; background:none; padding:9px 1px 11px; font-size:.86rem; font-weight:600; color:var(--ink-faint); cursor:pointer; position:relative; font-family:inherit;}
.ui-toggle button:hover{color:var(--ink-soft);}
.ui-toggle button.active{color:var(--ink);}
.ui-toggle button.active::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background:var(--ink); border-radius:2px 2px 0 0;}
.ui-panel{display:none;}
.ui-panel.active{display:block;}

.checklist{display:flex; flex-direction:column; gap:7px; margin-top:12px;}
.check-row{display:flex; align-items:flex-start; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 13px;}
.check-row input{margin-top:3px; accent-color:var(--accent); flex:none;}
.check-row label{font-size:.85rem; flex:1; cursor:pointer;}
.weight-tag{font-family:var(--font-mono); font-size:.64rem; padding:2px 7px; border-radius:20px; flex:none; margin-top:1px;}
.weight-tag.high{background:var(--warn-tint); color:var(--warn);}
.weight-tag.mid{background:var(--accent-tint); color:var(--accent-strong);}
.weight-tag.low{background:var(--good-tint); color:var(--good);}

.official-link{margin-top:14px; display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--surface-sunken); border:1px dashed var(--border); border-radius:8px; font-size:.78rem; color:var(--ink-faint);}

.term-rows{display:flex; flex-direction:column; gap:8px; margin-top:14px;}
.term-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 13px; transition:border-color .15s ease, box-shadow .15s ease;}
.term-row:focus-within{border-color:var(--accent); box-shadow:var(--shadow);}
.term-en{font-family:var(--font-mono); font-size:.8rem; font-weight:600; flex:none; width:220px;}
.term-ja-input{flex:1; min-width:140px; font-family:var(--font-body); font-size:.85rem; padding:6px 9px; border:1px solid var(--border); border-radius:6px; background:var(--surface-sunken); color:var(--ink); transition:border-color .15s ease, background .15s ease;}
.term-ja-input:focus{outline:none; border-color:var(--accent); background:var(--surface);}
.term-row button{flex:none; font-family:var(--font-body); font-size:.78rem; font-weight:600; padding:6px 14px; border-radius:6px; border:1px solid var(--accent); background:var(--accent-tint); color:var(--accent-strong); cursor:pointer; transition:background .15s ease, color .15s ease;}
.term-row button:hover, .term-row button:focus-visible{background:var(--accent); color:#fff;}

.param-rows{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.param-row{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px;}
.param-head{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.param-name{font-family:var(--font-mono); font-size:.86rem; font-weight:600;}
.required-tag{font-family:var(--font-mono); font-size:.64rem; padding:2px 8px; border-radius:20px; background:var(--warn-tint); color:var(--warn);}
.required-tag.optional{background:var(--surface-sunken); color:var(--ink-faint);}
.param-line{display:flex; gap:10px; font-size:.82rem; color:var(--ink-soft); line-height:1.6; margin-top:4px;}
.param-line .l{flex:none; width:84px; color:var(--ink-faint); font-size:.72rem; padding-top:2px;}

.hub-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; margin-top:24px;}
.hub-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:22px 20px; display:flex; flex-direction:column; gap:8px; text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;}
.hub-card:hover, .hub-card:focus-visible{border-color:var(--accent); box-shadow:var(--shadow); transform:translateY(-2px);}
@media (max-width:860px){ .hub-grid{grid-template-columns:1fr;} }
.hub-head{display:flex; align-items:center; gap:10px;}
.hub-icon{width:24px; height:24px; color:var(--accent); flex:none;}
.hub-title{font-weight:700; font-size:1rem;}
.hub-desc{font-size:.8rem; color:var(--ink-soft); line-height:1.6; flex:1;}
.hub-count{font-family:var(--font-mono); font-size:.72rem; color:var(--accent-strong); margin-top:6px;}
@media (max-width: 860px){
  .hub-grid{grid-template-columns:1fr;}
}

.chapter-accordion{display:flex; flex-direction:column; gap:10px; margin-top:22px;}
.chapter-item{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.chapter-item summary{display:flex; align-items:center; gap:12px; padding:15px 18px; cursor:pointer; list-style:none; font-weight:600;}
.chapter-item summary::-webkit-details-marker{display:none;}
.chapter-item .chapter-num{font-family:var(--font-mono); font-size:.72rem; color:var(--accent); flex:none;}
.chapter-item .chapter-name{font-size:.92rem; flex:1;}
.chapter-item summary .count{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint); flex:none;}
.chapter-item .chevron{color:var(--ink-faint); font-size:.72rem; transition:transform .15s ease; flex:none;}
.chapter-item[open] .chevron{transform:rotate(180deg);}
.chapter-body{padding:0 18px 16px;}
.chapter-body .doc-link{display:inline-block; font-size:.72rem; color:var(--ink-faint); text-decoration:none; margin-bottom:10px;}
.chapter-body .doc-link:hover{color:var(--accent-strong);}
.guide-feature-rows{display:flex; flex-direction:column; gap:6px;}
.guide-feature-row{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 13px; text-decoration:none; color:inherit; transition:border-color .15s ease, box-shadow .15s ease;}
.guide-feature-row:hover, .guide-feature-row:focus-visible{border-color:var(--accent); box-shadow:var(--shadow);}
.guide-feature-row .name{font-size:.85rem; font-weight:500; flex:1;}
.checklist-done-badge{font-family:var(--font-mono); font-size:.64rem; font-weight:700; padding:2px 9px; border-radius:20px; flex:none; white-space:nowrap; background:var(--good-tint); color:var(--good);}
.scope-badge{font-family:var(--font-mono); font-size:.64rem; padding:2px 9px; border-radius:20px; flex:none; white-space:nowrap;}
.scope-badge.in_scope{background:var(--good-tint); color:var(--good);}
.scope-badge.unknown{background:var(--surface-sunken); color:var(--ink-faint); border:1px dashed var(--border);}
.scope-badge.out_of_scope{background:var(--surface-sunken); color:var(--ink-faint); opacity:.7;}

@media (max-width: 860px){
  .cert-grid{grid-template-columns:1fr;}
  .main{padding:26px 20px 24px;}
  .setup-row{flex-direction:column;}
  .setup-row .name{width:auto;}
}

/* 資格取得体験記 */
.experience-form{display:flex; flex-direction:column; gap:14px; margin-top:12px;}
.experience-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.field{display:flex; flex-direction:column; gap:5px;}
.field-label{font-size:.76rem; color:var(--ink-soft); font-weight:600;}
.field select, .field input, .field textarea{font-family:var(--font-body); font-size:.85rem; padding:8px 10px; border:1px solid var(--border); border-radius:8px; background:var(--surface-sunken); color:var(--ink); transition:border-color .15s ease, background .15s ease;}
.field select:focus, .field input:focus, .field textarea:focus{outline:none; border-color:var(--accent); background:var(--surface);}
.field textarea{min-height:72px; resize:vertical;}
.experience-form > button{align-self:flex-start; font-family:var(--font-body); font-size:.84rem; font-weight:600; padding:9px 20px; border-radius:8px; border:none; background:var(--accent); color:#fff; cursor:pointer;}
.experience-form > button:hover{background:var(--accent-strong);}
.experience-rows{display:flex; flex-direction:column; gap:10px; margin-top:12px;}
.experience-row{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px;}
.experience-head{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.experience-author{font-weight:700; font-size:.86rem;}
.experience-date{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint);}
.experience-stats{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
.experience-tag{font-family:var(--font-mono); font-size:.68rem; padding:3px 9px; border-radius:20px; background:var(--accent-tint); color:var(--accent-strong);}
.experience-text{font-size:.82rem; color:var(--ink-soft); line-height:1.7; margin-top:6px;}
.experience-text .l{display:block; font-size:.68rem; color:var(--ink-faint); font-weight:600; margin-bottom:2px;}
@media (max-width:640px){ .experience-grid{grid-template-columns:1fr;} }

/* ノート（ドッキング型ノートパネル。オーバーレイなし＝本体側は常に操作可能） */
/* 閉じている間はwidth:0+overflow:hiddenで見た目だけ隠しているが、内部のツールバー
   ボタン群やプレースホルダ文言には明示的なwidth指定が無いため、ブラウザが「幅0pxに
   収まるように」中身を再フローしようとして縦に異常に間延びし、その高さがflexの
   align-items:stretch経由で兄弟の.shell（ページ本体）側にまで伝播し、ダッシュボード等
   短いページの下に巨大な空白ができる不具合があった（2026-10-31判明）。
   containで「この要素のサイズは中身に影響されない」と明示し、中身の再フローが外側の
   サイズ計算に漏れ出さないようにする。 */
.notebook-panel{
  flex:none; width:0; min-width:0; overflow:hidden; position:relative;
  background:var(--surface); border-left:0 solid var(--border);
  display:flex; flex-direction:column; transition:width .2s ease;
  contain:size layout style;
}
.app-body.notebook-open .notebook-panel{contain:layout style;}
.app-body.notebook-open .notebook-panel{width:50vw; max-width:760px; min-width:380px; border-left-width:1px;}
@media (max-width:900px){
  /* キーボード表示時にこのfixed要素がvisual viewportからずれて隠れる問題は、
     JSで動的にtop/heightを補正する方式が不安定だったため、viewport meta の
     interactive-widget=resizes-content（base.html）に任せる方針にした。
     対応ブラウザではキーボード表示に合わせてここ自体のレイアウトが正しく再計算される。 */
  .app-body.notebook-open .notebook-panel{position:fixed; inset:52px 0 0 0; width:100vw; max-width:none; z-index:70;}
  .app-body.notebook-open .shell{display:none;}
}

.notebook-head{flex:none; display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); position:sticky; top:0; z-index:2; background:var(--surface);}
.notebook-head button{flex:none; border:1px solid var(--border); background:var(--surface); color:var(--ink-soft); font-size:.85rem; width:30px; height:30px; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.notebook-head button:hover{border-color:var(--accent); color:var(--accent-strong);}
.notebook-head input{flex:1; min-width:0; font-family:var(--font-display); font-size:.96rem; font-weight:700; border:none; background:none; color:var(--ink); padding:2px 4px;}
.notebook-head input:focus{outline:none;}

.notebook-toolbar{flex:none; display:flex; align-items:center; gap:4px; padding:6px 10px; border-bottom:1px solid var(--border); background:var(--surface-sunken); flex-wrap:wrap; position:sticky; top:0; z-index:2;}
.notebook-toolbar button{flex:none; border:1px solid transparent; background:none; color:var(--ink-soft); font-size:.8rem; padding:5px 9px; border-radius:6px; cursor:pointer; font-family:inherit;}
.notebook-toolbar button:hover{background:var(--surface); border-color:var(--border); color:var(--ink);}
.notebook-toolbar button.wide{font-size:.72rem; font-weight:600;}
.notebook-toolbar .sep{width:1px; height:18px; background:var(--border); margin:0 4px;}

.notebook-body{flex:1; min-height:0; display:flex; flex-direction:column; position:relative;}
.notebook-editor{flex:1; overflow:auto; padding:16px 18px; font-size:.88rem; line-height:1.6; color:var(--ink); outline:none;}
.notebook-editor p{margin:0 0 4px;}
.notebook-editor h2{font-size:1.1rem; font-weight:900; color:var(--ink); margin:20px 0 8px; line-height:1.4;}
.notebook-editor h3{font-size:.98rem; font-weight:700; color:var(--ink); margin:14px 0 6px; line-height:1.4;}
.notebook-editor h2:first-child, .notebook-editor h3:first-child{margin-top:0;}
.notebook-editor a{color:var(--accent-strong); text-decoration:underline; cursor:pointer;}
.notebook-editor table{border-collapse:collapse; margin:10px 0; font-size:.84rem;}
.notebook-editor table td, .notebook-editor table th{border:1px solid var(--border); padding:6px 11px;}
.notebook-editor table th{background:var(--surface-sunken);}
.notebook-editor img{max-width:100%; height:auto; border-radius:8px; display:block; margin:8px 0; border:1px solid var(--border);}
.notebook-editor.drag-over{outline:2px dashed var(--accent); outline-offset:-6px; background:var(--accent-tint);}
.notebook-editor:empty::before{content:"ここにメモを書けます。太字はCtrl+B、URLを貼り付けると自動でリンク化されます。画像は🖼ボタン・貼り付け・ドラッグ＆ドロップで挿入できます。"; color:var(--ink-faint);}
@media (max-width:900px){
  /* iOSはフォーカスした入力欄のfont-sizeが16px未満だと自動でページを拡大するため、
     ノート内でタップして入力できる要素は16px以上にしておく（拡大が起きると操作しづらいため）。
     このブロックは上の無指定ルール（.84rem等）より後ろに置いて確実に上書きする。 */
  .notebook-head input, .notebook-editor, .notebook-editor table{font-size:16px;}
}

.notebook-foot{flex:none; padding:7px 14px; border-top:1px solid var(--border); font-size:.7rem; color:var(--ink-faint); display:flex; align-items:center; justify-content:space-between;}
.notebook-foot .syntax-help{cursor:help;}

.notebook-page-list{position:absolute; inset:0; z-index:5; background:var(--surface); display:none; flex-direction:column;}
.notebook-page-list.open{display:flex;}
.notebook-page-list-head{flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); font-weight:700; font-size:.86rem;}
.notebook-page-list-head button{font-family:var(--font-body); font-size:.76rem; font-weight:600; padding:5px 12px; border-radius:6px; border:1px solid var(--accent); background:var(--accent-tint); color:var(--accent-strong); cursor:pointer;}
.notebook-page-list-head button:hover{background:var(--accent); color:#fff;}
.notebook-page-list-items{flex:1; overflow:auto; padding:6px;}
.notebook-page-row{display:flex; align-items:center; gap:8px; padding:10px 10px; border-radius:8px; cursor:pointer;}
.notebook-page-row:hover{background:var(--surface-sunken);}
.notebook-page-row.active{background:var(--accent-tint);}
.notebook-page-row .title{flex:1; min-width:0; font-size:.85rem; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.notebook-page-row .del{flex:none; color:var(--ink-faint); font-size:.78rem; padding:3px 6px; border-radius:5px;}
.notebook-page-row .del:hover{color:var(--notify); background:var(--notify-tint);}

/* デモ問題ページ */
.demo-stats{display:flex; gap:14px; margin-top:20px; flex-wrap:wrap;}
.demo-stat{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 20px; display:flex; flex-direction:column; align-items:flex-start; gap:4px;}
.demo-stat .num{font-family:var(--font-mono); font-size:1.4rem; font-weight:700; color:var(--ink);}
.demo-stat .label{font-size:.78rem; color:var(--ink-soft);}

.demo-info-box{background:var(--surface-sunken); border-radius:12px; padding:16px 20px; margin:22px 0;}
.demo-info-label{font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px;}
.demo-info-box p{font-size:.86rem; color:var(--ink-soft); line-height:1.75;}

.demo-source-badge{display:inline-block; font-family:var(--font-mono); font-size:.66rem; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap;}
.demo-source-badge.official{background:var(--warn-tint); color:var(--warn);}
.demo-source-badge.generated{background:var(--accent-tint); color:var(--accent-strong);}

.demo-source-head{display:flex; align-items:center; gap:10px; font-size:1.05rem; font-weight:900; color:var(--ink); margin:34px 0 14px; padding-top:22px; border-top:2px solid var(--border);}
.demo-source-head:first-of-type{border-top:none; padding-top:0; margin-top:10px;}
.demo-domain-head{font-size:.86rem; font-weight:700; color:var(--accent-strong); margin:22px 0 8px;}

.demo-q-num{font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); flex:none;}
.demo-q-text{font-size:.9rem; color:var(--ink); line-height:1.6;}

.demo-filter-tabs{display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 4px;}
.demo-filter-tabs a{font-size:.78rem; color:var(--ink-soft); background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:6px 14px; text-decoration:none;}
.demo-filter-tabs a.active{background:var(--accent-strong); color:var(--surface); border-color:var(--accent-strong);}
.demo-empty-filter{color:var(--ink-faint); font-size:.86rem; padding:24px 0;}

.demo-q-row{display:flex; align-items:baseline; gap:10px; background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:8px; padding:13px 16px; text-decoration:none; color:inherit;}
.demo-q-row:hover{border-color:var(--accent); background:var(--accent-tint);}
.demo-q-status{margin-left:auto; display:flex; gap:6px; flex:none;}
.demo-status-icon{font-family:var(--font-mono); font-size:.76rem; font-weight:700; flex:none;}
.demo-status-icon.correct{color:var(--good);}
.demo-status-icon.wrong{color:var(--notify);}
.demo-status-icon.flag{color:var(--warn);}

.demo-options{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.demo-options li{display:flex; align-items:baseline; gap:10px; padding:9px 12px; border-radius:8px; background:var(--surface-sunken); font-size:.85rem; color:var(--ink-soft);}
.demo-options li label{display:flex; align-items:baseline; gap:10px; width:100%; cursor:pointer;}
.demo-options li.correct{background:var(--good-tint); color:var(--good);}
.demo-options li.incorrect-selected{background:var(--notify-tint); color:var(--notify);}
.demo-options li.correct-missed{background:var(--surface-sunken); color:var(--good); border:1.5px dashed var(--good);}
.demo-opt-label{font-family:var(--font-mono); font-weight:700; flex:none;}
.demo-opt-text{flex:1;}
.demo-opt-check{font-family:var(--font-mono); font-size:.7rem; font-weight:700; flex:none;}
.demo-q-multi-hint{font-size:.78rem; color:var(--warn); font-weight:600; margin:0 0 10px;}

.demo-explanation{margin-top:12px; font-size:.84rem; color:var(--ink-soft); line-height:1.75; padding:12px 14px; background:var(--accent-tint); border-radius:8px;}
.demo-explanation strong{display:block; font-size:.68rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.05em; color:var(--accent-strong); margin-bottom:5px;}
.demo-explanation.muted{background:var(--surface-sunken); color:var(--ink-faint); font-style:italic;}
.demo-source-note{margin-top:8px; font-size:.72rem; color:var(--ink-faint);}

/* デモ問題: 設問詳細ページ（回答→正解表示の試験フロー） */
.demo-q-detail-head{display:flex; align-items:center; gap:12px; margin-top:20px;}
.demo-q-position{font-family:var(--font-mono); font-size:.76rem; color:var(--ink-faint);}
.demo-q-detail-text{font-size:1.15rem; line-height:1.7; margin:16px 0 0; font-weight:700;}
.demo-q-detail-text-en{font-size:.84rem; line-height:1.6; margin:6px 0 20px; color:var(--ink-faint); font-style:italic; font-weight:400;}
.demo-opt-text-en{display:block; font-size:.78rem; color:var(--ink-faint); font-style:italic; font-weight:400; margin-top:3px;}
.demo-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:18px;}
.demo-flag-form{display:contents;}
.demo-answer-btn,
.demo-flag-btn{
  font-family:var(--font-body,var(--font-display)); font-size:1rem; font-weight:700;
  padding:13px 28px; border-radius:10px; cursor:pointer; line-height:1.3;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.demo-answer-btn:active,
.demo-flag-btn:active{transform:translateY(1px);}
.demo-answer-btn{border:1.5px solid var(--accent); background:var(--accent); color:#fff;}
.demo-answer-btn:hover{background:var(--accent-strong); border-color:var(--accent-strong);}
.demo-flag-btn{background:var(--surface); color:var(--ink-soft); border:1.5px solid var(--border);}
.demo-flag-btn:hover{border-color:var(--warn); color:var(--warn);}
.demo-flag-btn.active{background:var(--warn-tint); color:var(--warn); border-color:var(--warn);}
@media (max-width:520px){
  .demo-actions{flex-direction:column; align-items:stretch;}
  .demo-answer-btn, .demo-flag-btn{width:100%; text-align:center;}
}

/* ログイン画面 */
.login-wrap{display:flex; justify-content:center; padding-top:48px;}
.login-card{width:100%; max-width:360px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px 26px; box-shadow:var(--shadow); text-align:center;}
.login-card h1{font-size:1.3rem; margin:8px 0 4px;}
.login-card .prose{margin-bottom:18px;}
.login-error{color:var(--notify); font-size:.84rem; margin-bottom:12px;}
.login-form{display:flex; flex-direction:column; gap:10px;}
.login-form input{font-family:var(--font-body); font-size:1rem; padding:11px 13px; border:1px solid var(--border); border-radius:8px; background:var(--surface-sunken); color:var(--ink); text-align:center;}
.login-form input:focus{outline:none; border-color:var(--accent);}
.login-form button{font-family:var(--font-body); font-size:.92rem; font-weight:700; padding:11px 16px; border-radius:8px; border:1px solid var(--accent); background:var(--accent); color:#fff; cursor:pointer;}
.login-form button:hover{background:var(--accent-strong); border-color:var(--accent-strong);}
.demo-q-nav{display:flex; justify-content:space-between; align-items:center; margin-top:28px; padding-top:18px; border-top:1px solid var(--border); font-size:.86rem;}
.demo-q-nav a{color:var(--accent-strong); text-decoration:none; font-weight:600;}