/* 職場の言語化力診断 — 画面の見た目。色・余白・角丸・書体は ds-tokens.css のトークンだけを使う（Requirement 15）。
   階層は影ではなく地色と罫線で表す。オレンジは主要な行動のボタンだけに使う。 */
*{box-sizing:border-box}
body{margin:0;word-break:auto-phrase;background:var(--gk-surface-beige);color:var(--gk-text);font-family:var(--gk-font-sans);font-size:16px;line-height:1.85}
button,textarea{font:inherit;color:inherit}
button,a,summary{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible,input:focus-visible,h1:focus-visible,h2:focus-visible{outline:3px solid var(--gk-border-strong);outline-offset:var(--gk-space-1)}
h1:focus:not(:focus-visible),h2:focus:not(:focus-visible){outline:none}
h1,h2,h3{font-family:var(--gk-font-serif);color:var(--gk-text-heading);margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--gk-text-heading)}

/* ヘッダーとフッター（体験画面と Legal_Pages で共通） */
header{max-width:1080px;margin:0 auto;padding:var(--gk-space-5) var(--gk-gutter);display:flex;align-items:center;justify-content:space-between;gap:var(--gk-space-4);border-bottom:1px solid var(--gk-border-subtle)}
.brand{display:flex;gap:var(--gk-space-3);align-items:center;text-decoration:none;color:var(--gk-text-heading);font-weight:700;font-size:18px}
.logo{display:grid;place-items:center;background:var(--gk-navy);color:var(--gk-text-on-dark);border-radius:var(--gk-radius-control);width:32px;height:32px;font-family:var(--gk-font-serif)}
.brand-sub{font-size:13px;font-weight:400;color:var(--gk-text-muted)}
.demo{font-size:13px;border:1px solid var(--gk-border-field);border-radius:var(--gk-radius-pill);padding:var(--gk-space-1) var(--gk-space-3);color:var(--gk-text-heading);background:var(--gk-surface-white);white-space:nowrap}
main{min-height:calc(100vh - 200px);padding:0 var(--gk-gutter)}
footer{max-width:1080px;margin:var(--gk-space-9) auto 0;padding:var(--gk-space-6) var(--gk-gutter);display:flex;flex-direction:column;gap:var(--gk-space-2);font-size:13px;color:var(--gk-text-muted);border-top:1px solid var(--gk-border-field)}
.legal-nav{display:flex;gap:var(--gk-space-4);flex-wrap:wrap}
#log-state:empty{display:none}

/* トップ */
.landing{max-width:720px;margin:var(--gk-space-8) auto 0;display:grid;gap:var(--gk-space-6)}
.landing h1{font-size:34px;line-height:1.5;font-weight:700}
.intro{font-size:17px}
.how{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:how;border:1px solid var(--gk-border-field);border-radius:var(--gk-radius-control);background:var(--gk-surface-white)}
.how li{counter-increment:how;display:grid;grid-template-columns:40px 1fr;column-gap:var(--gk-space-4);padding:var(--gk-space-4) var(--gk-space-5)}
.how li+li{border-top:1px solid var(--gk-border-subtle)}
.how li::before{content:counter(how);grid-row:span 2;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--gk-radius-pill);background:var(--gk-navy);color:var(--gk-text-on-dark);font-weight:700}
.how b{color:var(--gk-text-heading)}
.how span{color:var(--gk-text-muted);font-size:15px}
.start{display:grid;gap:var(--gk-space-3);max-width:400px}

