:root{
    /* 出力画像の色 */
    --paper:#f2ece1;
    --paper-dim:#e2dac9;
    --ink:#15131c;
    --blue:#1a7ff0;
    --muted:#8a836e;
    /* 操作画面の色 */
    --ui-bg:#15131c;
    --ui-card:#211f2c;
    --ui-line:#38354a;
    --ui-text:#f1ede1;
    --ui-mut:#a29c8c;
    --teal:#3e7c74;
    --stamp:#c1442d;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(circle, rgba(241,237,225,0.05) 1px, transparent 1px) 0 0/16px 16px,
      var(--ui-bg);
    color:var(--ui-text);
    font-family:'Zen Kaku Gothic New', sans-serif;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:32px 16px 64px;
  }
  header{max-width:640px;text-align:center;margin-bottom:24px;}
  h1{font-weight:900;font-size:clamp(28px,6vw,40px);letter-spacing:0.02em;margin:0 0 8px;}
  h1 span{color:var(--stamp);display:inline-block;}
  header p{color:var(--ui-mut);font-size:14px;line-height:1.7;margin:0;}
  main{width:100%;max-width:560px;}

  /* 使い方。常に開いていると邪魔なので折りたたみ（details なので JS は不要） */
  .howto{
    background:var(--ui-card);
    border:1px solid var(--ui-line);
    border-radius:10px;
    margin-bottom:14px;
    font-size:13px;
  }
  .howto summary{
    padding:11px 14px;
    cursor:pointer;
    color:var(--ui-text);
    font-weight:700;
    list-style:none;
  }
  .howto summary::-webkit-details-marker{display:none;}
  .howto summary::before{content:'▸ ';color:var(--teal);}
  .howto[open] summary::before{content:'▾ ';}
  .howto ol{margin:0;padding:0 16px 6px 34px;color:var(--ui-mut);line-height:1.9;}
  /* ※ は続きものなので行送りだけで並べ、下の余白は最後の1行だけが持つ */
  .howto .note{margin:0;padding:0 16px;color:var(--ui-mut);line-height:1.7;}
  .howto .note:last-child{padding-bottom:12px;}
  .howto b{color:var(--ui-text);}

  /* 組のカード。上のタブで切り替わる中身（写真・レイアウト・メモ）を
     まとめて囲う。この枠の中だけが組で入れ替わり、外にあるもの（投稿者）は動かない。
     紙色は出力画像そのものにだけ使う。台紙まで紙色にすると書き出し範囲が分からなくなる */
  .panel-frame{
    background:var(--ui-card);
    border:1px solid var(--ui-line);
    border-radius:10px;
    /* 下だけ広いのは、いちばん下に来る「レイアウト」のボタンが、カードの縁に
       近すぎて詰まって見えるため。中の区切り（見出しの上下）が18pxなので、それに揃える */
    padding:12px 12px 18px;
    box-shadow:0 20px 40px -12px rgba(0,0,0,0.6);
  }
  /* プレビューは出力比そのままの台紙。中身は canvas と同じ数値を % にして置くので、
     見たままが出力される（余白の出方も含めて一致する）。
     台紙は上のバーと同じ青。紙はこの上に角丸のカード（.card）として載る */
  .grid{
    position:relative;
    aspect-ratio:1/1;
    background:var(--blue);
    overflow:hidden;
    border-radius:2px;
    box-shadow:0 2px 12px rgba(0,0,0,0.45);
    container-type:inline-size; /* 文字サイズを cqw で出力と同じ比率にする */
  }

  /* 上のバー: 左＝投稿者 / 右＝ハッシュタグ */
  /* 上のバー。背景は敷かない（台紙の青がそのまま出る）。
     敷いてしまうと、字を下にずらしたときに青い矩形ごと動いて紙のカードを覆ってしまう */
  .topbar{
    position:absolute;left:0;right:0;top:0;
    color:#fff;
    display:flex;align-items:center;
    white-space:nowrap;
  }
  .topbar .nm{font-weight:700;}
  .topbar .id{opacity:0.8;}
  .topbar .hash{font-weight:900;margin-left:auto;letter-spacing:0.12em;}
  .topbar img{border-radius:50%;object-fit:cover;flex:none;}
  .topbar .blank-av{flex:none;line-height:0;}
  .topbar .blank-av svg{width:100%;height:100%;display:block;}

  .cell{
    position:absolute;
    background:var(--paper-dim);
    overflow:hidden;
    cursor:pointer;
  }
  .cell:not(.has-img){outline:1px dashed rgba(21,19,28,0.28);outline-offset:-1px;}
  .topbar img{-webkit-user-drag:none;user-select:none;}
  .cell .plus{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:4px;
    color:var(--ink);opacity:0.5;font-size:12px;
  }
  .cell .plus b{font-size:24px;font-weight:400;line-height:1;}
  /* 何枚目の枠かは左上に小さく、数字だけ。＋ と同じ列に「1枚目」と積んでいたときは、
     枠の真ん中に3行も字が並んで、肝心の「タップして追加」まで読みにくくなっていた。
     隅に出しておけば、順番を知りたいときだけ目をやれば済む。
     「枚目」を落とすのは、4つ並んだ数字が互いに何なのかを説明してしまうため
     （読み上げ用に title には「◯枚目」を入れている） */
  .cell .plus .n{
    position:absolute;top:5px;left:7px;
    font-size:12px;line-height:1;opacity:0.75;
  }
  .cell.has-img .plus{display:none;}
  .cell.dragover{outline:3px dashed var(--blue);outline-offset:-3px;}

  /* セルの操作ボタン。プレビューだけのもので、出力画像には出ない */
  .cell-btn{
    position:absolute;z-index:3;
    width:26px;height:26px;padding:0;
    display:flex;align-items:center;justify-content:center;
    border:none;border-radius:50%;
    background:rgba(21,19,28,0.62);
    color:#f1ede1;
    font-size:13px;line-height:1;
    cursor:pointer;
  }
  .cell-btn:hover{background:rgba(21,19,28,0.85);}
  .cell-btn.del{top:5px;right:5px;}
  .cell-btn.crop{bottom:5px;right:5px;}
  /* 写真の入れ方は左下。右下のトリミングの隣に並べないのは、「全体を見せる」に
     すると隣のトリミングが消えて、押したボタンそのものが動いて見えるため。
     左下なら、切り替えても押した場所に居続ける */
  .cell-btn.fit{bottom:5px;left:5px;}
  .cell-btn.crop svg{width:15px;height:15px;fill:currentColor;display:block;}
  /* 入れ方の矢印は塗りではなく線で描くので、色は svg の stroke に付けてある */
  .cell-btn.fit svg{width:15px;height:15px;display:block;}

  /* トリミング用のオーバーレイ。写真の全体を見せ、切り取る枠を動かして決める。
     暗くするのは写真の上だけ。枠の外に敷く影が画面全体に広がらないよう、
     台紙を写真とぴったり同じ大きさにして overflow:hidden で切る */
  .crop-stage{position:relative;line-height:0;overflow:hidden;}
  .crop-stage img{
    display:block;max-width:min(92vw,540px);max-height:58vh;width:auto;height:auto;
    -webkit-user-drag:none;user-select:none;
  }
  .crop-frame{
    position:absolute;
    box-shadow:0 0 0 9999px rgba(10,9,14,0.72);
    cursor:grab;touch-action:none;
  }
  .crop-frame:active{cursor:grabbing;}
  /* アイコンは出力で円に切り抜くので、枠も円で見せる（角の印は円の外に浮くので消す） */
  .crop-frame.round{border-radius:50%;}
  .crop-frame.round i{display:none;}
  .crop-frame i{position:absolute;width:18px;height:18px;border:3px solid #fff;}
  .crop-frame i.tl{left:0;top:0;border-right:0;border-bottom:0;}
  .crop-frame i.tr{right:0;top:0;border-left:0;border-bottom:0;}
  .crop-frame i.bl{left:0;bottom:0;border-right:0;border-top:0;}
  .crop-frame i.br{right:0;bottom:0;border-left:0;border-top:0;}
  .crop-zoom{display:flex;align-items:center;gap:10px;margin-top:14px;width:min(92vw,540px);}
  .crop-zoom label{color:var(--ui-mut);font-size:12px;flex:none;}
  .crop-zoom input[type=range]{flex:1;accent-color:var(--teal);}
  .crop-frame u{position:absolute;background:rgba(255,255,255,0.32);}
  .crop-frame u.v{top:0;bottom:0;width:1px;}
  .crop-frame u.h{left:0;right:0;height:1px;}
  .crop-hint{color:var(--ui-text);font-size:12px;margin:16px 0 0;text-align:center;}
  .overlay-actions button.primary{background:var(--teal);color:#f1ede1;border-color:transparent;}

  /* 調整用のスライダー（?lab のときだけ作られる）。出力には出ない。
     プレビューの真下に流し込むので、どの画面幅でも紙に被らない */
  .lab{
    margin-top:10px;
    background:var(--ui-card);border:1px solid var(--ui-line);border-radius:10px;
    padding:12px;font-size:12px;line-height:1.5;
  }
  .lab b{display:block;margin-bottom:8px;}
  .lab .lab-warn{
    margin:0 0 10px;padding:7px 9px;border-radius:6px;
    background:rgba(193,68,45,0.14);border:1px solid rgba(193,68,45,0.5);
    color:#f0a08c;font-size:11px;line-height:1.6;
  }
  .lab .lab-warn b{display:inline;margin:0;color:#f0a08c;}
  .lab label{display:grid;grid-template-columns:76px 1fr 30px 20px;align-items:center;gap:7px;margin-bottom:5px;}
  .lab input[type=range]{width:100%;accent-color:var(--teal);}
  .lab output{text-align:right;color:var(--ui-mut);font-variant-numeric:tabular-nums;}
  /* 既定から動かした行だけ目立たせる。何を触ったか一目で分かるように */
  .lab label.moved span{color:var(--teal);font-weight:700;}
  .lab label.moved output{color:var(--ui-text);}
  /* 行ごとの戻し。動かしていない行では出さない（押しても何も起きないため） */
  .lab .undo{
    padding:0;width:20px;height:20px;border:0;border-radius:50%;
    background:transparent;color:var(--ui-mut);font-size:12px;line-height:1;cursor:pointer;visibility:hidden;
  }
  .lab label.moved .undo{visibility:visible;}
  .lab .undo:hover{background:var(--ui-bg);color:var(--ui-text);}
  .lab p{margin:9px 0 8px;color:var(--ui-mut);font-size:11px;line-height:1.7;}
  .lab p em{color:#f0a08c;font-style:normal;}
  .lab code{display:block;margin-top:5px;color:var(--ui-text);word-break:break-all;}
  .lab button{
    background:transparent;color:var(--ui-text);border:1px solid #4a4660;border-radius:14px;
    padding:5px 12px;font-family:inherit;font-size:11px;cursor:pointer;
  }
  .lab-foot{display:flex;align-items:center;gap:8px;}
  .lab-foot small{color:var(--ui-mut);font-size:10px;margin-left:auto;}

  /* 紙。台紙（青）の上に角丸のカードとして載せる。中身はすべてこの上に乗る */
  .card{position:absolute;background:var(--paper);}
  /* ミシン目。破線ではなく穴の列。カードの幅ぶんだけ引く */
  .perf{
    position:absolute;
    background-image:radial-gradient(circle closest-side, var(--blue) 96%, transparent);
    background-repeat:repeat-x;
  }
  /* 切り欠き。台紙と同じ青で塗るので、紙が丸く抜けて見える */
  .notch{position:absolute;border-radius:50%;background:var(--blue);}
  /* 押印が振れて動きうる範囲。?lab のときだけ出るデバッグ表示で、出力には出ない */
  .stamp-area{
    position:absolute;pointer-events:none;
    border:1px dashed var(--stamp);background:rgba(193,68,45,0.10);
  }
  .stamp-area::after{
    content:'押印の可動域';
    position:absolute;left:0;bottom:100%;
    color:var(--stamp);font-size:10px;white-space:nowrap;
  }
  /* 本文（左詰め・確保した矩形ちょうど） */
  .band{position:absolute;color:var(--ink);text-align:left;overflow:hidden;}
  .band div{white-space:pre;}

  .inputs{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
  .who-row{display:flex;align-items:center;gap:8px;}
  .inputs input[type=text],.inputs input[type=date],.inputs textarea{
    flex:1;min-width:0;width:100%;
    border:1px solid var(--ui-line);
    border-radius:6px;
    background:var(--ui-bg);
    color:var(--ui-text);
    font-family:'Zen Kaku Gothic New',sans-serif;
    font-size:13px;line-height:1.6;
    padding:8px;
  }
  /* 幅は「全角30文字ぶん」に JS で合わせる（TEXT_COLS）。スクロールバーの出入りで
     折り返し位置が動かないよう、出ていなくても場所は空けておく */
  .inputs textarea{resize:vertical;scrollbar-gutter:stable;align-self:center;}
  .inputs input:focus,.inputs textarea:focus{outline:none;border-color:var(--teal);}
  .inputs ::placeholder{color:var(--ui-mut);}
  /* アイコン選択。人型と＋の記号で「顔写真を入れる場所」だと分かるようにする */
  .avatar-btn{
    position:relative;flex:none;
    width:40px;height:40px;border-radius:50%;
    border:1px dashed #4a4660;
    background:var(--ui-bg) center/cover no-repeat;
    color:var(--ui-mut);cursor:pointer;padding:0;
  }
  .avatar-btn svg{width:22px;height:22px;fill:currentColor;display:block;margin:auto;}
  .avatar-btn::after{
    content:'＋';
    position:absolute;right:-3px;bottom:-3px;
    width:17px;height:17px;border-radius:50%;
    background:var(--teal);color:#f1ede1;
    font-size:11px;line-height:17px;text-align:center;
  }
  .avatar-btn.has-img{border-style:solid;border-color:var(--teal);}
  .avatar-btn.has-img svg{display:none;}
  /* 記号だけでは「押せる」と伝わらないので、言葉でも添える */
  .avatar-field{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px;}
  .avatar-field small{font-size:10px;line-height:1;color:var(--ui-mut);}

  /* ＠は入力欄の外に出して、打たなくてよいことを見せる */
  .id-field{
    flex:1;min-width:0;display:flex;align-items:center;
    border:1px solid var(--ui-line);border-radius:6px;background:var(--ui-bg);
  }
  .id-field span{color:var(--ui-mut);font-size:13px;padding:0 2px 0 9px;}
  .id-field input{border:none !important;background:transparent;padding-left:2px;}
  .id-field:focus-within{border-color:var(--teal);}
  .id-field.bad{border-color:var(--stamp);}
  .field-error{
    margin:-2px 0 0;text-align:right;
    color:#f0a08c;font-size:12px;line-height:1.6;
  }
  /* 誤りが無いときは中身が空。高さは0でも、縦に並べる間隔（gap）は空のぶんも
     空くので、名前の欄と「消す」の間だけ間が広く見える。空のときは畳んでおく */
  .field-error:empty{display:none;}
  /* カウンタはメモ欄と同じ幅・同じ位置に置く（幅は JS で入る）。右端を揃えると
     メモ欄の右下に付いて見える */
  .counter{align-self:center;width:100%;text-align:right;font-size:11px;color:var(--ui-mut);margin-top:-4px;}
  .counter.over{color:var(--stamp);}
  /* :not([hidden]) が要る。class で display を指定すると hidden が効かなくなるため
     （覚えているものが無いときは JS で hidden にして消す） */
  .forget-btn:not([hidden]){
    display:block;margin:2px 0 0 auto;padding:0;border:0;background:none;
    color:var(--ui-mut);font:inherit;font-size:11px;text-decoration:underline;cursor:pointer;
  }

  .controls{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
  .layout-btn{
    display:flex;flex-direction:column;align-items:center;gap:5px;
    padding:10px 12px !important;line-height:1;
  }
  .layout-btn svg{fill:currentColor;display:block;}
  .layout-btn small{font-size:11px;opacity:0.8;}
  .layout-btn{
    background:var(--ui-card);color:var(--ui-text);
    border:1px solid var(--ui-line);border-radius:20px;
    padding:8px 16px;
    font-family:'Zen Kaku Gothic New',sans-serif;font-size:13px;cursor:pointer;
  }
  .layout-btn.active{
    background:var(--teal);border-color:var(--teal);color:#f1ede1;
  }
  /* 対応形式。折りたたまずに出すぶん、写真の枠に添う控えめな一行にする */
  .formats{
    text-align:center;color:var(--ui-mut);
    font-size:12px;line-height:1.6;margin:8px 0 0;
  }
  .controls-label{
    text-align:center;color:var(--ui-mut);
    font-size:11px;letter-spacing:0.08em;margin:18px 0 -4px;
  }
  /* 投稿者はカードの外（上）。組を変えても動かないものだと、位置で示す */
  .who-block{margin:0 0 14px;}
  /* 組のタブ。カードの上端に接続し、選ばれているものだけカードと地続きに見せる。
     レイアウト（丸いピル）と同じ形にしないのは、あちらが「この組の設定を
     選ぶ」もので、こちらは「編集する対象を切り替える」ものだから。同じ形だと
     [1枚目][2枚目] と レイアウトの [1枚][2枚] を取り違える */
  .sheet-tabs{
    display:flex;gap:4px;padding:0 10px;
    margin-bottom:-1px;            /* カードの上の枠線に、タブの下の枠線を重ねる */
    position:relative;z-index:1;   /* 重ねたところをタブ側が上書きできるように */
  }
  .sheet-tab{
    display:flex;align-items:stretch;padding:0;
    border:1px solid var(--ui-line);border-radius:8px 8px 0 0;
    background:var(--ui-bg);color:var(--ui-mut);
    font-family:'Zen Kaku Gothic New',sans-serif;font-size:13px;
  }
  /* 選ばれているタブはカードと同じ色で塗り、下の線をカードの色で消して地続きにする */
  .sheet-tab.active{
    background:var(--ui-card);color:var(--ui-text);border-bottom-color:var(--ui-card);
  }
  /* タブの中身（名前と ✕）は枠を持たず、タブの色と字をそのまま継ぐ */
  .sheet-tab > button{
    border:0;background:none;color:inherit;font:inherit;cursor:pointer;
    padding:7px 14px;
  }
  /* ＋ は中身を持たないので、自分が余白を持つ */
  button.sheet-tab{padding:7px 14px;cursor:pointer;}
  /* 消す ✕ は、開いている組のタブの中だけに出す。写真の ✕ と同じ記号にして、
     「これを消す」を置き場所で示す（どの組が消えるのか迷わせない） */
  .sheet-tab > .tab-close{
    padding:7px 11px 7px 3px;margin-left:-9px;
    font-size:11px;opacity:0.65;
  }
  .sheet-tab > .tab-close:hover{opacity:1;}
  /* 出来上がりのコマ送り。組が2つ以上あるときだけ出る（video.html の ◀ ▶ と同じ役目） */
  .shot-nav:not([hidden]){display:flex;align-items:center;justify-content:center;gap:14px;margin:12px 0 0;}
  .shot-nav button{
    background:transparent;border:1px solid #4a4660;color:var(--ui-text);
    width:34px;height:34px;border-radius:50%;font-size:12px;line-height:1;cursor:pointer;
  }
  .shot-nav span{color:var(--ui-text);font-size:13px;min-width:54px;text-align:center;}
  /* .overlay-card p の指定より後に出したいので、カード側から書く */
  .overlay-card .shot-note:not([hidden]){
    margin:10px 0 0;color:var(--ui-mut);font-size:12px;line-height:1.7;
  }

  .stamp-btn{
    margin:28px auto 0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    width:112px;height:112px;border-radius:50%;
    border:3px solid var(--stamp);color:var(--stamp);background:transparent;
    font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:15px;
    letter-spacing:0.1em;transform:rotate(-8deg);cursor:pointer;
    transition:transform 0.12s ease, background 0.12s ease, color 0.12s ease;
  }
  .stamp-btn small{font-weight:500;font-size:10px;letter-spacing:0.05em;margin-top:2px;}
  .stamp-btn:active{transform:rotate(-8deg) scale(0.94);}
  .stamp-btn.ready{background:var(--stamp);color:var(--paper);}
  .hint{text-align:center;color:var(--ui-mut);font-size:12px;margin-top:10px;}
  /* 作れない理由。押されるまでは出さない */
  .create-error{margin:14px 0 0;text-align:center;}
  .create-error span{
    display:block;color:#f0a08c;font-size:13px;line-height:1.7;
  }
  .create-error span::before{content:'⚠ ';}
  .inputs input.bad{border-color:var(--stamp);}
  /* 足りていない枠を赤い破線で示す */
  .grid.show-missing .cell:not(.has-img){outline-color:var(--stamp);outline-width:2px;}
  footer{margin-top:40px;color:#5c5848;font-size:11px;text-align:center;max-width:480px;line-height:1.6;}
  footer small{display:block;margin-top:8px;font-size:inherit;}
  /* 動画作成ツールへの入り口。押すと行くかどうかを訊くので、見た目は普通の著作権表示のまま */
  footer small a{color:inherit;text-decoration:none;}
  input[type=file]{display:none;}

  .overlay{
    position:fixed;inset:0;background:rgba(21,19,28,0.92);
    display:none;align-items:center;justify-content:center;flex-direction:column;
    padding:24px;z-index:50;
  }
  .overlay.open{display:flex;}
  /* カードを紙の色にすると、紙で出来ている出力画像と地続きに見えて、
     どこまでが画像なのか分からなくなる。カードは操作画面側の色で持つ */
  .overlay-card{background:var(--ui-card);border-radius:8px;padding:16px;max-width:420px;width:100%;text-align:center;}
  .overlay-card img{width:100%;border-radius:4px;display:block;-webkit-touch-callout:default;}
  /* 出来上がりの上に押印を落とす演出。画像と同じ枠に重ねるので、位置は出力と同じ割合で持つ */
  .shot{position:relative;}
  .shot .stamp-drop{position:absolute;border-radius:0;pointer-events:none;will-change:transform;}
  /* 上の .overlay-card img が display:block を当てるので、hidden だけでは消えない */
  .shot .stamp-drop[hidden]{display:none;}
  .overlay-card p{color:var(--ui-text);font-size:13px;line-height:1.6;margin:14px 0 4px;}
  /* 訊いていることと、その結果として何が起きるかは行を分ける（1行に混ぜると
     真ん中で折り返して読みにくい）。結果のほうは添えるだけなので小さく */
  .overlay-card .drop-note{color:var(--ui-mut);font-size:12px;margin:2px 0 0;}
  .overlay-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:flex-start;margin-top:14px;}
  .overlay-actions a,.overlay-actions button{
    font-family:'Zen Kaku Gothic New',sans-serif;font-size:13px;
    /* 3つとも同じ高さにするための2つ。
       枠：塗る側も border:none ではなく透明の枠を持たせる。持たせないと枠付きより2px低い。
       行の高さ：normal はフォント任せなので端末で変わり、共有だけアイコン（15px）に
       押し上げられて他と食い違うことがある。アイコンより大きい値で決め打ちにする */
    line-height:19px;
    border-radius:20px;padding:9px 18px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  }
  .overlay-actions a{background:var(--teal);color:#f1ede1;}
  /* .ghost は共有が主役のときのダウンロードなど、塗らずに枠線だけにする側 */
  .overlay-actions button,.overlay-actions .ghost{background:transparent;color:var(--ui-text);border:1px solid #4a4660;}
  /* アプリでよくある共有ボタンに合わせて、文字の前に共有の記号を置く */
  #resultShare{display:inline-flex;align-items:center;gap:7px;}
  #resultShare svg{width:15px;height:15px;flex:none;}
  /* 共有ボタンと、その共有にしか効かないチェックをひとまとめにして、
     ダウンロードや閉じるには関わらないことを囲いで示す。
     チェックが出ないとき（メモが無いとき）はボタン1つなので囲わない。
     :not([hidden]) が要る。class で display を指定すると hidden が効かなくなるため */
  .share-group:not([hidden]){display:flex;flex-direction:column;align-items:center;gap:9px;}
  .share-group:has(#shareCaptionRow:not([hidden])){
    border:1px solid var(--ui-line);border-radius:16px;padding:10px 14px;}
  /* 囲いが出ると、共有ボタンは枠と内側の余白のぶん（1+10px）だけ下がった位置に座る。
     揃えたいのは囲いではなく共有ボタン自体なので、他のボタンも同じだけ下げる。
     囲いの中の共有ボタンには効かないよう、直下の子だけを指す */
  .overlay-actions:has(#shareCaptionRow:not([hidden]))>a,
  .overlay-actions:has(#shareCaptionRow:not([hidden]))>button{margin-top:11px;}
  #shareCaptionRow:not([hidden]){display:flex;align-items:center;gap:7px;
    color:var(--ui-mut);font-size:12px;cursor:pointer;}
  #shareCaptionRow input{accent-color:var(--blue);width:15px;height:15px;margin:0;}
  /* メモを写すのは、画像を送る・保存する・閉じるとは役割が違う。3つの下に、何のための
     ものかを添えた別の区画として置く。ボタンは覚えた名前を消すのと同じ控えめな下線付きの
     文字にして、上の3つと同じ操作には見せない。
     :not([hidden]) が要る。class で display を指定すると hidden が効かなくなるため */
  .copy-area:not([hidden]){display:block;margin-top:16px;}
  .overlay-card .copy-area p{color:var(--ui-mut);font-size:12px;line-height:1.5;margin:0;}
  /* 字は小さくても押しやすいよう、上下に余白を持たせて指の当たる幅を確保する。
     inline-flex にすると、カードの text-align:center がそのまま中央寄せに効く */
  #resultCopy{
    display:inline-flex;align-items:center;gap:5px;
    margin:2px 0 0;padding:6px 8px;border:0;background:none;
    color:var(--ui-mut);font:inherit;font-size:12px;cursor:pointer;
  }
  #resultCopy svg{width:13px;height:13px;flex:none;}
  /* 下線は文字だけに引く。ボタンに掛けると記号の下にも伸びて、字と記号が地続きに見える */
  #resultCopyLabel{text-decoration:underline;}
  .overlay-card .share-error{color:#f0a08c;font-size:12px;margin:10px 0 0;}
  .overlay-card .share-error:empty{display:none;}