/* おやこの やくそく判子帳:誓いエンジンの chikai.css に足すもの
   2026-10-26 社長の見本に合わせて作り直し(デザインの決まりごと「アプリごとの例外」)
   ・主ボタンはコーラル(--cta)に白文字。選んだ状態はミント
   ・背景は「いろつき(ごく薄いテーマ色)」と「しろ」を選べる。しろのときは箱をごく薄い灰ミントにする
   ・顔のイラストは見出しのアイコンだけ(判子は文字のまま)
   枠線・影は使わない */
:root{--cta:#E85A4A;--cta-ink:#FFFFFF;--soft:#E3F7F2}
@media (prefers-color-scheme: light){
  :root[data-bg="white"]{--paper:#FFFFFF;--wash:#F3F7F6}
}
@media (prefers-color-scheme: dark){
  :root{--cta:#F07466;--cta-ink:#1A1A1A;--soft:#163A33}
}
:root[data-color="sakura"]{--soft:#FBE6EE}
:root[data-color="sora"]{--soft:#E3F0FB}

/* ボタン:主はコーラル、選んだ状態はミント */
.btn.primary{background:var(--cta);color:var(--cta-ink);border-radius:999px}
.btn.primary .bi{width:20px;height:20px}
.btn.big{min-height:56px;font-size:17px}
.btn.ghost{border-radius:999px}
.btn.soft{background:var(--soft);color:var(--wtxt);border-radius:14px}
.btn.soft small{font-size:12px;font-weight:700;opacity:.8}
.seg button.on,.card .seg button.on{background:var(--leaf);color:#fff}
.seg button.on small,.card .seg button.on small{color:#fff}
.nav button.on{color:var(--wtxt)}

/* 見出しの帯 */
.bar{display:flex;align-items:center;gap:6px;min-height:44px}
.bar h1{font-size:22px;flex:1;min-width:0}
.bar-r{flex:none;font-size:14px;font-weight:700;color:var(--ink2)}
.bar .ib{margin-left:-12px}
.lead{text-align:center;font-size:14px;font-weight:700;color:var(--ink2);line-height:1.7;margin-top:-10px}

/* イラスト */
.ill{display:block;flex:none;object-fit:contain;-webkit-user-drag:none;user-select:none}
.ill.scene{width:100%;height:auto;aspect-ratio:720/450;border-radius:20px;margin-top:4px}
.av{width:44px;height:44px}
.av-s{width:32px;height:32px}
.av-m{width:60px;height:60px}
/* 絵を選ぶ(子ども・おうちのひと) */
.avpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.avpick button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:96px;padding:10px 4px 8px;border:0;border-radius:14px;background:var(--wash);color:var(--ink)}
.avpick small{font-size:13px;font-weight:700}
.avpick button.on{background:var(--soft);outline:3px solid var(--leaf);outline-offset:-3px}
.av-xs{width:26px;height:26px}
.av-l{width:112px;height:112px}
.av-xl{width:132px;height:132px}
.gift-s{width:30px;height:30px}
.gift-l{width:112px;height:112px}
.logo{display:block;transform:rotate(-8deg)}
.logo-l{width:72px;height:72px}

/* はじめの画面 */
.welcome{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding-top:24px}
.welcome h1{font-size:30px;line-height:1.35}
.welcome .sub{font-size:16px;font-weight:700}
.duo{display:flex;gap:16px;justify-content:center;margin:8px 0}

/* やくそくの箱 */
.yk-h{display:flex;align-items:center;gap:10px}
.yk-h h2{font-size:18px}
.ylist{margin:0;padding-left:1.4em;display:flex;flex-direction:column;gap:4px;font-size:17px;font-weight:700;line-height:1.5}
.ylist li{overflow-wrap:anywhere}
.ylist li::marker{color:var(--wtxt)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.ps{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;background:var(--paper);border-radius:14px;padding:14px 6px 10px}
.ps .seal-btn,body.large .ps .seal-btn{width:108px;height:108px}
.ps-btn.on .seal{transform:rotate(-8deg)}
.ps-l{font-size:18px;font-weight:700;margin-top:4px}
.ps-w{font-size:13px;color:var(--ink2);font-weight:700}
.pair-h{text-align:center;font-size:13.5px;color:var(--ink2);font-weight:700}
.hana-t{display:flex;align-items:center;justify-content:center;gap:10px;font-size:26px;font-weight:700;color:var(--seal)}
.hana.ht{width:64px;height:64px;transform:rotate(-10deg)}
.yk.hanaon{background:var(--soft)}
.yk.hanaon .ps{background:var(--wash)}
.yk.pop .hana.ht{animation:hpop .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes hpop{0%{transform:scale(.2) rotate(-90deg);opacity:0}100%{transform:scale(1) rotate(-10deg);opacity:1}}

/* はなまる */
.hana{display:block;width:100%;height:100%;overflow:visible}
.hana .hp,.hana .hs{fill:none;stroke:var(--seal);stroke-linecap:round;stroke-linejoin:round}
.hana .hp{stroke-width:5}
.hana .hs{stroke-width:4.2}
.hana.ht .hp{stroke-width:6}.hana.ht .hs{stroke-width:5}

/* ごほうび */
.rw-h{display:flex;align-items:center;gap:8px}
.rw-h h2{flex:1}
.rw-h span{font-weight:700;color:var(--ink2)}
.rw-h b{font-size:24px;color:var(--wtxt)}
.rw-t{font-size:16px;font-weight:700}
.rw.ready{background:var(--soft)}
.rw.ready .rw-h span{color:var(--seal)}
.dots{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;justify-items:center}
.dots.many{grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.dots i{width:100%;max-width:44px;aspect-ratio:1;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center}
.rw.ready .dots i{background:var(--wash)}
.dots i.on{background:transparent}
.dots .hana.mini{width:92%;height:92%}
.dots .hana.mini .hp{stroke-width:8}.dots .hana.mini .hs{stroke-width:7}

/* シート(やくそくを決める・設定) */
.sheet{gap:16px}
.sh-h{display:flex;align-items:center;gap:12px}
.sh-h h2{font-size:22px}
.wz-top{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;margin:-4px 0 -8px}
.wz-n{font-size:13px;font-weight:700;color:var(--ink2);text-align:center}
.wz-ill{display:flex;justify-content:center}
.sheet input[type=text]{background:var(--wash);min-height:52px;font-size:17px;font-weight:700;border-radius:12px}
.chosen{display:flex;flex-direction:column;gap:8px}
.crow{display:grid;grid-template-columns:34px 1fr 48px;align-items:center;gap:8px;background:var(--wash);border-radius:12px;padding:6px 4px 6px 10px;min-height:58px}
.crow b{width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--wtxt);display:flex;align-items:center;justify-content:center;font-size:15px}
.crow span{font-size:16px;font-weight:700;line-height:1.45;overflow-wrap:anywhere}
.crow .ib{color:var(--seal)}
.gopt{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700;background:var(--wash);border-radius:12px}
.gopt .bi{color:var(--wtxt);flex:none}
.radios{display:flex;flex-direction:column;gap:8px}
.ropt{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border:0;border-radius:12px;background:var(--wash);font-size:16px;font-weight:700;text-align:left;line-height:1.45}
.ropt i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;color:#fff}
.ropt i .bi{width:18px;height:18px;stroke-width:2.6}
.ropt.on{background:var(--soft)}
.ropt.on i{background:var(--leaf)}
.seg.c4{grid-template-columns:repeat(4,1fr)}
.seg.c6{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.seg.c6 button{min-height:56px;font-size:17px}
.signs{display:flex;flex-direction:column;gap:14px}
.sg{display:flex;flex-direction:column;gap:6px}
.sg-h{display:flex;align-items:center;gap:8px;font-weight:700}
.sg-h span{flex:1}
.pad{display:block;width:100%;aspect-ratio:5/2;background:var(--wash);border-radius:14px;touch-action:none;cursor:crosshair}
.bgsw{border-radius:50%;width:18px;height:18px;display:block;margin-bottom:3px}
.bgsw.tint{background:#E3F7F2}
.bgsw.white{background:#FFFFFF;outline:1.5px solid #B9BAB6;outline-offset:-1.5px}

/* おうちのひと:長押しで開く */
.gate{width:128px!important;height:128px!important;margin:8px 0}
.gate .sr{stroke:var(--ink2)}
.gate .sf{fill:var(--ink2)}
.gate .hr{stroke:var(--cta);transform-origin:48px 48px}
.gate-i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.gate-i .bi{width:40px;height:40px}
/* 設定の一覧(矢印つき) */
.menu{display:flex;flex-direction:column;gap:10px}
.mrow2{display:grid;grid-template-columns:44px 1fr 24px;align-items:center;gap:12px;min-height:68px;padding:10px 14px;border:0;border-radius:16px;background:var(--wash);text-align:left;color:var(--ink)}
.mrow2 i{width:44px;height:44px;border-radius:12px;background:var(--soft);color:var(--wtxt);display:flex;align-items:center;justify-content:center}
.mrow2 i .bi{width:24px;height:24px}
.mrow2 span{display:flex;flex-direction:column;min-width:0}
.mrow2 b{font-size:16px}
.mrow2 small{font-size:12.5px;color:var(--ink2);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrow2>.bi{color:var(--ink2)}
.mrow2[disabled]{opacity:.45}

/* タイマー */
.tm{position:relative;width:min(272px,74vw);aspect-ratio:1;margin:0 auto}
.tm-ring{width:100%;height:100%;transform:rotate(-90deg)}
.tm-t{fill:none;stroke:var(--wash);stroke-width:16}
.tm-v{fill:none;stroke:var(--leaf);stroke-width:16;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .25s linear}
.tm.soon .tm-v{stroke:var(--cta)}
.tm-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.tm-n{font-size:clamp(48px,15vw,64px);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.tm-s{font-size:15px;font-weight:700;color:var(--ink2)}
.tm.soon .tm-s{color:var(--cta)}
.tm-big{font-size:48px;font-weight:700;color:var(--cta);line-height:1.2}
.info{display:flex;align-items:center;gap:12px;background:var(--soft);border-radius:14px;padding:12px 16px;color:var(--wtxt);font-size:14px;font-weight:700;line-height:1.6}
.info .bi{width:28px;height:28px;flex:none}
.btn[disabled]{opacity:.45}

/* はんこちょう */
.tabsel{flex-direction:row!important;gap:8px}
.tabsel .ill-bg{fill:var(--paper)}
.mhead{display:flex;justify-content:space-between;align-items:center}
.ib[disabled]{opacity:.3}
.cw.sun{color:var(--seal)}
.cd{display:flex;align-items:center;justify-content:center}
.card .cd:not(.fut):not(.now){background:var(--paper)}
.cd .cm{position:absolute;inset:16% 10% 4% 10%;width:80%;height:80%}
.cd .seal.cm{inset:22% 18% 8% 18%;width:64%;height:64%;transform:rotate(-8deg)}
.cd .seal.cm text{font-size:30px}
.lg{align-items:center}
.lg span{display:inline-flex;align-items:center;gap:6px}
.lgm{width:22px;height:22px}
.lg .seal.lgm{width:18px;height:18px}
.done-seal .s-in,.cm .s-in{display:block}
.hcount{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center}
.hcount .hana.hc{grid-row:1/3;width:40px;height:40px}
.hcount p{font-weight:700;font-size:15px}
.hcount div{display:flex;gap:18px;font-size:14px;color:var(--ink2);font-weight:700}
.hcount b{font-size:24px;color:var(--wtxt)}

/* 印刷:やくそくカード(A5)。印刷するときだけ、カード以外を隠す */
.printcard{display:none}
@media print{
  @page{size:A5 portrait;margin:12mm}
  body.printing{background:#fff!important;padding:0!important;color:#1A1A1A}
  body.printing>*:not(#printcard){display:none!important}
  body.printing #printcard{display:block}
  .pc{font-family:var(--body);color:#1A1A1A;display:flex;flex-direction:column;gap:5mm}
  .pc-top{display:flex;align-items:center;justify-content:center;gap:4mm}
  .pc-logo{width:16mm;height:16mm}
  .pc-logo .sf{fill:#C8321F}.pc-logo text{fill:#fff}.pc-logo .s-in{stroke:#fff}
  .pc-k{margin:0;font-size:12pt;font-weight:700;color:#5F5E5A}
  .pc h1{font-size:24pt;letter-spacing:.08em;color:#1A1A1A;margin:0}
  .pc-b{background:#E3F7F2;border-radius:4mm;padding:4mm 6mm}
  .pc-b h2{font-size:12pt;margin:0 0 2mm;color:#0E7C6E}
  .pc-b ol{margin:0;padding-left:1.4em;font-size:15pt;font-weight:700;line-height:1.6}
  .pc-r{margin:0;font-size:11pt;color:#5F5E5A;text-align:center;line-height:1.6}
  .pc-sgs{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
  .pc-sg{display:flex;flex-direction:column;gap:1mm;font-size:10pt;color:#5F5E5A}
  .pc-sg img,.pc-sg i{display:block;width:100%;aspect-ratio:5/2;object-fit:contain;background:#F3F7F6;border-radius:3mm}
  .pc-d{margin:0;text-align:center;font-size:10pt;color:#5F5E5A}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}