/* 体験の画面 */
.flow{max-width:720px;margin:var(--gk-space-6) auto 0;display:grid;gap:var(--gk-space-5)}
.flow.legal{gap:var(--gk-space-4)}
.flow.legal h3{margin-top:var(--gk-space-4)}
.topline{display:flex;justify-content:space-between;align-items:center;gap:var(--gk-space-4);font-size:14px;color:var(--gk-text-muted)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--gk-border-field);border-radius:var(--gk-radius-control);overflow:hidden;background:var(--gk-surface-white);counter-reset:step}
.steps li{counter-increment:step;padding:var(--gk-space-2) var(--gk-space-3);font-size:14px;color:var(--gk-text-muted);text-align:center}
.steps li+li{border-left:1px solid var(--gk-border-field)}
.steps li::before{content:counter(step) ". "}
.steps li.done{color:var(--gk-text-heading)}
.steps li[aria-current]{background:var(--gk-navy);color:var(--gk-text-on-dark);font-weight:700}
.flow h2{font-size:25px;line-height:1.55}
.flow h3{font-size:17px}
.lead{color:var(--gk-text)}
.card{background:var(--gk-surface-white);border:1px solid var(--gk-border-field);border-radius:var(--gk-radius-control);padding:var(--gk-space-6);display:grid;gap:var(--gk-space-4)}
.card.ask{border:2px solid var(--gk-border-strong)}
.card.review{background:var(--gk-surface-liteblue);border-color:var(--gk-border-subtle)}
.step-label{display:inline-block;justify-self:start;font-size:14px;font-weight:700;color:var(--gk-text-on-dark);background:var(--gk-navy);border-radius:var(--gk-radius-tag);padding:0 var(--gk-space-3)}
.card.review .step-label{background:var(--gk-lightblue)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gk-space-5)}
.split h3{margin-bottom:var(--gk-space-2)}
.scene-facts{margin:0;display:grid;gap:var(--gk-space-2)}
.scene-facts div{display:grid;gap:0}
.scene-facts dt{font-size:14px;color:var(--gk-text-muted)}
.scene-facts dd{margin:0}
ul.plain{margin:0;padding-left:1.2em;display:grid;gap:var(--gk-space-1)}
.none{color:var(--gk-text-muted)}
.label{display:block;font-size:13px;color:var(--gk-text-muted);font-weight:700}
.micro{font-size:13px;color:var(--gk-text-muted)}
.note{color:var(--gk-text-muted);font-size:15px}
.note code{font-size:13px;background:var(--gk-surface-gray);padding:0 var(--gk-space-1);border-radius:var(--gk-radius-tag);word-break:break-all}
.consent{display:flex;gap:var(--gk-space-2);align-items:flex-start}
.consent input{margin-top:var(--gk-space-2)}

/* 入力 */
form{display:grid;gap:var(--gk-space-2)}
textarea{width:100%;min-height:96px;resize:vertical;border:1px solid var(--gk-border-field);border-radius:var(--gk-radius-control);padding:var(--gk-space-3) var(--gk-space-4);background:var(--gk-surface-white);line-height:1.7}
.input-meta{display:flex;justify-content:space-between;gap:var(--gk-space-3);flex-wrap:wrap;font-size:13px;color:var(--gk-text-muted)}

/* ボタン */
.primary{background:var(--gk-orange);color:var(--gk-text-on-dark);border:0;border-radius:var(--gk-radius-control);padding:var(--gk-space-3) var(--gk-space-5);font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:var(--gk-space-4);width:100%;transition:background var(--gk-duration) var(--gk-ease)}
.primary:hover{background:var(--gk-orange-strong)}
.secondary{background:var(--gk-surface-white);color:var(--gk-text-heading);border:1px solid var(--gk-border-strong);border-radius:var(--gk-radius-control);padding:var(--gk-space-3) var(--gk-space-5);font-weight:700;width:100%;text-align:left}
.secondary:hover{background:var(--gk-surface-gray)}
.text-btn{background:none;border:0;padding:var(--gk-space-1) 0;color:var(--gk-text-heading);text-decoration:underline;text-underline-offset:3px;justify-self:start}
button:disabled{cursor:wait;opacity:.5}
.action-stack{display:grid;gap:var(--gk-space-3)}
.options{display:grid;gap:var(--gk-space-2)}
.option{display:flex;justify-content:space-between;align-items:center;gap:var(--gk-space-4);width:100%;text-align:left;background:var(--gk-surface-white);border:1px solid var(--gk-border-field);border-radius:var(--gk-radius-control);padding:var(--gk-space-3) var(--gk-space-5)}
.option:hover{border-color:var(--gk-border-strong)}
.option.selected{border-color:var(--gk-border-strong);background:var(--gk-surface-liteblue)}
.arrow{color:var(--gk-text-muted)}

