/* ==========================================================================
   COICOI QR — アプリ固有のスタイル

   入力欄・ボタンの下地・文字の基本・フォーカス表示・ダークモードの基礎は
   pico.green.min.css（Pico CSS v2 緑テーマ）が担当しています。
   このファイルには「このアプリにしかない画面」だけを書いています。

   目次
     1. テーマ変数（色・フォント）
     2. 土台（ページ全体のレイアウト）
     3. ヘッダー（緑の帯・ホーム/メニューアイコン）
     4. ホーム画面（4つのタイル）
     5. 共通部品（ボタン・操作バー・メッセージ）
     6. 連絡先ツール（表・貼り付け・QRカード一覧）
     7. かんたんQR（Wi-Fi・Webサイト・フリーテキスト）
     8. 読み取りモード（1人ずつ大きく表示）
     9. スライドメニュー
    10. ドラッグ＆ドロップの案内
    11. 「このアプリについて」
    12. 印刷・アクセシビリティ
   ========================================================================== */

/* ---------- 1. テーマ変数 ---------- */
:root{
  --bg:#f3f6f6;            /* ページ背景 */
  --surface:#ffffff;       /* カードなどの面 */
  --ink:#18282d;           /* 基本の文字色 */
  --muted:#5b6d72;         /* 補足の文字色 */
  --line:#d3dee0;          /* 枠線 */
  --accent:#16708a;        /* 操作の強調色（青緑） */
  --accent-ink:#ffffff;
  --accent-soft:#e1eff3;
  --green:#2e7d32;         /* アイコンなどの緑 */
  --green-soft:rgba(46,125,50,.12);
  --header-bg:#2e7d32;     /* ヘッダーの背景（ダークでは落ち着いた深緑にする） */
  --header-ink:#ffffff;    /* ヘッダーの文字色 */
  --display:"Zen Maru Gothic","BIZ UDPGothic","Hiragino Maru Gothic ProN",sans-serif;
  --body:"BIZ UDPGothic","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  --pico-font-family:var(--body);  /* Picoの部品にも同じフォントを使う */
  color-scheme:light;
}
/* ダークモード（OS設定または data-theme="dark"） */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111a1d; --surface:#18252a; --ink:#e3eced; --muted:#9db0b4; --line:#2c3e44;
    --accent:#5fb7cf; --accent-ink:#0d1a1e; --accent-soft:#1d3a44;
    --green-soft:rgba(143,209,155,.14);
    --header-bg:#17301f; --header-ink:#cfe6d4;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111a1d; --surface:#18252a; --ink:#e3eced; --muted:#9db0b4; --line:#2c3e44;
  --accent:#5fb7cf; --accent-ink:#0d1a1e; --accent-soft:#1d3a44;
  --green-soft:rgba(143,209,155,.14);
  --header-bg:#17301f; --header-ink:#cfe6d4;
  color-scheme:dark;
}

