/* RECOA マイページ 試作 v0.1 — 紙のような白地 / 墨 / 橙は1系統だけ。角は 2px、影は使わない、線は 1px。 */
:root{
  --bg:#FFFEFB; --paper:#FFFFFF; --tile:#F3EEE4; --hair:#E6E1D8; --ink:#1F1614; --sub:#6B645C; --mute:#A39B90;
  --or:#FF4F00; --or-pale:#FFE9DD; --ok:#1E7A4C;
  --en:"Archivo",system-ui,sans-serif; --jp:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;
  --r:2px; --gut:clamp(16px,3vw,32px); --rail:232px;
  --t:.36s cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--jp);font-size:15px;line-height:1.7;font-feature-settings:"palt";min-height:100svh}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
b{font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}

/* 見出しの小文字(番号 + 英字)— 物差しの4サイトと同じ作り */
.eyebrow{display:block;font-family:var(--en);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.eyebrow::after{content:"";display:block;width:24px;height:1px;background:var(--ink);margin-top:8px}

/* ロゴ */
.brand{display:inline-flex;align-items:baseline;gap:8px}
.brand-mark{width:12px;height:12px;background:var(--or);align-self:center;border-radius:1px}
.brand-word{font-family:var(--en);font-weight:700;font-size:18px;letter-spacing:.04em}
.brand-sub{font-size:12px;color:var(--sub);letter-spacing:.08em}

/* ボタン — 四角・1px 線・押すと中の線が右へ抜ける */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--r);font-weight:700;font-size:14px;letter-spacing:.02em;overflow:hidden;transition:color var(--t),background var(--t),border-color var(--t)}
.btn span{position:relative;z-index:1}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#000}
.btn-line{border:1px solid var(--ink);background:transparent}
.btn-line:hover{background:var(--tile)}
.btn-or{background:var(--or);color:#fff}
.btn-or:hover{background:#E64700}
.btn::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:currentColor;opacity:.35;transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.btn:hover::after{transform:scaleX(1)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:default}

/* 入力 */
.fl{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--sub);margin:16px 0 6px}
.in{display:block;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--hair);border-radius:var(--r);background:var(--paper);transition:border-color var(--t)}
.in:focus{outline:0;border-color:var(--ink)}
textarea.in{resize:vertical;line-height:1.7}

/* ログイン */
.auth{min-height:100svh;display:grid;place-items:center;padding:var(--gut)}
.auth-box{width:min(440px,100%);}
.auth .brand{margin-bottom:40px}
.auth-h{font-size:clamp(22px,3.4vw,30px);font-weight:700;line-height:1.45;letter-spacing:.01em;text-wrap:balance;margin-bottom:24px}
.auth-f .btn{width:100%;margin-top:16px}
.auth-note,.auth-foot{font-size:12px;color:var(--sub);line-height:1.8}
.auth-note{margin-top:14px}
.auth-foot{margin-top:56px;font-family:var(--en);letter-spacing:.06em}
.auth-sent .sent-h{font-family:var(--en);font-weight:700;font-size:28px;letter-spacing:.02em}
.auth-sent .sent-p{margin:10px 0 24px;color:var(--sub);font-size:14px}
.auth-sent .btn{width:100%}

