*{box-sizing:border-box}html{height:100%}body{margin:0;height:100dvh;display:flex;flex-direction:column;background:#fff;color:#222b38;font:16px/1.6 system-ui,"Yu Gothic",sans-serif}button,input,textarea,select{font:inherit}a{color:inherit}
header{flex:none;min-height:52px;padding:clamp(8px,1.5dvh,16px) clamp(16px,2.5vw,36px);display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:0}h1{font-family:Roboto,"Noto Sans JP",system-ui,sans-serif;font-synthesis:none;font-size:23px;font-weight:650;letter-spacing:-.04em;margin:0}h1 a{text-decoration:none}.home-link{font-size:14px;text-decoration:none;color:#626c7a;white-space:nowrap}
main{flex:1;min-height:0;width:100%;max-width:1600px;margin:0 auto;padding:clamp(8px,1.8dvh,20px) clamp(16px,2.5vw,36px);display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:clamp(6px,1.4dvh,16px)}h2{font-size:18px;margin:0;font-weight:700}.intro{display:flex;align-items:baseline;gap:20px}.intro p{margin:0;color:#687384;font-size:14px}.workspace{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(12px,2vw,28px)}
.input-column{container-type:inline-size;min-width:0;min-height:0;display:flex;flex-direction:column;gap:clamp(6px,1.4dvh,16px)}.input-column>.details{flex:none}.editor{flex:1 1 0;min-width:0;min-height:0;border:1px solid #dfe2e8;border-radius:6px;display:flex;flex-direction:column;overflow:hidden}.toolbar{flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:clamp(6px,1dvh,12px) 16px;border-bottom:1px solid #e8eaf0;background:#f8f9fb}.toolbar label{font-weight:650}.toolbar>div{display:flex;flex-wrap:wrap;gap:6px}button{border:1px solid #dfe2e8;border-radius:5px;background:white;padding:5px 12px;font-size:14px;cursor:pointer;color:#394355;min-height:32px}button:hover{background:#f0edf9}.primary{background:#7158d6;border-color:#7158d6;color:white}.primary:hover{background:#6045c7}button:disabled{opacity:.45;cursor:default}
textarea{width:100%;height:0;min-height:0;flex:1 1 0;resize:none;border:0;outline:none;padding:clamp(8px,1.7dvh,22px) 20px;color:#222b38;background:white;line-height:1.9;overflow:auto}textarea:focus{box-shadow:inset 0 0 0 2px #a595e5}.draft-tools,.editor-footer{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;border-top:1px solid #eceef2;padding:clamp(4px,.8dvh,10px) 16px;color:#727b8b}.draft-tools{font-size:14px}.draft-tools label{display:flex;align-items:center;gap:6px}.draft-tools input{accent-color:#7158d6}#save-status{font-size:12px;overflow-wrap:anywhere}.editor-footer{justify-content:space-between;font-size:12px}.editor-footer strong{color:#4e3c9c;font-weight:650}
.summary{min-height:0;border:1px solid #e2dfed;border-radius:6px;display:flex;flex-direction:column;align-self:stretch}.total{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:clamp(6px,1.5dvh,20px) 20px;background:#f6f3ff;border-bottom:1px solid #e9e3f7;border-radius:5px 5px 0 0}.total h2{font-size:14px;color:#584888}.total p{margin:0;display:flex;align-items:baseline;gap:8px}.total output{font-size:clamp(28px,5dvh,52px);font-weight:750;line-height:1.25;color:#5e45bc;overflow-wrap:anywhere}.total span,.total small{font-size:12px;color:#786e95}.stats{flex:none;margin:0;padding:4px 20px}.stats>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:clamp(3px,.8dvh,10px) 0;border-bottom:1px solid #eff0f3}.stats>div:last-child{border-bottom:0}dt{font-size:14px;color:#677182}dd{margin:0;font-weight:650;font-variant-numeric:tabular-nums}.stats dd{white-space:nowrap}.stats dd span{font-size:12px;font-weight:400;margin-left:5px;color:#7c8592}
.target-section{flex:none;padding:clamp(6px,1dvh,12px) 20px;border-top:1px solid #e9eaf0}.target-result p{font-size:12px;margin:4px 0 0;color:#687384}.target-result #target-status{font-weight:650}summary{cursor:pointer;font-size:14px}.target>summary,.details>summary{font-weight:650}.target label{font-size:13px}.target-input{display:flex;gap:10px;align-items:center;margin-top:6px;font-size:14px}.target-input>span{flex-shrink:0;white-space:nowrap}.target input,.target select{min-width:0;width:100%;border:1px solid #dce0e7;border-radius:4px;padding:5px 8px;background:white;color:#394355;font-size:14px}.target select{display:block;margin-top:4px}.target p{font-size:12px;margin:4px 0 0;color:#687384}.target-presets{display:flex;gap:5px;margin:6px 0}.target-presets button{flex:1;padding:3px;min-width:0;min-height:28px}progress{width:100%;height:6px;display:block;margin-top:8px;accent-color:#7158d6}.over{color:#b53e4b!important}
.details{position:relative;min-width:0}.detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:6px 0 0;border:1px solid #e4e7ed;border-radius:6px}.detail-grid>div{min-width:0;overflow-wrap:anywhere;padding:clamp(5px,1dvh,14px) 18px;border-right:1px solid #e4e7ed;border-bottom:1px solid #e4e7ed}.detail-grid>div:nth-child(4n){border-right:0}.detail-grid>div:nth-last-child(-n+3){border-bottom:0}.detail-grid>div:last-child{grid-column:span 2;border-right:0}.detail-grid dd{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:clamp(18px,2.8dvh,25px);overflow-wrap:anywhere}.duration-part{display:inline-flex;align-items:baseline;gap:6px}.detail-grid small{font-size:14px;font-weight:400;color:#727b8b}.types{display:flex;flex-wrap:wrap;gap:4px 22px;margin:6px 0 0;color:#727b8b;font-size:12px}.types b{color:#465163;margin-left:8px;font-weight:600}.help{position:relative;border-top:1px solid #eceef2;padding-top:6px;color:#727b8b;font-size:13px}.help-content{position:absolute;bottom:calc(100% + 6px);left:0;right:0;max-height:min(440px,65dvh);overflow:auto;padding:8px 20px;background:#fff;border:1px solid #dfe2e8;border-radius:6px;box-shadow:0 6px 30px #222b3820;z-index:5}footer{flex:none;padding:0 clamp(16px,2.5vw,36px) 4px;color:#969daa;font-size:12px}input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid #8066db;outline-offset:2px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}[hidden]{display:none!important}
@media(max-height:820px) and (min-width:701px){.summary{display:grid;grid-template-columns:108px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}.total{padding:10px;border-bottom:0;border-right:1px solid #e9e3f7;border-radius:5px 0 0 0}.total p{flex-wrap:wrap;gap:0 4px}.total output{font-size:clamp(22px,4dvh,34px)}.stats{padding:6px 10px;align-self:center}.stats dt{font-size:12px}.stats dd{font-size:14px}.target-section,.exclude{grid-column:1/-1}}
@media(max-width:700px),(max-height:620px){.details .detail-content,.target .target-controls{position:static}.detail-grid>div{padding:8px 12px}.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-grid>div:nth-last-child(-n+3){border-bottom:1px solid #e4e7ed}.detail-grid>div:nth-child(2n),.detail-grid>div:last-child{border-right:0}.detail-grid>div:last-child{border-bottom:0}}
@media(max-width:700px){header{padding:8px 16px}h1{font-size:18px}.home-link{font-size:12px}main{padding:8px 16px;gap:8px}.intro{display:block}.intro h2{font-size:16px}.intro p{font-size:12px}.workspace{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:8px}.toolbar{padding:6px 10px}.toolbar label{font-size:14px}.toolbar button{padding:4px 8px}textarea{padding:8px 12px}.draft-tools,.editor-footer{padding:4px 10px;font-size:12px;gap:3px 8px}.draft-tools button{min-height:28px;font-size:12px}#save-status{width:100%}.summary{display:grid;grid-template-columns:minmax(90px,1fr) minmax(0,1.8fr)}.total{padding:6px 12px;border:0;border-right:1px solid #e9e3f7;border-radius:5px 0 0 0}.total output{font-size:30px}.total p{flex-wrap:wrap;gap:0 4px}.stats{padding:4px 10px}.stats>div{padding:2px 0}.stats dt{font-size:12px}.stats dd{font-size:14px}.target-section,.exclude{grid-column:1/-1}.target-section{padding:4px 12px}.help{padding-top:4px}.help summary{font-size:12px}}
@media(max-width:360px){.toolbar>div{gap:4px}.toolbar button{padding-inline:6px;font-size:12px}h1{font-size:16px}}
/* 大きな画面では横幅を保ち、入力欄を約4分の1の面積に抑える。 */
@media(min-width:1200px) and (min-height:821px){.editor{flex:none;align-self:stretch}textarea{flex:none;height:clamp(110px,13dvh,160px)}}
.stats>.metric-button,.stats>.stat-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:0;padding:clamp(3px,.8dvh,10px) 6px;border:0;border-bottom:1px solid #eff0f3;border-radius:0;background:transparent;text-align:left;line-height:1.6}
.stats>.metric-button:last-child,.stats>.stat-row:last-child{border-bottom:0}
.stat-label{font-size:14px;color:#677182}
.stat-value{font-size:16px;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-value .unit{font-size:12px;font-weight:400;margin-left:5px;color:#7c8592}
.stats>.metric-button:hover{background:#f7f8fa}
.metric-button[aria-pressed="true"] .stat-label,.metric-button[aria-pressed="true"] .stat-value{color:#222b38;font-weight:650}
@media(max-height:820px),(max-width:700px){.stat-label{font-size:12px}.stat-value{font-size:14px}.stats>.metric-button,.stats>.stat-row{padding-inline:4px}}
@media(max-width:700px){.stats>.metric-button,.stats>.stat-row{padding-block:2px}}
@media(max-width:360px){.summary{grid-template-columns:90px minmax(0,1fr)}.total{padding:6px 8px}.total output{font-size:24px}.stats{padding-inline:6px}.stats>.metric-button,.stats>.stat-row{gap:4px;padding-inline:3px}.stat-value{font-size:12px}}
@media(max-width:360px){.total small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(min-width:701px) and (min-height:821px){.summary{align-self:start}.total{flex:none;height:var(--main-count-height,auto)}}
.toolbar .history-button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;min-height:32px;padding:0;border:0;background:transparent;color:#657080}
.history-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.toolbar .history-button:hover:not(:disabled){background:#e9ebf0}
/* 入力欄は指定した高さを保ち、広げた分だけページ全体も縦に伸ばす。 */
#text-resize{display:none}
.resizable-editor main{min-height:min-content;grid-template-rows:auto minmax(min-content,1fr) auto}
.resizable-editor .workspace,.resizable-editor .input-column{min-height:min-content}
.resizable-editor .editor{flex:none}
.resizable-editor textarea{flex:none;min-height:80px;max-height:4000px}
.resizable-editor #text-resize{display:flex;flex:none;align-items:center;justify-content:center;height:16px;cursor:ns-resize;touch-action:none;background:#fff}
#text-resize::after{content:"";width:36px;height:4px;border-radius:2px;background:#c1c6d0}
#text-resize:hover,#text-resize:focus-visible{background:#f0edf9;outline:none}
#text-resize:hover::after,#text-resize:focus-visible::after{background:#8066db}
.resizing-text,.resizing-text *{cursor:ns-resize!important;user-select:none}
@media(max-width:700px){.resizable-editor .workspace{grid-template-rows:auto auto}}

.home-link { font-family: system-ui, "Yu Gothic", sans-serif; font-size: 13px; font-weight: 600; line-height: 20px; letter-spacing: normal; color: #111; }

/* Shared service-name typography; independent of installed fonts. */
@font-face{font-family:"Noabase Brand";src:url("/assets/shared/fonts/NotoSansJP-ui.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
header h1{font-family:"Noabase Brand",sans-serif;font-size:23px;font-weight:650;line-height:1.5;letter-spacing:-.04em;font-synthesis:none}
@media(max-width:650px){header h1{font-size:18px}}
.footer-notes{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 12px}#status:empty{display:none}

/* 「数えない文字」は集計と目標の間に挟む小さな段。文字の大きさと色は .stat-row に合わせる。 */
.exclude{flex:none;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;padding:clamp(3px,.8dvh,10px) 20px;border-top:1px solid #e9eaf0}
#exclude-title{width:100%;font-size:14px;color:#677182}
.exclude label{display:flex;align-items:center;gap:5px;font-size:13px;color:#465163;white-space:nowrap;cursor:pointer}
.exclude input{accent-color:#7158d6;margin:0}
#excluded-note{width:100%;font-size:12px;color:#7c8592}
/* 詳細の数値に添える注記。大きな数値と同じ行に並べ、超過のときは .over で赤くする。 */
.detail-note{font-size:13px;font-weight:400;color:#727b8b}
#sjis-note{width:100%}
.convert-tool{display:inline-flex;flex:0 1 300px;align-items:center;gap:6px;min-width:0;max-width:100%}.convert-tool select{flex:1;min-width:0;width:0}.convert-tool button{flex:none}
.draft-tools select{max-width:100%;min-height:32px;border:1px solid #dfe2e8;border-radius:5px;background:white;padding:4px 8px;font-size:14px;color:#394355}
@media(max-height:820px),(max-width:700px){#exclude-title{font-size:12px}.exclude label{font-size:12px}}
@media(max-width:700px){.exclude{padding:4px 12px}.convert-tool{flex:1 1 240px}.draft-tools select{min-height:28px;font-size:12px}}
@media(max-width:360px){.exclude{gap:2px 8px;padding-inline:8px}}
/* 上の3項目は大きく表示する項目を選ぶボタン。丸印で選べることと選んでいる項目を示し、選択中の行は大きな数字と同じ色の地にする。 */
.stats-hint{margin:0;padding:clamp(3px,.6dvh,8px) 6px 0;font-size:12px;line-height:1.5;color:#7c8592}
.metric-button .stat-label{display:inline-flex;align-items:center;gap:6px}
.metric-button .stat-label::before{content:"";flex:none;box-sizing:border-box;width:12px;height:12px;border:2px solid #aab1bd;border-radius:50%;background:#fff}
.metric-button[aria-pressed="true"] .stat-label::before{border:4px solid #7158d6}
.stats>.metric-button[aria-pressed="true"]{background:#f6f3ff}
.stats>.metric-button[aria-pressed="true"]:hover{background:#efeafc}
.stats>.metric-button:hover .stat-label::before{border-color:#8066db}
@media(max-width:700px){.stats-hint{padding:2px 4px 0;font-size:11px}}
@media(max-width:360px){.metric-button .stat-label{gap:4px}.metric-button .stat-label::before{width:10px;height:10px}.metric-button[aria-pressed="true"] .stat-label::before{border-width:3px}}
/* 目標文字数に使えない値を入れたときの理由。入力欄のすぐ下に出す。 */
.target .target-error{margin:4px 0 0;color:#b53e4b}
.target input[aria-invalid="true"]{border-color:#b53e4b}
/* スマホでは入力欄の上の帯に今の数を小さく出し、帯を画面の上に留める。入力欄が長くても、キーボードが出ていても数が見える。 */
#live-count{display:none}
@media(max-width:700px){
  .editor{overflow:hidden;overflow:clip}
  .toolbar{position:sticky;top:var(--visual-top,0px);z-index:3}
  #live-count{display:inline-flex;align-items:baseline;gap:3px;margin-right:auto;color:#786e95;font-size:12px;white-space:nowrap}
  #live-count b{font-size:16px;font-weight:750;color:#5e45bc;font-variant-numeric:tabular-nums}
  html{scroll-padding-top:52px}
  /* 狭い画面で数が長くボタンが次の行に回ったときも、ボタンは右に寄せたままにする。 */
  .toolbar>div{margin-left:auto}
}
/* 広い画面では1行が長くなりすぎないよう、約45字で折り返す。入力欄の枠と集計欄の位置は変えない。 */
@media(min-width:701px){textarea{padding-right:max(20px,calc(100% - 45em - 20px))}}

/* 詳細欄自身が狭ければ2列にする。画面全体が広くても左右2列の境目で文字が衝突しない。 */
@container(max-width:640px){
  .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-grid>div{padding:8px 12px}
  .detail-grid>div:nth-last-child(-n+3){border-bottom:1px solid #e4e7ed}
  .detail-grid>div:nth-child(2n),.detail-grid>div:last-child{border-right:0}
  .detail-grid>div:last-child{border-bottom:0}
}
/* 選択の補足は本文の下で必要なときだけ開く。計算対象の説明は詳細欄の中に置く。 */
.selection-help{max-width:100%}.selection-help>summary{font-size:inherit}.selection-help[open]{width:100%}
.selection-help p,.detail-hints p{margin:6px 0 0;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.detail-hints{color:#727b8b}
#target-state{margin-left:6px;color:#b53e4b;font-size:12px;font-weight:650}