/* ---------- 2. 土台 ---------- */
html{
  font-size:100%;        /* Picoの「画面幅で文字を拡大する」機能は使わない（remの基準を16pxに固定） */
  background:var(--bg);  /* Picoはhtmlに独自の背景を塗るため、ページ全体の背景もこちらで指定する */
}
[hidden]{display:none!important}  /* hidden属性を確実に効かせる（画面切り替えの要） */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  line-height:1.6;
}
.wrap{max-width:1180px;margin:0 auto;padding:24px 16px 64px;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
/* グリッドの子は「中身の最小幅より縮まない」仕様のため、min-width:0で画面幅まで縮められるようにする */
.wrap>*,section>*,.tool>*{min-width:0}
section{display:grid;gap:12px}
.tool{display:grid;gap:28px}
label{margin-bottom:0}  /* 余白はgapで管理するため、Picoのlabel余白は使わない */

/* ---------- 3. ヘッダー ---------- */
header{
  position:relative;
  background:var(--header-bg);
  padding:22px 64px;
  display:grid;justify-items:center;text-align:center;
}
h1{font-family:var(--display);font-size:1.9rem;margin:0;letter-spacing:.02em;text-wrap:balance;color:var(--header-ink)}
header .menu-btn,header .home-btn{
  position:absolute;top:50%;right:14px;transform:translateY(-50%);
  background:transparent;border:0;color:var(--header-ink);box-shadow:none;
  padding:9px;border-radius:10px;cursor:pointer;display:grid;place-items:center;
}
header .home-btn{right:auto;left:14px}
header .menu-btn:hover,header .home-btn:hover{background:rgba(255,255,255,.14);border-color:transparent}
/* ヘッダー下のひとこと */
.intro{display:grid;gap:4px;justify-items:center;text-align:center;margin-top:-14px}
.subtitle{font-size:.95rem;margin:0;color:#000}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .subtitle{color:var(--ink)}}
:root[data-theme="dark"] .subtitle{color:var(--ink)}

/* ---------- 4. ホーム画面 ---------- */
#home{display:grid;gap:16px}
#home h2{justify-content:center}
.home-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:14px;
  max-width:780px;margin:0 auto;width:100%;
}
.home-grid .tile{
  display:flex;align-items:center;gap:14px;text-align:left;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:18px 16px;cursor:pointer;font:inherit;font-size:1rem;color:var(--ink);
  height:auto;margin:0;box-shadow:none;
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.home-grid .tile:hover{border-color:var(--green);box-shadow:0 4px 16px rgba(0,0,0,.08);transform:translateY(-1px)}
.tile .ico{flex:none;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--green-soft);color:var(--green)}
.tile .tx{display:grid;gap:3px;min-width:0}
.tile .t{font-family:var(--display);font-size:1.05rem;font-weight:700}
.tile .d{font-size:.82rem;color:var(--muted);line-height:1.45}
.tile .chev{flex:none;margin-left:auto;color:var(--muted);display:grid;place-items:center}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tile .ico{color:#8fd19b}}
:root[data-theme="dark"] .tile .ico{color:#8fd19b}
/* ホームの「いますぐつくる」ボックス（タイルと同じ幅に合わせる） */
.home-quick{max-width:780px;margin:0 auto}

/* ---------- 5. 共通部品 ---------- */
h2{font-family:var(--display);font-size:1.2rem;margin:0;display:flex;align-items:center;gap:10px}
h2 .no{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-size:.95rem}
/* 操作ボタンの並び */
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bar .sp{flex:1}
.bar select{width:auto;margin-bottom:0;padding:6px 10px;font-size:.9rem}
/* ボタンはPicoより小ぶり・控えめにそろえる
   （Picoは [type=button] で装飾するため、同じ強さの書き方で上書きする） */
button,[type="button"],[type="submit"],[type="reset"],.btn{
  font:inherit;font-size:.9rem;line-height:1.5;height:auto;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  padding:7px 14px;border-radius:8px;cursor:pointer;box-shadow:none;
  display:inline-flex;align-items:center;gap:6px;width:auto;margin-bottom:0;
}
button:hover,[type="button"]:hover,.btn:hover{border-color:var(--accent)}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
button.danger{color:#b3261e}
:root[data-theme="dark"] button.danger{color:#ff8a80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) button.danger{color:#ff8a80}}
/* 保存形式ボタンのうっすら色分け（PNG=緑・JPG=だいだい・SVG=青） */
button.fmt-png{background:rgba(46,125,50,.10);border-color:rgba(46,125,50,.35)}
button.fmt-jpg{background:rgba(230,126,34,.10);border-color:rgba(230,126,34,.40)}
button.fmt-svg{background:rgba(25,118,210,.10);border-color:rgba(25,118,210,.35)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) button.fmt-png{background:rgba(143,209,155,.16);border-color:rgba(143,209,155,.45)}
  :root:not([data-theme="light"]) button.fmt-jpg{background:rgba(255,183,112,.16);border-color:rgba(255,183,112,.45)}
  :root:not([data-theme="light"]) button.fmt-svg{background:rgba(130,190,255,.16);border-color:rgba(130,190,255,.45)}
}
:root[data-theme="dark"] button.fmt-png{background:rgba(143,209,155,.16);border-color:rgba(143,209,155,.45)}
:root[data-theme="dark"] button.fmt-jpg{background:rgba(255,183,112,.16);border-color:rgba(255,183,112,.45)}
:root[data-theme="dark"] button.fmt-svg{background:rgba(130,190,255,.16);border-color:rgba(130,190,255,.45)}
/* 補足文・操作結果のメッセージ */
.note{font-size:.85rem;color:var(--muted);margin:0}
.msg{font-size:.88rem;color:var(--accent);min-height:1.4em}

/* ---------- 6. 連絡先ツール ---------- */
/* 入力表 */
.tablebox{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:1100px;margin:0}
th{font-size:.78rem;color:var(--muted);font-weight:700;text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap;letter-spacing:.04em}
td{padding:4px;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
td.idx{color:var(--muted);font-size:.8rem;text-align:center;width:2.5em;font-variant-numeric:tabular-nums}
td input[data-k]{
  width:100%;height:auto;margin:0;
  font:inherit;font-size:.9rem;padding:6px 7px;
  border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);
}
td input[data-k]::placeholder{color:var(--muted);opacity:.55}
td input[data-k]:hover{border-color:var(--line)}
td input[data-k]:focus{background:var(--bg)}
td.del button{padding:4px 9px;border-color:transparent;color:var(--muted)}
/* Excelからの貼り付け */
.paste{display:grid;gap:8px}
.paste textarea{
  width:100%;min-height:110px;margin:0;
  font-family:ui-monospace,Menlo,monospace;font-size:.85rem;padding:10px;
  border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
}
details summary{cursor:pointer;color:var(--accent);font-size:.9rem}
/* できあがったQRカードの一覧 */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:8px;justify-items:center;text-align:center}
.card canvas{width:100%;max-width:200px;height:auto;image-rendering:pixelated;background:#fff;border-radius:4px}
.card .kana{font-size:.72rem;color:var(--muted);line-height:1.2}
.card .name{font-family:var(--display);font-size:1.15rem;line-height:1.2}
.card .org{font-size:.78rem;color:var(--muted);line-height:1.3;min-height:1.3em}
.card .err{color:#b3261e;font-size:.82rem}
.card button{font-size:.8rem;padding:4px 10px}
.card.sel{border-color:var(--green);box-shadow:0 0 0 2px var(--green-soft)}  /* 編集画面で開いているチケット */
.card .fmts{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}  /* PNG・JPG・SVGの3ボタン */
.empty{color:var(--muted);padding:24px;text-align:center;border:1px dashed var(--line);border-radius:12px}
/* 読み取り方の説明 */
.howto{background:var(--accent-soft);border-radius:10px;padding:12px 16px;font-size:.88rem}
.howto ul{margin:4px 0 0;padding-left:1.2em}

/* ---------- 7. かんたんQR（Wi-Fi・Webサイト・フリーテキスト） ---------- */
#toolWifi h2,#toolUrl h2,#toolText h2,#toolDeco h2,#toolTicket h2{justify-content:center}
.simple{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:14px;width:100%}
.simple label{display:grid;gap:5px;margin:0;font-size:.88rem;color:var(--muted)}
.simple input,.simple textarea,.simple select{
  width:100%;height:auto;margin:0;
  font:inherit;font-size:.95rem;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);
}
.simple textarea{min-height:110px;resize:vertical}
/* 一括作成のドロップゾーン（クリックでファイル選択もできる） */
.dropzone{
  width:100%;height:auto;margin:0;box-shadow:none;
  display:grid;justify-items:center;gap:6px;text-align:center;
  background:var(--green-soft);border:2px dashed var(--green);border-radius:12px;
  padding:22px 16px;cursor:pointer;color:var(--ink);font:inherit;
}
.dropzone:hover{border-color:var(--green);background:rgba(46,125,50,.2)}
.dropzone svg{color:var(--green)}
.dropzone strong{font-family:var(--display);font-size:1.02rem}
.dropzone .dz-hint{font-size:.85rem;color:var(--muted)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dropzone{border-color:#8fd19b}
  :root:not([data-theme="light"]) .dropzone svg{color:#8fd19b}
  :root:not([data-theme="light"]) .dropzone:hover{background:rgba(143,209,155,.22)}}
:root[data-theme="dark"] .dropzone{border-color:#8fd19b}
:root[data-theme="dark"] .dropzone svg{color:#8fd19b}
:root[data-theme="dark"] .dropzone:hover{background:rgba(143,209,155,.22)}
/* おしゃれQRの設定パネル */
.simple>*,.deco,.deco-grid,.deco-grid label{min-width:0}  /* 中身の最小幅で箱が画面からはみ出さないように */
.deco{margin:0}
.deco-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-top:10px}
.deco-grid label{display:grid;gap:4px;margin:0;font-size:.85rem;color:var(--muted);width:auto}
.deco-grid select{width:auto}
.deco-grid input[type=color]{width:52px;height:36px;padding:2px;margin:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer}
.deco-grid .logo-label{flex:1 1 100%}  /* ファイル選択は1行まるごと使う（固有幅が縮まずはみ出すため） */
.deco-grid input[type=file]{width:100%;min-width:0;font-size:.85rem;border:0;padding:0;background:none}
/* QR入りチケット */
.tk-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.tk-box{background:var(--bg);border-radius:10px;padding:10px}
.tk-box canvas{display:block;width:100%;height:auto;touch-action:none}
.bar input[type=number]{width:5.2em;height:auto;margin:0;padding:6px 8px;font-size:.9rem}
.deco-grid input[type=range]{width:130px;margin:0}
/* QRコードのプレビュー枠 */
.qrbox{display:grid;justify-items:center;align-items:center;background:var(--bg);border-radius:10px;padding:14px;min-height:140px}
.qrbox canvas{width:min(280px,100%);height:auto;image-rendering:pixelated;background:#fff;border-radius:6px}
.hint{color:var(--muted);font-size:.9rem;text-align:center}

/* ---------- 8. 読み取りモード ---------- */
#scan{
  position:fixed;inset:0;z-index:50;background:#fff;color:#111;
  display:flex;flex-direction:column;
  padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));
}
.scan-top,.scan-nav{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.scan-top .sp{flex:1}
.scan-top select{width:auto;margin-bottom:0}
#scan button,#scan select{background:#fff;color:#111;border-color:#c9d3d5}
#scan button.primary{background:var(--green);color:#fff;border-color:var(--green)}
.scan-count{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums}
.scan-auto{font-size:.9rem;display:flex;align-items:center;gap:4px;margin:0}
.scan-main{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
#scanCanvas{width:min(62vh,88vw);height:auto;image-rendering:pixelated}
.scan-kana{font-size:1rem;color:#555}
.scan-name{font-family:var(--display);font-size:clamp(1.6rem,4vw,2.6rem);line-height:1.2}
.scan-org{font-size:1rem;color:#444;min-height:1.4em}
.scan-nav{justify-content:center}
.scan-nav button{font-size:1.1rem;padding:10px 26px}

/* ---------- 9. スライドメニュー ---------- */
#drawer{position:fixed;inset:0;z-index:70;pointer-events:none;visibility:hidden;transition:visibility 0s .25s}
#drawer.open{pointer-events:auto;visibility:visible;transition:none}
.drawer-bg{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .25s}
#drawer.open .drawer-bg{opacity:1}
.drawer-panel{
  position:absolute;top:0;right:0;height:100%;width:min(300px,85vw);
  background:var(--surface);color:var(--ink);box-shadow:-4px 0 24px rgba(0,0,0,.25);
  transform:translateX(100%);transition:transform .25s ease;
  padding:14px;display:flex;flex-direction:column;gap:4px;
  justify-content:flex-start; /* Picoがnavに当てるspace-betweenを打ち消し、項目を上に寄せる */
}
#drawer.open .drawer-panel{transform:none}
.drawer-head{display:flex;justify-content:flex-end;padding:0;margin-bottom:2px} /* ❌だけを右上に置く */
#drawerClose{background:transparent;border:0;box-shadow:none;padding:8px;border-radius:8px;color:var(--muted);cursor:pointer;display:grid;place-items:center}
#drawerClose:hover{color:var(--ink);background:var(--bg);border-color:transparent}
.drawer-item{border:0;background:none;color:var(--ink);text-align:left;width:100%;padding:12px 10px;border-radius:8px;font-size:1rem}
.drawer-item:hover{background:var(--accent-soft);border-color:transparent}
/* 画面の色（モーダルの中の選択肢） */
.theme-box{max-width:420px;width:100%}
.theme-opts{display:grid;gap:10px}
.theme-opts button{display:grid;gap:2px;text-align:left;justify-items:start;padding:12px 14px;width:100%}
.theme-opts button b{font-family:var(--display);font-size:1rem}
.theme-opts button span{font-size:.82rem;color:var(--muted)}
.theme-opts button.on{border-color:var(--accent);background:var(--accent-soft)}
.theme-opts button.on b{color:var(--accent)}

/* ---------- 10. ドラッグ＆ドロップの案内 ---------- */
#drop{
  position:fixed;inset:0;z-index:80;pointer-events:none;
  background:var(--green-soft);border:4px dashed var(--green);
  display:flex;align-items:center;justify-content:center;
}
.drop-inner{
  background:var(--surface);color:var(--ink);border-radius:14px;padding:20px 34px;
  font-size:1.25rem;font-family:var(--display);font-weight:700;text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.drop-inner small{display:block;font-family:var(--body);font-size:.85rem;font-weight:400;color:var(--muted);margin-top:6px}

/* ---------- 11. 「このアプリについて」 ---------- */
#about,#themeDlg{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px}
.about-box{
  background:var(--surface);color:var(--ink);
  max-width:620px;width:100%;max-height:85vh;overflow:auto;
  border-radius:14px;padding:20px 22px;display:grid;gap:10px;font-size:.95rem;
}
.about-head{display:flex;align-items:center;gap:10px}
.about-head h2{flex:1}
.about-box p{margin:0}
.about-box ol,.about-box ul{margin:0;padding-left:1.3em}
.about-box li{margin-bottom:6px}

/* ---------- 12. 印刷・アクセシビリティ ---------- */
@media print{
  @page{size:A4;margin:10mm}
  body{background:#fff;color:#000}
  .wrap{padding:0;max-width:none;display:block}
  header,.intro,.noprint,#home,#inputSec,.howto,.card button,.bar,#drawer{display:none!important}
  #outSec h2{display:none}
  .cards{grid-template-columns:repeat(var(--pc,3),1fr);gap:0}
  .card{border:1px dashed #999;border-radius:0;break-inside:avoid;background:#fff;padding:5mm}
  .card .kana,.card .org{color:#333}
  .card canvas{max-width:none;width:80%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}