/* 結果・比較 */
.quote{background:var(--gk-surface-white);border:1px solid var(--gk-border-subtle);border-left:3px solid var(--gk-border-strong);border-radius:var(--gk-radius-tag);padding:var(--gk-space-3) var(--gk-space-4);display:grid;gap:var(--gk-space-1)}
.quote p{font-size:17px}
.quote small{color:var(--gk-text-muted);font-size:14px}
.quote.alt{border-left-color:var(--gk-lightblue)}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:var(--gk-space-3)}
.comparison.long{grid-template-columns:1fr}
.result-hero{background:var(--gk-surface-white);border:2px solid var(--gk-border-strong);border-radius:var(--gk-radius-control);padding:var(--gk-space-5);display:grid;gap:var(--gk-space-2)}
.result-hero p{font-size:18px}
details{background:var(--gk-surface-white);border:1px solid var(--gk-border-field);border-radius:var(--gk-radius-control);padding:var(--gk-space-3) var(--gk-space-5)}
details>summary{cursor:pointer;font-weight:700;color:var(--gk-text-heading)}
details[open]>summary{margin-bottom:var(--gk-space-3)}
details>*+*{margin-top:var(--gk-space-3)}
.tips,.tip{background:var(--gk-surface-gray);border-radius:var(--gk-radius-control);padding:var(--gk-space-4) var(--gk-space-5);display:grid;gap:var(--gk-space-2)}
.section-title{margin-top:var(--gk-space-2)}
.mini-pill{justify-self:start;font-size:13px;background:var(--gk-surface-gray);color:var(--gk-text-muted);padding:var(--gk-space-1) var(--gk-space-3);border-radius:var(--gk-radius-pill)}
.badge{font-size:12px;font-family:var(--gk-font-sans);font-weight:400;background:var(--gk-surface-gray);border-radius:var(--gk-radius-pill);padding:0 var(--gk-space-2);color:var(--gk-text-muted)}
.feedback{display:grid;gap:var(--gk-space-2)}
.feedback button{text-align:left;background:var(--gk-surface-white);border:1px solid var(--gk-border-field);border-radius:var(--gk-radius-control);padding:var(--gk-space-2) var(--gk-space-4)}
.feedback button.selected{border-color:var(--gk-border-strong);background:var(--gk-surface-liteblue)}
#feedback-status,#copy-status,#session-copy-status{font-size:13px;color:var(--gk-text-muted)}
.exit p{color:var(--gk-text-muted);font-size:15px}
.fork{display:grid;grid-template-columns:1fr 1fr;gap:var(--gk-space-4)}
.fork-option{display:grid;gap:var(--gk-space-3);align-content:start;background:var(--gk-surface-white);border:1px solid var(--gk-border-field);border-radius:var(--gk-radius-card);padding:var(--gk-space-4)}
.fork-main{background:var(--gk-surface-liteblue);border:2px solid var(--gk-border-strong)}
.fork-option h4{margin:0;font-size:16px;color:var(--gk-text-heading)}
.link-btn{text-decoration:none}
.video-thumb{position:relative;display:block;border:2px solid var(--gk-border-strong);border-radius:var(--gk-radius-card);overflow:hidden;background:var(--gk-surface-white)}
.video-thumb img{display:block;width:100%;height:auto}
.video-thumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:var(--gk-radius-pill);background:var(--gk-orange);color:var(--gk-text-on-dark);font-size:22px;padding-left:4px}
.video-thumb:hover .play{background:var(--gk-orange-strong)}
a.secondary.link-btn{display:block}
.share-text{background:var(--gk-surface-gray);border-radius:var(--gk-radius-control);padding:var(--gk-space-4);font-size:15px;white-space:pre-wrap;user-select:all}
.error{padding:var(--gk-space-4);background:var(--gk-thinorange);border-radius:var(--gk-radius-control);color:var(--gk-text)}

@media(max-width:720px){
 header{padding:var(--gk-space-4) var(--gk-gutter)}
 .brand-sub{display:none}
 .landing{margin-top:var(--gk-space-6)}
 .landing h1{font-size:26px}
 .intro{font-size:16px}
 .flow h2{font-size:21px}
 .card{padding:var(--gk-space-5) var(--gk-space-4)}
 .split,.comparison,.fork{grid-template-columns:1fr}
 .steps li{font-size:12px;padding:var(--gk-space-2) var(--gk-space-1)}
 .scene-facts div{grid-template-columns:1fr;gap:0}
 .start{max-width:none}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* あなたが言ったセリフ: 質問画面で一番目立たせる */
.scene-facts .phrase dd{font-family:var(--gk-font-serif);font-size:28px;font-weight:700;line-height:1.5;color:var(--gk-text-heading)}
.phrase-inline{font-family:var(--gk-font-serif);font-size:22px;font-weight:700;color:var(--gk-text-heading);line-height:1.5}
.phrase-inline .label{font-family:var(--gk-font-sans)}
@media(max-width:720px){.scene-facts .phrase dd{font-size:23px}.phrase-inline{font-size:19px}}
/* スマホ幅で語の途中の改行を防ぐ（auto-phrase 非対応のブラウザでも崩れにくいように個別に指定） */
.nw{display:inline-block}
.topline .text-btn{white-space:nowrap;flex-shrink:0}
.brand-name{white-space:nowrap}
header{flex-wrap:wrap;row-gap:var(--gk-space-2)}