/* 器 */
.app{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100svh}
.rail{position:sticky;top:0;height:100svh;padding:28px 20px;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:28px;background:var(--bg)}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a,.tabs a{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:var(--r);font-weight:500;color:var(--sub);transition:color var(--t),background var(--t)}
.nav a:hover{color:var(--ink)}
.nav a.is-on{color:var(--ink);background:var(--tile);font-weight:700}
.nav a.is-on::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:var(--or)}
.nav-n{margin-left:auto;font-family:var(--en);font-weight:700;font-size:11px;background:var(--or);color:#fff;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;border-radius:10px;font-style:normal}
.rail-new{width:100%}
.rail-me{margin-top:auto;display:flex;flex-direction:column;gap:2px;font-size:13px}
.me-name{font-weight:700}
.me-site{color:var(--sub);font-family:var(--en);font-size:12px}
.me-out{margin-top:8px;color:var(--sub);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.main{padding:40px var(--gut) 80px;max-width:1120px;width:100%}
.tabs{display:none}

/* アイコン(線画・currentColor) */
.ic{width:18px;height:18px;display:inline-block;flex:none;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.ic-home{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11 12 4l8 7v9H4z'/><path d='M10 20v-6h4v6'/></svg>")}
.ic-list{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'><path d='M5 7h14M5 12h14M5 17h9'/></svg>")}
.ic-site{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'><rect x='3' y='5' width='18' height='14' rx='1'/><path d='M3 9h18M7 7h.01M10 7h.01'/></svg>")}
.ic-plus{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>")}
.ic-clip{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m20 11-8.5 8.5a5 5 0 0 1-7-7L13 4a3.3 3.3 0 0 1 4.7 4.7L9.5 17a1.7 1.7 0 0 1-2.4-2.4L15 7'/></svg>")}
.ic-file{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M6 3h8l4 4v14H6z'/><path d='M14 3v4h4'/></svg>")}
.ic-ext{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/></svg>")}
.ic-check{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m5 12 5 5 9-10'/></svg>")}
.ic-undo{--m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9 14 4 9l5-5'/><path d='M4 9h10a6 6 0 0 1 0 12h-3'/></svg>")}

/* 画面の見出し */
.view{animation:vin .5s var(--t) both}
@keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vh{margin-bottom:28px}
.vh-h{font-size:clamp(22px,2.6vw,30px);font-weight:700;letter-spacing:.01em;line-height:1.4;margin-top:14px;text-wrap:balance}
.back{display:inline-block;font-size:13px;color:var(--sub);margin-bottom:20px}
.back:hover{color:var(--ink)}

/* カード — 白い紙に 1px。影なし */
.card{background:var(--paper);border:1px solid var(--hair);border-radius:var(--r);padding:22px 22px 24px;display:flex;flex-direction:column;gap:12px}
.card-k{font-family:var(--en);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.home-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:16px}
.card-new{grid-column:1/-1}
.site-name{font-family:var(--en);font-weight:700;font-size:22px;letter-spacing:.01em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--hair);transition:text-decoration-color var(--t)}
.site-name:hover{text-decoration-color:var(--or)}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.kv div{display:flex;flex-direction:column;gap:2px}
.kv dt{font-size:11px;color:var(--sub);letter-spacing:.06em}
.kv dd{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.kv-col{grid-template-columns:1fr}
.kv-col div{flex-direction:row;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--hair)}
.kv-col div:last-child{border-bottom:0}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mute);margin-right:8px;vertical-align:1px}
.dot-ok{background:var(--ok)}
.now{display:flex;flex-direction:column}
.now li a{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--hair);transition:padding var(--t)}
.now li:last-child a{border-bottom:0}
.now li a:hover{padding-left:6px}
.now .no{font-family:var(--en);font-size:12px;color:var(--mute);font-weight:600}
.now .ttl{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.more{align-self:flex-end;font-size:13px;color:var(--sub)}
.more:hover{color:var(--ink)}

/* 状態の札 — 色は状態を分けるためだけ。橙は「あなたの番」だけ */
.st{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid var(--hair);border-radius:var(--r);font-size:12px;font-weight:700;white-space:nowrap;background:var(--paper)}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mute)}
.st-受付::before{background:var(--mute)}
.st-対応中::before{background:var(--ink)}
.st-確認待ち{border-color:var(--or);color:var(--or);background:var(--or-pale)}
.st-確認待ち::before{background:var(--or);animation:blink 1.6s ease-in-out infinite}
.st-検討中::before{background:#C9A227}
.st-反映済み::before{background:var(--ok)}
.st-見送り{color:var(--sub)}
@keyframes blink{50%{opacity:.25}}

/* ひな形のタイル */
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kinds li a,.kinds li button{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;padding:14px 16px;border:1px solid var(--hair);border-radius:var(--r);background:var(--paper);min-height:44px;transition:border-color var(--t),transform var(--t)}
.kinds li a:hover,.kinds li button:hover{border-color:var(--ink);transform:translateY(-2px)}
.kinds .k-n{font-weight:700}
.kinds .k-h{font-size:12px;color:var(--sub);line-height:1.6}
.kinds-big{grid-template-columns:repeat(2,1fr);gap:12px}
.kinds-big li button{padding:20px 20px 22px;gap:6px}
.kinds-big .k-n{font-size:17px}
.kinds li button.is-pick{border-color:var(--or);background:var(--or-pale)}

/* 一覧 */
.filters{display:flex;gap:6px;flex-wrap:wrap;margin-top:18px}
.filters button{min-height:36px;padding:0 12px;border:1px solid var(--hair);border-radius:var(--r);font-size:13px;font-weight:500;background:var(--paper);transition:all var(--t)}
.filters button:hover{border-color:var(--ink)}
.filters button.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}
.filters .n{font-family:var(--en);font-size:11px;margin-left:6px;opacity:.7}
.rows{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.rows li{animation:rin .45s var(--t) both;animation-delay:calc(var(--i,0)*40ms)}
@keyframes rin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.rows a{display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:center;padding:16px 4px;border-bottom:1px solid var(--hair);transition:background var(--t)}
.rows a:hover{background:var(--paper)}
.rows .no{font-family:var(--en);font-weight:600;font-size:13px;color:var(--mute)}
.rows .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.rows .ttl{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows .sub{font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.empty{padding:40px 0;color:var(--sub);text-align:center}

/* 詳細 */
.vh-req .vh-h{font-size:clamp(20px,2.2vw,26px)}
.req-meta{font-size:13px;color:var(--sub);margin-top:8px;font-variant-numeric:tabular-nums}
.steps{display:grid;grid-template-columns:repeat(4,1fr);margin:0 0 28px;counter-reset:s}
.steps li{position:relative;padding:14px 0 0;font-size:12px;color:var(--mute);font-weight:500}
.steps li::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--hair)}
.steps li::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.steps li.is-done::after,.steps li.is-now::after{transform:scaleX(1)}
.steps li.is-done{color:var(--sub)}
.steps li.is-now{color:var(--ink);font-weight:700}
.steps li.is-now.is-you{color:var(--or)}
.steps li.is-now.is-you::after{background:var(--or)}
.steps li.is-off{color:var(--mute)}
.steps li.is-off::after{background:var(--mute);transform:scaleX(1)}
.steps li.is-wait::after{transform:scaleX(0)!important;transition:none}
.steps li:nth-child(1)::after{transition-delay:0s}.steps li:nth-child(2)::after{transition-delay:.15s}.steps li:nth-child(3)::after{transition-delay:.3s}.steps li:nth-child(4)::after{transition-delay:.45s}
.steps time{display:block;font-family:var(--en);font-size:11px;font-weight:500;margin-top:2px}
.req-grid{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.req-main{display:flex;flex-direction:column;gap:12px}
.msg{border:1px solid var(--hair);border-radius:var(--r);background:var(--paper);padding:16px 18px 18px;animation:rin .45s var(--t) both}
.msg header{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:8px}
.msg header b{font-size:13px}
.msg header time{font-family:var(--en);font-size:11px;color:var(--mute);font-weight:500}
.msg p{white-space:pre-wrap;font-size:14px}
.msg-me{background:var(--tile);border-color:transparent}
.msg-shou{border-left:3px solid var(--ink)}
.msg-sys{background:transparent;border-style:dashed;color:var(--sub)}
.msg-sys p{font-size:13px}
.msg a{color:var(--or);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.files{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.files li{display:inline-flex;align-items:center;gap:6px;font-family:var(--en);font-size:12px;font-weight:500;padding:4px 10px;border:1px solid var(--hair);border-radius:var(--r);background:var(--paper)}
.files:empty{display:none}
.reply{margin-top:8px}
.reply-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.attach{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--sub);cursor:pointer;min-height:44px}
.attach:hover{color:var(--ink)}

/* 右側 — 確認用と反映 */
.side{border:1px solid var(--hair);border-radius:var(--r);background:var(--paper);padding:18px 18px 20px;display:flex;flex-direction:column;gap:12px;position:sticky;top:24px}
.side.is-you{border-color:var(--or)}
.side-k{font-family:var(--en);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.side-h{font-weight:700;font-size:16px;line-height:1.5}
.side p{font-size:13px;color:var(--sub)}
.side .files{margin-top:0}
.side .btn{width:100%}
.pv-frame{display:block;aspect-ratio:16/10;max-height:200px;border:1px solid var(--hair);border-radius:var(--r);background:var(--tile);position:relative;overflow:hidden}
.pv-frame::before{content:"";position:absolute;inset:0;background:
  linear-gradient(var(--hair),var(--hair)) 12% 14%/40% 6px no-repeat,
  linear-gradient(var(--hair),var(--hair)) 12% 26%/76% 4px no-repeat,
  linear-gradient(var(--hair),var(--hair)) 12% 34%/60% 4px no-repeat,
  linear-gradient(var(--paper),var(--paper)) 12% 62%/76% 30% no-repeat;opacity:.9}
.pv-frame::after{content:"確認用のページを開く";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;font-weight:700;background:var(--ink);color:#fff;padding:6px 12px;border-radius:var(--r);opacity:0;transition:opacity var(--t)}
.pv-frame:hover::after{opacity:1}
.side-done{display:flex;align-items:center;gap:8px;color:var(--ok);font-weight:700}
.side-done .ic{width:16px;height:16px}
.confirm{display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--or-pale);border-radius:var(--r);font-size:13px}
.confirm .row{display:flex;gap:8px}
.confirm .row .btn{flex:1;min-height:40px}

/* 依頼を出す */
.wiz{display:flex;gap:0;margin:0 0 24px;border-bottom:1px solid var(--hair)}
.wiz-s{display:flex;align-items:center;gap:8px;padding:0 18px 12px 0;margin-right:18px;font-size:13px;font-weight:500;color:var(--mute);position:relative}
.wiz-s::after{content:"";position:absolute;left:0;right:18px;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.wiz-s.is-on{color:var(--ink);font-weight:700}
.wiz-s.is-on::after,.wiz-s.is-done::after{transform:scaleX(1)}
.wiz-s.is-done{color:var(--sub)}
.wiz-n{font-family:var(--en);font-weight:700;font-size:11px;width:20px;height:20px;border:1px solid currentColor;border-radius:50%;display:inline-grid;place-items:center}
.pane{border:0;display:none}
.pane.is-on{display:block;animation:vin .45s var(--t) both}
.pane-h{font-weight:700;font-size:16px;margin-bottom:12px}
.pages{display:flex;flex-wrap:wrap;gap:8px}
.pages button,.pages li span{min-height:40px;padding:0 14px;border:1px solid var(--hair);border-radius:var(--r);background:var(--paper);font-size:14px;font-weight:500;display:inline-flex;align-items:center;transition:all var(--t)}
.pages button:hover{border-color:var(--ink)}
.pages button.is-pick{background:var(--ink);color:#fff;border-color:var(--ink)}
.pane-nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px}
.ask{font-size:12px;color:var(--sub);margin:-2px 0 8px}
.ask b{color:var(--ink);font-weight:500;border-bottom:1px solid var(--hair);margin-right:8px}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:96px;border:1px dashed var(--mute);border-radius:var(--r);background:var(--paper);cursor:pointer;text-align:center;padding:12px;transition:all var(--t)}
.drop:hover,.drop.is-over{border-color:var(--ink);background:var(--tile)}
.drop span{font-weight:500;font-size:14px}
.drop small{font-size:11px;color:var(--sub)}
.new-note{font-size:12px;color:var(--sub);margin-top:16px;line-height:1.8}

/* サイト */
.site-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card-wide{grid-column:1/-1}
.pages-ro li span{background:var(--tile);border-color:transparent}
.hist li{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:14px}
.hist li:last-child{border-bottom:0}
.hist time{font-family:var(--en);font-size:12px;color:var(--sub);font-weight:500}
.hist-note{font-size:12px;color:var(--sub)}

/* 通知(押した結果だけ) */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(8px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r);font-size:13px;font-weight:500;opacity:0;transition:all var(--t);z-index:20;max-width:calc(100% - 32px)}
.toast.is-on{opacity:1;transform:translateX(-50%)}

/* タブレット */
@media (max-width:1023px){
  :root{--rail:200px}
  .home-grid{grid-template-columns:1fr}
  .req-grid{grid-template-columns:1fr}
  .side{position:static}
  .req-side{order:-1}
  .kinds{grid-template-columns:repeat(2,1fr)}
}
/* スマホ */
@media (max-width:767px){
  body{font-size:14px}
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .main{padding:20px var(--gut) 96px}
  .tabs{display:grid;grid-template-columns:1fr 1fr 1.3fr 1fr;position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--hair);padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));z-index:10}
  .tabs a{flex-direction:column;gap:3px;font-size:10px;padding:4px 0;min-height:52px;justify-content:center}
  .tabs a.is-on{color:var(--ink);font-weight:700}
  .tabs a.is-on::before{content:"";position:absolute;top:-7px;left:20%;right:20%;height:2px;background:var(--or)}
  .tabs-new{background:var(--ink);color:#fff!important;border-radius:var(--r)}
  .kinds,.kinds-big,.site-grid{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr 1fr}
  .steps li{font-size:11px}
  .steps time{display:none}
  .rows a{grid-template-columns:1fr auto;gap:8px}
  .rows .no{display:none}
  .rows .ttl{white-space:normal}
  .hist li{grid-template-columns:1fr}
  .wiz-s{font-size:12px;margin-right:8px;padding-right:8px}
  .wiz-s::after{right:8px}
  .reply-row{flex-wrap:wrap}
  .reply-row .btn{flex:1}
  .pane-nav .btn{flex:1}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* [webmy0930] 本物の API 版で足した分 */
.form-err{margin:10px 0 0;font-size:13px;color:#B3261E;font-weight:500}
.auth-note a{color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.auth-note a:hover{color:var(--ink)}
.kinds li button.k-other{border-style:dashed}
.pages button.pg-other{border-style:dashed}
.pv-auth{font-size:12px;color:var(--sub);font-family:var(--en)}
.loading{opacity:.55;pointer-events:none}
.dot-wait{background:#C9A227}
.files li a{color:inherit}
.hist .rv{color:var(--sub);font-size:12px;margin-left:8px}