/* 合格体験記を書く（story-edit.html）— 一覧の stories.css と同じスクラップブックの世界。
方眼紙の地・マスキングテープ・ポラロイド・紺の文字。入力欄は白地のまま（読みやすさ優先）。
cloud-ui.css は変えず、#story-edit-main の中だけ上書きする。 */
body[data-site-page="stories"]{margin:0;background:#fbf4e6;overflow-x:clip}
#story-edit-main.se{
--ink:#1f2d5c;--muted:#6b6258;--paper:#fbf4e6;--card:#fffdf8;--grid:rgba(176,140,104,.17);--line:#e7d9c5;
position:relative;isolation:isolate;max-width:none;margin:0;padding:40px max(24px,calc((100vw - 1200px)/2)) 64px;
display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);grid-template-areas:"left right" "foot foot";column-gap:48px;row-gap:28px;align-items:start;
color:#2b2622;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans CJK JP","Yu Gothic",Meiryo,sans-serif;
background-color:var(--paper);
background-image:url("scene/story-paper-grain.webp?v=20260925screens1"),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
background-size:256px 256px,12px 12px,12px 12px;min-height:calc(100vh - 88px)
}
#story-edit-main.se p{max-width:none}
#story-edit-main.se section{margin:0;padding:0;border:0}
#story-edit-main.se h1,#story-edit-main.se h2{color:var(--ink);font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans CJK JP","Yu Gothic",sans-serif;font-weight:800}
#story-edit-main.se :focus-visible{outline:3px solid #2c7ca3;outline-offset:2px}
/* 飾り（読み上げない） */
.se__deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.se-tape{position:absolute;display:block;width:110px;height:30px;opacity:.82;background:linear-gradient(90deg,rgb(255 255 255 / 22%) 0 6%,transparent 6% 94%,rgb(255 255 255 / 22%) 94%),var(--tape,#f4a9b4);box-shadow:0 1px 2px rgb(0 0 0 / 8%);-webkit-mask:linear-gradient(90deg,transparent 0 2px,#000 2px calc(100% - 2px),transparent calc(100% - 2px)),repeating-linear-gradient(0deg,#000 0 3px,#000c 3px 5px);-webkit-mask-composite:source-in;mask-composite:intersect;pointer-events:none;z-index:2}
.se-tape--pink{--tape:#f3a7b3}.se-tape--blue{--tape:#9ccbe8}.se-tape--mint{--tape:#a7dcc4}.se-tape--yellow{--tape:#f3dc86}
.se-tape--tl{left:12px;top:18px;transform:rotate(-12deg);width:130px}
.se-kraft{position:absolute;right:-30px;top:10px;width:190px;height:auto;transform:rotate(8deg);opacity:.95}
.se-clover{position:absolute;left:-10px;top:520px;width:70px;height:auto}
.se-pencil{position:absolute;right:12px;top:420px;width:46px;height:auto;transform:rotate(-6deg)}
/* 左：見出し・挿絵・自分の一覧 */
.se__left{grid-area:left;min-width:0;display:flex;flex-direction:column;gap:18px}
.se__hero{position:relative;min-height:392px}
.se__eyebrow{margin:0 0 6px;color:var(--ink)!important;font-weight:800;font-style:italic;font-size:var(--g-fs-body)}
#story-edit-main.se h1{margin:0 0 14px;font-size:var(--g-fs-hero);line-height:1.25;letter-spacing:0}
.se__marker{background:url("scene/story-marker-yellow.webp?v=20260925screens1") left 72%/100% 46% no-repeat;padding:0 4px}
.se__lead{margin:0;font-size:var(--g-fs-body);line-height:1.85;color:#3b352e;max-width:calc(100% - 200px)!important}
.se__art{position:absolute;right:-10px;top:96px;width:210px;height:250px}
.se__polaroid{position:absolute;right:28px;top:0;width:128px;height:auto;transform:rotate(7deg)}
.se__sticker{position:absolute;right:0;top:34px;width:196px;height:auto;filter:drop-shadow(0 8px 12px rgb(31 45 92 / 18%))}
.se__note{position:absolute;left:-46px;bottom:-4px;width:120px;margin:0;padding:12px 10px;background:#fdf3b6;color:var(--ink);font-size:var(--g-fs-small);font-weight:800;line-height:1.5;transform:rotate(-7deg);box-shadow:0 4px 10px rgb(0 0 0 / 10%);font-family:"Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif}
#story-edit-main.se .cloud-status{margin:0;min-height:0}
#story-edit-main.se .cloud-status:empty{display:none}
#story-edit-main.se .cloud-status:not(:empty){padding:12px 16px;border-radius:12px;background:#fff8e8;border:1px solid var(--line);font-weight:700}
#story-edit-main.se .cloud-status.is-error{background:#fff0ed;color:#9b2525}
#story-edit-main.se .cloud-status.is-success{background:#eef7ee;color:#246b3d}
.se__login{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0}
.se__login span{font-size:var(--g-fs-small);color:var(--muted);flex:1 1 200px}
/* ボタン（体験記の世界は紺の丸いボタン） */
#story-edit-main.se .cloud-button{min-height:48px;padding:10px 20px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-weight:800}
#story-edit-main.se .cloud-button:hover{background:#f3f5fb}
#story-edit-main.se .cloud-button.primary{border-color:var(--g-world-edge);background:var(--g-world-fill);background-color:var(--g-world);color:var(--g-world-ink);box-shadow:var(--g-world-shadow)} /* 区間11 D3: 外の世界の主ボタンは金（前は藍の地に白） */
#story-edit-main.se .cloud-button:disabled{background:#efebe4;border-color:#ddd3c6;color:#6b6258;box-shadow:none}
.se__mine{position:relative;padding:22px 22px 18px!important;background:var(--card);border:1px solid var(--line)!important;border-radius:6px;box-shadow:0 10px 24px rgb(80 60 30 / 10%)}
.se__mine .se-tape--blue{left:50%;top:-14px;transform:translateX(-50%) rotate(-3deg)}
#story-edit-main.se .cloud-section-heading{margin-bottom:10px}
#story-edit-main.se .cloud-section-heading h2{margin:0;font-size:var(--g-fs-title)}
#story-edit-main.se #stories-reload{min-height:40px;padding:6px 14px;font-size:var(--g-fs-small)}
#story-edit-main.se .cloud-list{gap:10px}
#story-edit-main.se #my-stories-list>p{margin:0;color:var(--muted)}
#story-edit-main.se .cloud-list-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"t a" "m a";column-gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-left-width:4px;border-left-color:var(--state-color,var(--line));border-radius:10px;background:#fff}
/* 状態を色つきの札に（D-4）。cloud-story-editor.js が data-state を1件ずつ付ける。 */
#story-edit-main.se .cloud-list-row[data-state="draft"]{--state-color:#3a72c4}
#story-edit-main.se .cloud-list-row[data-state="pending"]{--state-color:#b98a12}
#story-edit-main.se .cloud-list-row[data-state="published"]{--state-color:#2f8f4e}
#story-edit-main.se .cloud-list-row[data-state="rejected"]{--state-color:#c14b4b}
#story-edit-main.se .cloud-list-row[data-state="hidden"]{--state-color:#8b8579}
#story-edit-main.se .cloud-list-row h3{grid-area:t;margin:0;font-size:var(--g-fs-body);color:var(--ink);overflow-wrap:anywhere}
#story-edit-main.se .cloud-list-row p{grid-area:m;margin:2px 0 0;font-size:var(--g-fs-small)}
#story-edit-main.se .cloud-list-row .cloud-actions{grid-area:a;margin:0;gap:6px;justify-content:flex-end}
#story-edit-main.se .cloud-list-row .cloud-button{min-height:38px;padding:4px 14px;font-size:var(--g-fs-small)}
/* 右：罫線の便箋のフォーム */
.se__right{grid-area:right;min-width:0;display:flex;flex-direction:column;gap:20px}
/* 390px の「書く／見た目」タブ（D-6）。1280px では出さない。 */
.se__tabs{display:none}
.se__paper{position:relative;padding:34px 34px 26px!important;background-color:#fbfcff;background-image:linear-gradient(transparent 31px,#dfe6f3 32px);background-size:100% 32px;border:1px solid #e3e6ee!important;border-radius:4px;box-shadow:0 14px 30px rgb(40 50 90 / 12%)}
.se__paper::before{content:"";position:absolute;left:40px;top:0;bottom:0;width:1.5px;background:#f2b8c0}
.se-tape--paper{left:24px;top:-12px;transform:rotate(-8deg)}
.se__paper-title{display:table;margin:0 auto 6px!important;padding:6px 18px;background:#f5eee1;font-size:var(--g-fs-title)!important}
.se__paper-lead{margin:0 0 18px!important;text-align:center;color:var(--muted);font-size:var(--g-fs-small)}
#story-edit-main.se #story-editor-form{max-width:none;gap:16px;padding-left:18px}
#story-edit-main.se .cloud-field{font-weight:800;color:var(--ink)}
#story-edit-main.se .cloud-field input,#story-edit-main.se .cloud-field select,#story-edit-main.se .cloud-field textarea{min-height:48px;border:1.5px solid #d9cbbb;border-radius:10px;background:#fff;font-weight:400;color:#2b2622}
#story-edit-main.se .cloud-field input:focus,#story-edit-main.se .cloud-field textarea:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 4px rgb(31 45 92 / 12%)}
#story-edit-main.se #story-body{min-height:220px}
#story-edit-main.se .cloud-field small{font-weight:400;font-size:var(--g-fs-small)}
#story-edit-main.se .cloud-optional{background:#f7f1e6;border-color:#eadfcd;border-radius:10px}
#story-edit-main.se .cloud-optional summary{color:var(--ink)}
/* 2026-10-18 区間13 FIX: 押す所を 44px 以上に（「任意の項目を記入する」は高さ 27px、下の「クラウド機能のデータの扱い」は 20px だった。字の大きさ・色は同じ） */
#story-edit-main.se .cloud-optional summary{box-sizing:border-box;min-height:44px;padding-block:8px}
#story-edit-main.se .se__caution p>a[href="cloud-privacy.html"]:only-child{display:inline-flex;align-items:center;min-height:44px}
#story-edit-main.se #story-editor-form .cloud-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
#story-edit-main.se #story-save{order:2}
#story-edit-main.se #story-preview{order:1}
.se__paper-foot{margin:12px 0 0!important;text-align:center;font-size:var(--g-fs-small);color:var(--muted)}
/* プレビュー */
#story-edit-main.se .cloud-preview{margin:0;padding:24px 26px!important;background:#fff;border:1px solid var(--line)!important;border-top:4px solid var(--ink)!important;border-radius:6px;box-shadow:0 10px 24px rgb(80 60 30 / 10%)}
#story-edit-main.se .cloud-preview h2{margin:0 0 8px;font-size:var(--g-fs-title)}
#story-edit-main.se .cloud-preview .cloud-caution{margin:16px 0}
#story-edit-main.se .cloud-check{padding:12px 14px;border-radius:10px;background:#f7f1e6}
#story-edit-main.se #story-submit{width:100%}
.se__caution{grid-area:foot;max-width:none!important;margin:0!important;border-radius:8px;background:#fffaf0!important}
#story-edit-main.se .cloud-caution h2{font-size:var(--g-fs-body);margin:0 0 6px}
#story-edit-main.se .cloud-caution p{font-size:var(--g-fs-small);color:var(--muted);margin:0 0 6px}
/* 2026-10-18 区間11（P10）: 字はアプリの4段（40・22・17・14px）の変数に。13px は 14px に（14px より小さくしない）。
狭い幅：縦に積む（見出し → ログイン → 書く → 自分の一覧） */
@media(max-width:900px){
#story-edit-main.se{grid-template-columns:minmax(0,1fr);grid-template-areas:none;padding:24px 16px 48px;row-gap:20px}
.se__left{display:contents}
.se__left>*,.se__right,.se__caution{grid-area:auto}
.se__lead{max-width:none!important}
.se__hero{order:1;padding-right:132px;min-height:190px}
#story-edit-main.se h1{font-size:var(--g-fs-title)}
#editor-status{order:2}.se__login{order:3}.se__right{order:4}.se__mine{order:5}.se__caution{order:6}
.se__lead{font-size:var(--g-fs-small)}
.se__art{width:140px;height:190px;right:-8px;top:0}
.se__polaroid{width:80px;right:18px}
.se__sticker{width:124px;top:22px}
.se__note{display:none}
.se__paper{padding:28px 18px 20px!important}
.se__paper::before{left:14px}
#story-edit-main.se #story-editor-form{padding-left:6px}
#story-edit-main.se #story-editor-form .cloud-actions{grid-template-columns:1fr}
.se-kraft{width:120px;right:-40px}
.se-pencil,.se-clover{display:none}
#story-edit-main.se .cloud-list-row{grid-template-columns:minmax(0,1fr);grid-template-areas:"t" "m" "a"}
#story-edit-main.se .cloud-list-row .cloud-actions{justify-content:flex-start;margin-top:8px}
/* 「書く／見た目」タブ（D-6）。assets/story-edit-tabs.js が .se__right の data-tab を切り替える。
JS 未実行時（初期値）は「書く」だけが見える安全側にする。 */
.se__tabs{display:flex;gap:8px;margin:0 0 4px}
#story-edit-main.se .se__tab{flex:1;min-height:44px;padding:8px 10px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-weight:800;font-size:var(--g-fs-small);text-align:center}
#story-edit-main.se .se__tab[aria-selected="true"]{background:var(--ink);color:#fff}
#story-edit-main.se .se__tab[aria-disabled="true"]{opacity:.5}
.se__right #story-preview-panel{display:none}
.se__right[data-tab="preview"] #story-preview-panel:not([hidden]){display:block}
.se__right[data-tab="preview"] #se-write-panel{display:none}
}
/* 2026-10-18 区間10（Cowork）: 200% 拡大（187px）のようにとても狭い時は、右の絵の分（132px）を空けず、絵を見出しの下へ小さく置く。
空けたままだと文の幅が 30px ほどになり、「あなたの経験が、誰かの力になる。」が1字ずつの縦に折れていた。300px 以上（320・390・1280）は変えない */
@media(max-width:299.98px){
.se__hero{padding-right:0;min-height:0}
.se__art{position:relative;right:auto;top:auto;width:120px;height:150px;margin:8px 0 0 auto}
.se__polaroid{width:64px;right:12px}
.se__sticker{width:104px;top:12px}
}
@media(prefers-reduced-motion:reduce){#story-edit-main *{transition:none!important;animation:none!important}}