/* ── 表紙テンプレート専用フォント(自己ホスティング) ── */
@font-face{font-family:'MLB-Cover-LexendDeca';src:url('/memolist/assets/fonts/LexendDeca-Regular.ttf');font-weight:400;font-display:block}
@font-face{font-family:'MLB-Cover-Montserrat';src:url('/memolist/assets/fonts/Montserrat-Bold.ttf');font-weight:700;font-display:block}
@font-face{font-family:'MLB-Cover-Aboreto';src:url('/memolist/assets/fonts/Aboreto-Regular.ttf');font-weight:400;font-display:block}
@font-face{font-family:'MLB-Cover-Tangerine';src:url('/memolist/assets/fonts/Tangerine-Bold.ttf');font-weight:700;font-display:block}
@font-face{font-family:'MLB-Cover-KleeOne';src:url('/memolist/assets/fonts/KleeOne-Regular.ttf');font-weight:400;font-display:block}
@font-face{font-family:'MLB-Cover-JosefinSans';src:url('/memolist/assets/fonts/JosefinSans-SemiBold.ttf');font-weight:600;font-display:block}

/* ── RESET & BASE ── */
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:20px}body{height:100%;background:#F0EEE9;font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;font-size:1em;color:#333333;-webkit-font-smoothing:antialiased}

/* ── CSS VARIABLES ── */
:root{
  --acc:#2B7A6F;--acc-l:#E8F5F2;--acc-m:#5DBFAD;--acc-d:#1A5048;
  --slate:#3B4F6B;--slate-l:#EEF2F8;--slate-m:#7A9BBF;--slate-d:#1E2D42;
  --amber:#B8720A;--amber-l:#FEF6E7;--amber-m:#F0A830;
  --red:#B03030;--red-l:#FDEAEA;--red-m:#E06060;
  --purple:#4A3FAA;--purple-l:#EEEDFB;--purple-m:#8B82D8;
  --green:#2B6B4A;--green-l:#E8F5EE;
  --bg:#ffffff;--bg2:#F7F9FB;--bg3:#F0EEE9;
  --br:rgba(0,0,0,0.08);--br2:rgba(0,0,0,0.14);
  --sb-bg:#F7F9FC;--sb-act-bg:#E8F5F2;--sb-act-c:#1A5048;--sb-heir:#1B2438;
  --fsize:15px;--fsize-sm:14px;--fsize-xs:12px;--fsize-lg:17px;--fsize-xl:21px;
  --font-ui:inherit
}

/* ── LAYOUT ── */
.app{display:flex;height:100vh;height:100dvh;overflow:hidden}
.sidebar{width:14.67em;flex-shrink:0;display:flex;flex-direction:column;background:var(--sb-bg);border-right:1px solid var(--br);transition:background .3s}
.sidebar.heir{background:var(--sb-heir)}
.main{flex:1;overflow-y:auto;background:var(--bg3);font-size:20px;container-type:inline-size;container-name:main}

/* ── SIDEBAR ── */
.logo-area{padding:18px 22px;border-bottom:1px solid var(--br)}
.sidebar.heir .logo-area{border-color:rgba(255,255,255,0.08)}
.logo-row{display:block}
.logo-ico{width:100%;background:transparent;display:block;line-height:0}
.logo-text{font-size:1.15rem;font-weight:800;color:#2B7A6F;text-decoration:none;display:block;padding:14px 16px}
.logo-txt{display:none}
.sidebar.heir .logo-txt{color:#E8EDF5}
.logo-sub{display:none}
.sidebar.heir .logo-sub{color:rgba(255,255,255,0.72)}
.mode-toggle{padding:8px 10px 4px}
.mode-toggle-inner{display:flex;background:rgba(0,0,0,0.06);border-radius:20px;padding:2px}
.sidebar.heir .mode-toggle-inner{background:rgba(255,255,255,0.06)}
.mt-btn{flex:1;font-size:0.67em;font-weight:600;padding:5px 0;border-radius:16px;text-align:center;cursor:pointer;transition:all .15s;color:#888;border:none;background:transparent}
.mt-btn.sel-own{background:#fff;color:var(--acc-d);box-shadow:0 1px 3px rgba(0,0,0,0.1)}
.mt-btn.sel-heir{background:rgba(90,130,190,0.3);color:#9BB8D8}
.mt-btn.sel-admin{background:rgba(124,58,237,0.25);color:#C4B5FD}
.sidebar.heir .mt-btn:not(.sel-heir){color:rgba(255,255,255,0.80)}
.heir-switch-btn{width:100%;font-size:0.68em;font-weight:600;padding:6px 8px;border-radius:8px;border:1px dashed #5A82BE;color:#5A82BE;background:rgba(90,130,190,0.07);cursor:pointer;display:block;text-align:center;transition:all .15s}
.heir-switch-btn:hover{background:rgba(90,130,190,0.15)}
.heir-back-btn{width:100%;font-size:0.68em;font-weight:600;padding:6px 8px;border-radius:8px;border:none;color:rgba(255,255,255,0.85);background:rgba(90,130,190,0.25);cursor:pointer;display:block;text-align:center;transition:all .15s;margin-top:4px}
.heir-back-btn:hover{background:rgba(90,130,190,0.45)}
.hof-owner-btn{display:block;width:100%;text-align:left;padding:10px 14px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;cursor:pointer;font-size:0.88em;margin-bottom:8px;transition:all .12s}
.hof-owner-btn:hover{background:#f0f4ff;border-color:#5A82BE}
.hof-owner-name{font-weight:700;color:#333333;margin-bottom:2px}
.hof-owner-perms{font-size:0.78em;color:#888}

.sb-scroll{flex:1;overflow-y:auto;padding-bottom:8px}
.nav-section{padding:10px 10px 0}
.nav-label{font-size:0.6em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:0 8px;margin-bottom:4px;color:#aaa}
.sidebar.heir .nav-label{color:rgba(255,255,255,0.72);letter-spacing:.06em}
.nav-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:0.8em;font-weight:500;margin-bottom:1px;transition:all .12s;color:#555;text-decoration:none}
.sidebar.own .nav-item:hover{background:rgba(43,122,111,0.08);color:var(--acc-d)}
.sidebar.own .nav-item.active{background:var(--sb-act-bg);color:var(--sb-act-c)}
.sidebar.heir .nav-item{color:rgba(255,255,255,0.88)}
.sidebar.heir .nav-item:hover{background:rgba(255,255,255,0.12);color:#ffffff}
.sidebar.heir .nav-item.active{background:rgba(90,130,190,0.35);color:#E0EEFA}
.nb{margin-left:auto;font-size:0.6em;padding:1px 5px;border-radius:7px;font-weight:700}
.nb-teal{background:var(--acc-l);color:var(--acc-d)}
.nb-red{background:rgba(176,48,48,0.15);color:#B03030}

.sb-footer{padding:10px;border-top:1px solid var(--br)}
.sidebar.heir .sb-footer{border-color:rgba(255,255,255,0.08)}
.sb-footer-links{display:flex;gap:10px;padding:2px 8px 8px}
.sb-footer-links a{font-size:0.72em;color:#999;text-decoration:none}
.sb-footer-links a:hover{color:var(--acc-d);text-decoration:underline}
.sidebar.heir .sb-footer-links a{color:rgba(255,255,255,0.65)}
.sidebar.heir .sb-footer-links a:hover{color:#ffffff}
.settings-btn{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:0.8em;font-weight:500;color:#777;transition:all .12s;margin-bottom:4px}
.sidebar.own .settings-btn:hover{background:rgba(43,122,111,0.08);color:var(--acc-d)}
.sidebar.heir .settings-btn{color:rgba(255,255,255,0.82)}
.sidebar.heir .settings-btn:hover{background:rgba(255,255,255,0.12);color:#ffffff}
.user-row{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;transition:background .12s}
.sidebar.own .user-row:hover{background:rgba(43,122,111,0.08)}
.sidebar.heir .user-row:hover{background:rgba(255,255,255,0.06)}
.ava{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.73em;font-weight:700;flex-shrink:0}
.ava-teal{background:#C5E8E2;color:#1A5048}
.ava-slate{background:#C5D5E8;color:#1E2D42}
.u-name{font-size:0.8em;font-weight:600;color:#333333}
.sidebar.heir .u-name{color:rgba(255,255,255,0.9)}
.u-role{font-size:0.67em;color:#888}
.sidebar.heir .u-role{color:rgba(255,255,255,0.80)}

/* ── PAGES ── */
.page{display:none;padding:24px;animation:fadeIn .18s ease}
.page.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ── サービス管理 コンテナクエリ ── */
/* 幅が狭いとき: プランカードを2列 */
@container main (max-width: 700px) {
}
/* さらに狭いとき: プランカードを1列、フォームも1列 */
@container main (max-width: 480px) {
  .form2 { grid-template-columns: 1fr !important; }
}
/* 広いとき: 4列を確保 */
@container main (min-width: 900px) {
}
@container main (min-width: 600px) and (max-width: 899px) {
}

/* ── TYPOGRAPHY ── */
.pg-bc{font-size:0.73em;color:#aaa;margin-bottom:4px}
.pg-title{font-size:var(--fsize-xl);font-weight:700;color:#333333;letter-spacing:-.3px}
.pg-sub{font-size:0.8em;color:#777;margin-top:3px}
.sec-title{font-size:0.87em;font-weight:700;color:#333333}
.sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}

/* ── CARDS ── */
.card{background:var(--bg);border:1px solid var(--br);border-radius:12px;overflow:hidden;margin-bottom:14px}
.card-head{padding:13px 16px;border-bottom:1px solid var(--br);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:0.87em;font-weight:600;color:#333333}
.card-action{font-size:0.8em;color:var(--acc);cursor:pointer;font-weight:600}

/* ── METRICS ── */
.metrics{display:grid;gap:10px;margin-bottom:18px}
.m3{grid-template-columns:repeat(3,minmax(0,1fr))}
.m4{grid-template-columns:repeat(4,minmax(0,1fr))}
.m5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:900px){.m4{grid-template-columns:repeat(2,minmax(0,1fr))}.m5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.m3,.m4,.m5{grid-template-columns:repeat(2,minmax(0,1fr))}}
.met{background:var(--bg);border:1px solid var(--br);border-radius:10px;padding:13px 15px}
.met-label{font-size:0.73em;color:#888;margin-bottom:4px}
.met-val{font-size:1.47em;font-weight:700;color:#333333;line-height:1}
.met-val.gr{color:#2B6B4A}.met-val.am{color:#B8720A}.met-val.bl{color:#3B4F6B}.met-val.re{color:#B03030}.met-val.pu{color:#4A3FAA}
.met-sub{font-size:0.67em;color:#aaa;margin-top:3px}

/* ── LIST ROWS ── */
.li{padding:11px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--br)}
.li:last-child{border-bottom:none}
.li-ico{width:28px;height:28px;border-radius:7px;background:var(--bg2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.93em}
.li-name{font-size:0.87em;font-weight:600;color:#333333}
.li-sub{font-size:0.73em;color:#888;margin-top:1px}
.li-r{margin-left:auto;text-align:right}
.li-val{font-size:0.87em;font-weight:600;color:#333333}
.li-hint{font-size:0.67em;color:#aaa}

/* ── BADGES ── */
.bdg{font-size:0.67em;padding:2px 8px;border-radius:8px;font-weight:700;white-space:nowrap;display:inline-block}
.bdg-g{background:#E8F5EE;color:#2B6B4A}
.bdg-a{background:#FEF6E7;color:#B8720A}
.bdg-b{background:#EEF2F8;color:#3B4F6B}
.bdg-r{background:#FDEAEA;color:#B03030}
.bdg-pu{background:#EEEDFB;color:#4A3FAA}
.bdg-gr{background:var(--bg2);color:#888;border:1px solid var(--br2)}
.bdg-warn{background:#FEF6E7;color:#B8720A;border:1px solid #F0A830}
.hdash-st-sel{font-size:0.73em;font-weight:600;border-radius:6px;border:1px solid var(--br);padding:3px 6px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;padding-right:20px}
.hdash-ass-inp{font-size:0.73em;border-radius:6px;border:1px solid var(--br);padding:3px 8px;width:100%;box-sizing:border-box;background:var(--bg);color:var(--tx);font-family:inherit;transition:border-color .15s}
.hdash-ass-inp:focus{outline:none;border-color:var(--acc-d);box-shadow:0 0 0 2px rgba(43,122,111,.12)}
.hdash-st-sel[data-v="pending"]{background-color:#FDEAEA;color:#B03030;border-color:#F5BCBC}
.hdash-st-sel[data-v="ready"]{background-color:#FEF6E7;color:#B8720A;border-color:#F0A830}
.hdash-st-sel[data-v="done"]{background-color:#E8F5EE;color:#2B6B4A;border-color:#9BDBBD}
.hdash-st-sel[data-v="skip"]{background-color:var(--bg2);color:#888;border-color:var(--br2)}
.hdash-exec-btn{display:inline-flex;align-items:center;gap:3px;font-size:0.67em;color:var(--slate);background:var(--slate-l);border:1px solid var(--slate-m);border-radius:6px;padding:3px 9px;cursor:pointer;font-weight:600;margin-left:4px}

/* ── TASK ITEMS ── */
.task{padding:11px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--br);cursor:pointer;transition:background .1s}
.task:last-child{border-bottom:none}
.task:hover{background:var(--bg2)}
.chk{width:17px;height:17px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.chk-on{background:var(--acc)}
.chk-off{border:2px solid var(--br2)}
.t-name{font-size:0.87em;font-weight:500;color:#333333}
.t-name.done{color:#bbb;text-decoration:line-through}
.t-sub{font-size:0.73em;color:#aaa;margin-top:1px}

/* ── Step Flow ── */
.step-flow{display:flex;flex-direction:column;align-items:stretch;gap:0}
.step-box{background:var(--bg);border:1.5px solid var(--br);border-radius:12px;padding:16px 18px;display:flex;align-items:center;gap:13px;transition:background .25s,border-color .25s,opacity .2s}
.step-box.sb-done{background:var(--acc-l);border-color:var(--acc)}
.step-box.sb-act{background:var(--bg);border-color:var(--acc);box-shadow:0 0 0 3px rgba(43,122,111,0.09);cursor:pointer}
.step-box.sb-act:hover{background:var(--acc-l)}
.step-num{font-size:0.62em;font-weight:700;background:var(--acc);color:#fff;border-radius:6px;padding:3px 8px;white-space:nowrap;flex-shrink:0;letter-spacing:0.03em}
.step-lbl{font-size:0.88em;font-weight:600;color:var(--fg)}
.step-box.sb-done .step-lbl{text-decoration:line-through;color:#999}
.step-sub2{font-size:0.73em;color:#aaa;margin-top:2px}
.step-box.sb-done .step-sub2{color:var(--acc)}
.step-arr{text-align:center;font-size:1em;color:var(--acc);padding:5px 0;user-select:none;line-height:1}

/* ── PROGRESS ── */
.prog-wrap{background:var(--bg);border:1px solid var(--br);border-radius:12px;padding:16px 20px;margin-bottom:18px;display:flex;align-items:center;gap:18px}
.pb-bg{height:6px;background:var(--bg3);border-radius:3px;flex:1}
.pb-fill{height:6px;background:var(--acc);border-radius:3px;transition:width .5s}
.pct{font-size:2em;font-weight:700;color:var(--acc-d);line-height:1;letter-spacing:-1px}

/* ── PROCEDURES ── */
.proc{padding:11px 16px;display:grid;grid-template-columns:1fr 80px 72px 130px 90px;gap:8px;align-items:center;border-bottom:1px solid var(--br)}
.proc:last-child{border-bottom:none}
.proc-hd{font-size:0.73em;color:#aaa;font-weight:600}
.pn{font-size:0.8em;color:#333333;font-weight:600}
.pd{font-size:0.67em;color:#888}
.pol-sel{font-size:0.78em;font-weight:600;border-radius:6px;border:1px solid var(--br);padding:3px 6px;cursor:pointer;appearance:none;-webkit-appearance:none;background-repeat:no-repeat;background-position:right 6px center;padding-right:20px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23aaa'/%3E%3C/svg%3E")}
.pol-sel[data-v="pol-del"]{background-color:#FDEAEA;color:#B03030;border-color:#F5BCBC}
.pol-sel[data-v="pol-mem"]{background-color:#EEF0FF;color:#4A3FAA;border-color:#C0BDED}
.pol-sel[data-v="pol-inh"]{background-color:#E8F0F7;color:#3B4F6B;border-color:#B0C4D8}
.pol-sel[data-v="pol-arc"]{background-color:#F0F5F0;color:#3B6B4A;border-color:#9BDBBD}
.pol-sel[data-v=""]{background-color:var(--bg2);color:#aaa;border-color:var(--br2)}
.proc-detail-link{cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px}
.proc-detail-link:hover{color:var(--acc)}
.pt{font-size:0.73em;color:#888}
.urg{color:#B03030;font-weight:600}
.auto-btn{display:inline-flex;align-items:center;gap:3px;font-size:0.67em;color:var(--slate);background:var(--slate-l);border:1px solid var(--slate-m);border-radius:6px;padding:3px 9px;cursor:pointer;font-weight:600}

/* ── HEIR BANNER ── */
.heir-banner{background:#EEF2F8;border:1px solid #7A9BBF;border-radius:12px;padding:14px 18px;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.hb-t{font-size:0.87em;font-weight:600;color:#1E2D42}
.hb-s{font-size:0.73em;color:#3B4F6B;margin-top:2px}

/* ── TOGGLE ── */
.tog{width:38px;height:21px;border-radius:11px;position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.tog.on{background:var(--acc)}
.tog.off{background:#ddd}
.tog-th{position:absolute;top:2.5px;width:16px;height:16px;background:#fff;border-radius:50%;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,0.15)}
.tog.on .tog-th{left:20px}
.tog.off .tog-th{left:2.5px}

/* ── FORMS ── */
.fl{font-size:0.73em;color:#666;font-weight:600;margin-bottom:4px}
.fi{width:100%;height:36px;border:1px solid var(--br2);border-radius:8px;padding:0 10px;font-size:0.87em;color:#333333;background:var(--bg);outline:none;font-family:inherit;transition:border-color .15s}
.fi:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(43,122,111,0.1)}
.fsel{width:100%;height:36px;border:1px solid var(--br2);border-radius:8px;padding:0 10px;font-size:0.87em;color:#333333;background:var(--bg);appearance:none;outline:none;cursor:pointer;font-family:inherit}
.fsel:focus{border-color:var(--acc)}
.fta{width:100%;border:1px solid var(--br2);border-radius:8px;padding:9px 10px;font-size:0.87em;color:#333333;background:var(--bg);resize:vertical;line-height:1.6;outline:none;font-family:inherit;transition:border-color .15s}
.fta:focus{border-color:var(--acc)}
.form2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:12px}
.form1{margin-bottom:12px}
.div{height:1px;background:var(--br);margin:18px 0}

/* ── BUTTONS ── */
.btn-primary{display:inline-flex;align-items:center;gap:6px;background:var(--acc);color:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:0.8em;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.btn-primary:hover{background:var(--acc-d)}
.btn-secondary{display:inline-flex;align-items:center;gap:6px;background:var(--bg);color:#555;border:1px solid var(--br2);border-radius:8px;padding:8px 14px;font-size:0.8em;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.btn-secondary:hover{background:var(--bg2)}
.btn-save{font-size:0.8em;font-weight:600;color:var(--acc-d);background:var(--acc-l);border:1px solid var(--acc-m);border-radius:8px;padding:7px 14px;cursor:pointer;transition:background .15s}
.btn-save:hover{background:#D4EDE9}
.btn-danger{background:var(--acc);color:#fff;border:none;border-radius:8px;padding:7px 14px;font-size:0.8em;font-weight:600;cursor:pointer;font-family:inherit}

/* ── WIZARD ── */
.steps-bar{background:var(--bg);border-bottom:1px solid var(--br);padding:0 22px;display:flex;align-items:center;overflow-x:auto}
.step{display:flex;align-items:center;gap:5px;padding:12px 9px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;font-size:0.8em;font-weight:500;color:#aaa;transition:all .15s}
.step:hover{color:#666}
.step.sdone{color:var(--acc)}
.step.sact{color:var(--acc-d);border-bottom-color:var(--acc);font-weight:700}
.snum{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.6em;font-weight:700;flex-shrink:0}
.sn-d{background:var(--acc-l);color:var(--acc-d)}
.sn-a{background:var(--acc);color:#fff}
.sn-t{background:#eee;color:#aaa}
.sarr{color:#ddd;font-size:0.67em;padding:0 2px}
.wiz-body{display:grid;grid-template-columns:minmax(0,1fr) 256px}
.wiz-main{padding:22px;border-right:1px solid var(--br);min-height:420px}
.wiz-side{padding:20px;background:var(--bg)}
.wsp{display:none}
.wsp.active{display:block}
.wiz-nav{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12px;margin-top:44px;padding-top:28px;border-top:1px solid var(--br)}

/* ── 画面下部固定アクションバー（次へ／保存する等の主要ボタン） ── */
.fixed-action-bar{position:fixed;left:14.67em;right:0;bottom:0;margin-top:0;padding:14px 24px;border-top:1px solid var(--br);background:#fff;z-index:250;box-shadow:0 -2px 14px rgba(0,0,0,.06)}
.fab-spacer{padding-bottom:92px!important}
/* 資産追加フォームを開いている間、固定フッターの高さ分だけページ全体の下部に余白を確保する */
#pg-assets.assets-form-open{padding-bottom:92px}
/* 固定フッターを持つページ全般：フッター分の余白を確保し、末尾のコンテンツが隠れないようにする */
.page:has(.fixed-action-bar){padding-bottom:92px}
/* ── モーダル内の保存/キャンセル行を下部に追従させる ── */
.modal-actions-sticky{position:sticky;bottom:0;background:#fff;padding-top:10px;margin-top:4px!important}
@media(max-width:767px){
  .fixed-action-bar{left:0;padding:12px 16px}
}
.pb-bg2{height:4px;background:var(--bg3);border-radius:2px;margin-bottom:12px}
.pb-fill2{height:4px;background:var(--acc);border-radius:2px;transition:width .4s}

/* ── OPTION CARDS ── */
.opt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px}
.opt{border:1px solid var(--br);border-radius:9px;padding:12px 8px;cursor:pointer;text-align:center;background:var(--bg);transition:all .15s}
.opt:hover{border-color:var(--br2);background:var(--bg2)}
.opt.sel{border:2px solid var(--acc);background:var(--acc-l)}
.opt-ico{width:28px;height:28px;border-radius:8px;margin:0 auto 7px;display:flex;align-items:center;justify-content:center}
.opt-lbl{font-size:0.8em;font-weight:600;color:#333333}
.opt-sub{font-size:0.6em;color:#888;margin-top:2px}
.opt.sel .opt-lbl{color:var(--acc-d)}
.opt.sel .opt-sub{color:var(--acc)}

/* ── RADIO ── */
.radio-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.ro{display:flex;align-items:center;gap:5px;padding:6px 12px;border:1px solid var(--br2);border-radius:20px;cursor:pointer;font-size:0.8em;font-weight:500;color:#666;transition:all .12s}
.ro:hover{border-color:var(--acc-m)}
.ro.sel{border-color:var(--acc);background:var(--acc-l);color:var(--acc-d);font-weight:700}
.rdot{width:7px;height:7px;border-radius:50%;border:2px solid currentColor;flex-shrink:0}
.ro.sel .rdot{background:var(--acc);border-color:var(--acc)}
.lw-chk-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.lw-chk-col{flex-direction:column}
.lw-chk{padding:6px 13px;border-radius:20px;border:1.5px solid var(--br2);font-size:0.8em;cursor:pointer;background:#fff;transition:all .13s;user-select:none;color:#555}
.lw-chk:hover{border-color:var(--acc-m)}
.lw-chk.sel{background:#FDEAEA;border-color:#A03030;color:#A03030;font-weight:700}

/* ── PREVIEW / SIDE PANEL ── */
.prev-card{background:var(--bg2);border-radius:9px;padding:13px;margin-bottom:14px;border:1px solid var(--br)}
.prev-t{font-size:0.6em;color:#aaa;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:9px}
.prev-i{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--br);font-size:0.73em;gap:8px}
.prev-i:last-child{border-bottom:none}
.pi-l{color:#888;flex-shrink:0}
.pi-v{color:#333333;font-weight:600;text-align:right}
.pi-v.hi{color:var(--acc-d)}
.pi-v.warn{color:#B03030}
.chklist{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.cli{display:flex;align-items:center;gap:7px;font-size:0.8em}
.clchk{width:15px;height:15px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.clchk-on{background:var(--acc)}
.clchk-off{border:2px solid var(--br2)}
.tip{background:#EEEDFB;border:1px solid #8B82D8;border-radius:9px;padding:12px;font-size:0.8em;color:#4A3FAA;line-height:1.65;margin-bottom:12px}
.tip-t{font-size:0.67em;font-weight:700;color:#fff;background:#4A3FAA;border-radius:5px;padding:1px 7px;display:inline-block;margin-bottom:5px}

/* ── MINI FORM ── */
.mini-form{padding:12px 14px;border:1px solid var(--br);border-radius:9px;background:var(--bg2);margin-top:8px}
.btn-add-sm{font-size:0.8em;font-weight:600;padding:7px 13px;background:var(--acc);color:#fff;border-radius:7px;cursor:pointer;border:none;font-family:inherit}
.btn-cancel-sm{font-size:0.8em;font-weight:500;padding:7px 10px;border:1px solid var(--br2);border-radius:7px;cursor:pointer;color:#666;background:var(--bg);font-family:inherit}
.pet-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--br);border-radius:9px;background:var(--bg);margin-bottom:8px}
.pet-ico{width:28px;height:28px;border-radius:8px;background:#FEF6E7;display:flex;align-items:center;justify-content:center;font-size:0.93em;flex-shrink:0}
.pet-nm{font-size:0.8em;font-weight:600;color:#333333}
.pet-tp{font-size:0.67em;color:#888}
.pet-dt{margin-left:auto;font-size:0.8em;color:var(--slate);font-weight:600}
.add-row{display:flex;align-items:center;justify-content:center;padding:9px;border:1px dashed var(--br2);border-radius:9px;font-size:0.8em;font-weight:500;color:#aaa;cursor:pointer;gap:4px;transition:all .15s}
.add-row:hover{border-color:var(--acc-m);color:var(--acc-d);background:var(--acc-l)}
.msg-card{border:1px solid var(--br);border-radius:9px;padding:13px 14px;margin-bottom:8px;background:var(--bg)}
.msg-type-sel{display:flex;gap:5px;margin-bottom:10px}
.mts{font-size:0.73em;padding:4px 10px;border-radius:7px;cursor:pointer;border:1px solid var(--br2);color:#888;font-weight:500;transition:all .1s}
.mts.sel{background:var(--slate-l);color:var(--slate);border-color:var(--slate-m);font-weight:700}
.legal-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--br)}
.legal-row:last-child{border-bottom:none}
.legal-nm{font-size:0.87em;font-weight:600;color:#333333}
.legal-ds{font-size:0.73em;color:#888;margin-top:2px}

/* ── TOAST / BANNER ── */
.toast{display:none;background:var(--acc-l);border:1px solid var(--acc-m);border-radius:9px;padding:11px 14px;font-size:0.8em;font-weight:600;color:var(--acc-d);margin:0 24px 14px;align-items:center;gap:8px}
.toast.show{display:flex}
.done-banner{display:none;background:var(--acc-l);border:1px solid var(--acc-m);border-radius:12px;padding:14px 18px;margin:0 24px 16px;align-items:center;gap:12px}
.done-banner.show{display:flex}

/* ── COUNTDOWN ── */
.cd-bar{width:5px;border-radius:2px 2px 0 0}
.cd-done{background:var(--acc)}
.cd-act{background:#F0A830}
.cd-fut{background:#eee;border:1px solid #ddd}

/* ── MSG ITEMS ── */
.msg-item{padding:13px 16px;border-bottom:1px solid var(--br);cursor:pointer;transition:background .1s}
.msg-item:last-child{border-bottom:none}
.msg-item:hover{background:var(--bg2)}
.mtag{font-size:0.67em;padding:2px 6px;border-radius:5px;font-weight:600}
.mt-v{background:#FDEAEA;color:#B03030}
.mt-l{background:#EEF2F8;color:#3B4F6B}
.mt-n{background:#E8F5EE;color:#2B6B4A}

/* ── SNS CARDS (Digital page) ── */
.sns-card{border:1px solid var(--br);border-radius:10px;margin-bottom:9px;overflow:hidden;background:var(--bg);transition:border-color .12s}
.sns-card:hover{border-color:var(--br2)}
.sns-card.warn{border-color:#F0A830}
.sns-top{padding:12px 14px;display:flex;align-items:center;gap:10px}
.svc-name{font-size:0.87em;font-weight:600;color:#333333}
.svc-handle{font-size:0.73em;color:#888;margin-top:1px}
.pol-row{display:flex;gap:3px}
.pol-o{font-size:0.67em;padding:3px 9px;border-radius:7px;cursor:pointer;border:1px solid var(--br2);color:#888;font-weight:600;transition:all .1s}
.pol-o:hover{background:var(--bg2)}
.pol-del{background:#FDEAEA;color:#B03030;border-color:#E06060}
.pol-mem{background:#EEEDFB;color:#4A3FAA;border-color:#8B82D8}
.pol-inh{background:#EEF2F8;color:#3B4F6B;border-color:#7A9BBF}
.pol-arc{background:#FEF6E7;color:#B8720A;border-color:#F0A830}
.sns-detail{background:var(--bg2);border-top:1px solid var(--br);padding:10px 14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.det-label{font-size:0.67em;color:#aaa;font-weight:700;margin-bottom:2px}
.det-val{font-size:0.8em;color:#333333}
.det-link{font-size:0.8em;color:var(--acc);cursor:pointer}
.type-tag{font-size:0.6em;padding:1px 6px;border-radius:5px;font-weight:700;margin-left:5px}
.tt-sns{background:#EEF2F8;color:#3B4F6B}
.tt-sub{background:#E8F5EE;color:#2B6B4A}
.tt-music{background:#EEEDFB;color:#4A3FAA}
.tt-shop{background:#FEF6E7;color:#B8720A}
.tt-video{background:#FDEAEA;color:#B03030}
.tt-work{background:#F5F4F2;color:#666}
.pw-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--br);border-radius:9px;background:var(--bg);margin-bottom:7px}
.pw-status{margin-left:auto;font-size:0.67em;padding:2px 7px;border-radius:7px;font-weight:700}
.pws-enc{background:#E8F5EE;color:#2B6B4A}
.pws-na{background:#eee;color:#aaa;border:1px dashed #ccc}

/* ── TWO / THREE COL GRIDS ── */
.two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.mb16{margin-bottom:16px}
.mb18{margin-bottom:18px}
.bottom-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:14px}

/* ── TIMELINE ── */
.tl-item{display:flex;gap:10px;margin-bottom:14px}
.tl-item:last-child{margin-bottom:0}
.tl-l{display:flex;flex-direction:column;align-items:center}
.tl-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:2px}
.tl-line{flex:1;width:1px;background:#eee;margin:3px 0}
.td-a{background:#F0A830}.td-r{background:#E06060}.td-b{background:#7A9BBF}
.tl-nm{font-size:0.8em;font-weight:700;color:#333333}
.tl-ds{font-size:0.73em;color:#888;margin-top:1px;line-height:1.5}
.tl-tag{display:inline-block;font-size:0.6em;padding:2px 7px;border-radius:5px;margin-top:4px;font-weight:700}
.tt-a{background:#FEF6E7;color:#B8720A}.tt-r{background:#FDEAEA;color:#B03030}.tt-b{background:#EEF2F8;color:#3B4F6B}

/* ── ACTION LIST ── */
.action-list{display:flex;flex-direction:column;gap:6px}
.action-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:9px;border:1px solid var(--br);cursor:pointer;background:var(--bg);transition:background .1s;font-size:0.8em;font-weight:600;color:#333333}
.action-item:hover{background:var(--bg2)}
.ai-ico{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ai-arr{margin-left:auto;color:#aaa;font-size:0.8em}
.legend{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.leg-item{display:flex;align-items:flex-start;gap:8px;font-size:0.8em;color:#666;line-height:1.4}
.leg-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:3px}
/* ── ASSET SHAKE ── */
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
/* ── MOBILE RESPONSIVE ── */
.mob-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.42);z-index:299}
.mob-overlay.open{display:block}
.mob-topbar{display:none}
@media(max-width:767px){
  .app{flex-direction:column}
  .sidebar{position:fixed;top:0;left:0;height:100%;z-index:300;transform:translateX(-100%);transition:transform .25s ease;width:80vw;max-width:280px}
  .sidebar.open{transform:translateX(0)}
  .main{width:100%;font-size:16px}
  .page{padding:14px}
  .mob-topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg);border-bottom:1px solid var(--br);position:sticky;top:0;z-index:100;flex-shrink:0}
  .mob-hamburger{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px}
  .mob-hamburger span{display:block;width:22px;height:2px;background:#333333;border-radius:2px}
  .mob-title{font-size:1em;font-weight:600;color:#333333;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .steps-bar{gap:0;padding:0 8px}
  .step-item{font-size:0.7em;padding:0 6px}
  .m3,.m4,.m5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sb-footer .user-row{padding:10px 12px}
  .wiz-body{grid-template-columns:1fr}
  .wiz-main{border-right:none;border-bottom:1px solid var(--br);min-height:auto;padding:16px}
  .wiz-side{padding:16px}
  .bottom-grid{grid-template-columns:minmax(0,1fr);overflow:hidden}
  .opt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:1fr}
  /* SNS/サブスクカード: ポリシーボタン行を2行目に */
  .sns-top{flex-wrap:wrap}
  .sns-top>div:last-child{margin-left:0!important;width:100%;padding-top:6px;justify-content:flex-end}
  /* アライアンスグリッド: 1列化 */
  #opt-alliance-grid{grid-template-columns:1fr!important}
  /* DMS checkin バー: ボタンを2行目に */
  .dms-checkin-bar{flex-wrap:wrap}
  .dms-checkin-bar .btn-primary{width:100%;margin-top:10px;text-align:center}
  /* 承継者メールのバッジ被り防止（承継者ページ限定） */
  #pg-inheritor .li-name,#pg-inheritor .li-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* パスワードリストの内容が横にはみ出さないよう制御 */
  .pw-item>div:nth-child(2){flex:1;min-width:0;overflow:hidden}
  .pw-item .li-name,.pw-item .li-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 手続きダッシュボード: 固定5列グリッドが見切れるため1列に積む */
  .proc-hd-row{display:none}
  .proc{grid-template-columns:1fr;row-gap:6px}
  .proc>div:nth-child(2),.proc>div:nth-child(3){display:inline-block;margin-right:10px}
  .proc .hdash-st-sel{width:100%}
}
/* ── PRINT ── */
@media print{
  body>*{display:none!important}
  #adm-print-area{display:block!important;position:static;font-family:sans-serif;color:#111;padding:24px}
  #adm-print-area h1{font-size:1.4em;border-bottom:2px solid #333;padding-bottom:8px;margin-bottom:16px}
  #adm-print-area table{width:100%;border-collapse:collapse;margin-bottom:16px}
  #adm-print-area th,#adm-print-area td{border:1px solid #ccc;padding:6px 10px;font-size:0.85em}
  #adm-print-area th{background:#f3f4f6}
  #adm-print-area .print-footer{margin-top:40px;font-size:0.75em;color:#666;border-top:1px solid #ccc;padding-top:8px}
}

/* ━━ サービス管理 専用スタイル ━━ */

/* ページヘッダー */
.svc-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--br);
  flex-wrap: wrap;
  gap: 12px;
}
.svc-header-left {}
.svc-bc {
  font-size: 0.67em;
  color: var(--acc-m);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.svc-title {
  font-size: 1.47em;
  font-weight: 700;
  color: #333333;
  letter-spacing: -.4px;
  line-height: 1.15;
}
.svc-sub {
  font-size: 0.77em;
  color: #888;
  margin-top: 4px;
}
.svc-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ━━ セクションタイトル ━━ */
.svc-sec-label {
  font-size: 0.67em;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 12px;
}

/* ━━ プランカード ━━ */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 14px;
}
@container main (max-width: 860px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
}
@container main (max-width: 480px) {
  .plan-grid { grid-template-columns: 1fr; }
}

.plan-card {
  background: var(--bg);
  border: 1px solid var(--br);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  transition: box-shadow .18s, border-color .18s;
  cursor: default;
}
.plan-card:hover {
  border-color: var(--br2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.plan-card-accent {
  height: 3px;
  border-radius: 14px 14px 0 0;
}
.plan-card-body {
  padding: 18px 18px 14px;
}
.plan-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.plan-tier-name {
  font-size: 0.73em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.plan-tier-badge {
  font-size: 0.6em;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
}
.plan-price-row {
  margin-bottom: 4px;
}
.plan-price-main {
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: -.5px;
  color: #333333;
  line-height: 1;
}
.plan-price-unit {
  font-size: 0.45em;
  color: #999;
  font-weight: 500;
  margin-left: 2px;
}
.plan-desc {
  font-size: 0.67em;
  color: #999;
  margin-bottom: 14px;
  line-height: 1.5;
}
.plan-divider {
  height: 1px;
  background: var(--br);
  margin-bottom: 12px;
}
.plan-features {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 16px;
}
.plan-feat {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7em;
  color: #555;
  line-height: 1.4;
}
.plan-feat-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.plan-feat.off {
  color: #ccc;
}
.plan-feat.off .plan-feat-dot {
  background: #ddd;
}
.plan-price-edit {
  background: var(--bg2);
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid var(--br);
}
.plan-price-edit-label {
  font-size: 0.6em;
  font-weight: 700;
  color: #aaa;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.plan-price-input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--br2);
  border-radius: 6px;
  padding: 0 9px;
  font-size: 0.8em;
  color: #333333;
  background: var(--bg);
  outline: none;
  font-family: inherit;
  transition: border-color .15s;
}
.plan-price-input:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 2px rgba(43,122,111,0.12);
}

/* ━━ 保存バー ━━ */
.svc-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--acc-l);
  border: 1px solid rgba(43,122,111,0.2);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 10px;
}
.svc-save-hint {
  font-size: 0.73em;
  color: var(--acc-d);
  font-weight: 500;
}
.svc-save-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ━━ 見積もりセクション ━━ */
.svc-quote-wrap {
  background: var(--bg);
  border: 1px solid var(--br);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.svc-quote-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--br);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.svc-quote-title {
  font-size: 0.87em;
  font-weight: 700;
  color: #333333;
}
.svc-quote-body {
  padding: 20px;
}
.svc-quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@container main (max-width: 540px) {
  .svc-quote-grid { grid-template-columns: 1fr; }
  .svc-save-bar { flex-direction: column; align-items: flex-start; }
}
.svc-form-field {}
.svc-field-label {
  font-size: 0.67em;
  font-weight: 700;
  color: #888;
  letter-spacing: .04em;
  margin-bottom: 5px;
}
.svc-field-label span {
  font-size: 0.85em;
  color: #ccc;
  font-weight: 500;
  letter-spacing: 0;
}

/* ━━ プレビュー ━━ */
.svc-preview-wrap {
  display: none;
  margin-top: 14px;
}
.svc-preview-wrap.show {
  display: block;
}
.svc-preview-card {
  background: var(--bg);
  border: 1.5px solid var(--acc-m);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
.svc-preview-content {
  padding: 24px 28px;
}
.svc-preview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ━━ ボタン refined ━━ */
.btn-acc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--acc);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.77em;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .01em;
  transition: background .15s;
}
.btn-acc:hover { background: var(--acc-d); }
.btn-out {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #555;
  border: 1px solid var(--br2);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.77em;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, border-color .15s;
}
.btn-out:hover { background: var(--bg2); border-color: #ccc; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--acc);
  border: 1px solid rgba(43,122,111,0.35);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.77em;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.btn-ghost:hover { background: var(--acc-l); }

/* ゼウス公式CSS（zeus_token.css）の見た目調整。payment/index.html と同じ理由・同じ内容
   （常に新規カード入力のため「登録済みカードを使う」選択肢は非表示にする 等） */
#zeus_token_card_info_area { margin-bottom: 8px; }
label[for="zeus_token_action_type_quick"] { display: none; }
label[for="zeus_token_action_type_new"] { display: none; }
#zeus_token_action_type_quick { display: none; }
#zeus_token_action_type_new { display: none; }
#zeus_registerd_card_area { display: none; }
#zeus_new_card_area { margin: 0 !important; }
#zeus_new_card_area label { display: block; margin: 0 0 5px; font-size: .82rem; font-weight: 600; color: #555; }
#zeus_token_card_number,
#zeus_token_card_name,
#zeus_token_card_cvv,
#zeus_token_card_cvv_for_registerd_card {
  width: 100% !important;
  box-sizing: border-box;
}
#zeus_token_card_expires_month, #zeus_token_card_expires_year { max-width: 90px; }
#3dscontainer { margin: 16px 0; }
#3dscontainer iframe { width: 100%; border: 0; }

/* ══════════════════════════════════════════════
   サイドメニュー（画面分割にあわせたデザイン）
   本人モード：白背景・緑アクセント／引継ぎモード：濃紺背景・白文字
   ══════════════════════════════════════════════ */
.sidebar{background:#fff;border-right:1px solid var(--br)}
.sidebar.heir{background:#1B2640}
.logo-area{padding:22px 34px 14px;border-bottom:none}
.logo-row{display:block;text-decoration:none}
.logo-ico img{width:100%;height:auto;display:block;object-fit:contain}
.sidebar.heir .logo-ico img{filter:brightness(0) invert(1)}
.mode-toggle{padding:18px 18px 10px}
.mode-toggle-inner{background:#EEF0F3;border-radius:22px;padding:3px}
.sidebar.heir .mode-toggle-inner{background:rgba(255,255,255,0.10)}
.mt-btn{font-size:0.72em;font-weight:700;padding:7px 0;border-radius:18px;color:#8A8F98}
.mt-btn.sel-own{background:#fff;color:#333333;box-shadow:0 1px 3px rgba(0,0,0,0.12)}
.mt-btn.sel-heir{background:#fff;color:#1B2640;box-shadow:0 1px 3px rgba(0,0,0,0.25)}
.sidebar.heir .mt-btn:not(.sel-heir){color:rgba(255,255,255,0.92)}
.sb-scroll{padding:0 0 10px}
.nav-section{padding:12px 18px 0}
.nav-label{font-size:0.62em;font-weight:700;letter-spacing:.06em;color:#8A8F98;padding:0 2px;margin-bottom:2px;text-transform:none}
.sidebar.heir .nav-label{color:rgba(255,255,255,0.62)}
.nav-lock{font-size:0.95em;color:#bbb;font-weight:600;margin-left:4px}
.nav-item{display:flex;align-items:center;gap:10px;padding:11px 4px 11px 6px;border-radius:0;margin:0;font-size:0.8em;font-weight:700;color:#3A3F47;border-bottom:1px solid #E6E8EC;position:relative}
.nav-item .nav-ico{display:flex;align-items:center;justify-content:center;width:22px;flex-shrink:0;color:#4A4F57}
.nav-item .nav-txt{flex:1;min-width:0}
.nav-item .nav-chev{flex-shrink:0;color:var(--acc)}
.nav-item .nb{margin-left:0}
.sidebar.own .nav-item:hover{background:#F3F8F7;color:var(--acc-d)}
.sidebar.own .nav-item.active{background:#E8F5F2;color:var(--acc-d)}
.sidebar.own .nav-item.active .nav-ico{color:var(--acc)}
.nav-item.nav-home{border-bottom:none;border-radius:4px;padding:12px 10px;color:var(--acc-d)}
.nav-item.nav-home .nav-ico{color:var(--acc)}
.sidebar.own .nav-item.nav-home{background:#E8F5F2}
.sidebar.heir .nav-item{color:#fff;border-bottom-color:rgba(255,255,255,0.18)}
.sidebar.heir .nav-item .nav-ico,.sidebar.heir .nav-item .nav-chev{color:#fff}
.sidebar.heir .nav-item:hover{background:rgba(255,255,255,0.08);color:#fff}
.sidebar.heir .nav-item.active{background:rgba(255,255,255,0.22);color:#fff}
.sb-footer{padding:10px 18px 14px;border-top:1px solid #E6E8EC}
.sidebar.heir .sb-footer{border-color:rgba(255,255,255,0.22)}
.sb-footer-links{display:flex;flex-direction:column;gap:0;padding:4px 0 8px;margin-bottom:6px;border-bottom:1px solid #E6E8EC}
.sidebar.heir .sb-footer-links{border-color:rgba(255,255,255,0.22)}
.sb-footer-links a{display:flex;align-items:center;justify-content:space-between;font-size:0.68em;font-weight:700;color:#3A3F47;padding:6px 6px;text-decoration:none;cursor:pointer}
.sb-footer-links a .nav-chev{color:var(--acc)}
.sb-footer-links a:hover{color:var(--acc-d);text-decoration:none}
.sidebar.heir .sb-footer-links a,.sidebar.heir .sb-footer-links a .nav-chev{color:#fff}
.settings-btn{gap:9px;padding:7px 6px;font-size:0.7em;font-weight:700;color:#3A3F47;margin-bottom:0;text-decoration:none}
.settings-btn svg{width:17px;height:17px}
.sidebar.heir .settings-btn{color:#fff}
.user-row{padding:8px 6px;gap:10px;cursor:default}
.sidebar.heir .u-name{color:#fff}
.sidebar.heir .u-role{color:rgba(255,255,255,0.75)}
.u-name{font-size:0.78em;font-weight:700}
.ava{width:34px;height:34px}

/* ══════════════════════════════════════════════
   上部ヘッダー（ロゴ・お知らせ・ヘルプ・設定・ユーザー）
   ══════════════════════════════════════════════ */
:root{--ml-hd-h:72px}
/* z-index は目次バー（.bi-toc-bar：150）より上にする。下げるとログアウトのメニューが目次の下に隠れる */
.ml-header{display:flex;align-items:center;justify-content:space-between;height:var(--ml-hd-h);padding:0 36px;background:#fff;border-bottom:1px solid #E6E8EC;flex-shrink:0;position:relative;z-index:200}
.ml-hd-logo{display:block;height:48px}
.ml-hd-logo img{height:100%;width:auto;display:block}
.ml-hd-nav{display:flex;align-items:center;gap:26px}
.ml-hd-link{display:flex;align-items:center;gap:7px;font-size:0.75em;font-weight:700;color:#3A3F47;text-decoration:none;white-space:nowrap}
.ml-hd-link img{width:20px;height:20px;display:block}
.ml-hd-link:hover{color:var(--acc-d);text-decoration:none}
.ml-hd-account{position:relative;margin-left:6px}
.ml-hd-user{display:flex;align-items:center;gap:9px;padding:4px 6px;margin:-4px -6px;border:none;border-radius:6px;background:none;font-family:inherit;font-size:inherit;cursor:pointer}
.ml-hd-user:hover,.ml-hd-user[aria-expanded="true"]{background:#F3F8F7}
.ml-hd-menu{position:absolute;top:calc(100% + 10px);right:-6px;min-width:160px;padding:6px;background:#fff;border:1px solid #E6E8EC;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.12);z-index:50}
.ml-hd-menu[hidden]{display:none}
.ml-hd-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:9px 10px;border:none;border-radius:6px;background:none;font-family:inherit;font-size:0.72em;font-weight:700;color:#3A3F47;text-align:left;cursor:pointer}
.ml-hd-menu-item svg{width:17px;height:17px}
.ml-hd-menu-item:hover{background:#F3F8F7;color:var(--acc-d)}
.ml-hd-user .u-name{font-size:0.75em;font-weight:700;color:#3A3F47;white-space:nowrap}
.ml-plan-badge{display:inline-block;font-size:0.65em;font-weight:700;color:#fff;background:#8A8F98;padding:2px 7px;border-radius:2px;line-height:1.4;white-space:nowrap}
.ml-plan-badge.plan-gold{background:#94743A}
.ml-plan-badge.plan-silver{background:#8C949C}
.ml-plan-badge.plan-bronze{background:#9C6A45}
body.ml-has-header .app{height:calc(100vh - var(--ml-hd-h));height:calc(100dvh - var(--ml-hd-h))}

/* ── 本人モードのメニュー（大項目＞中項目のアコーディオン） ── */
@media(min-width:768px){.sidebar{width:280px}}
.nav-tree{padding:4px 18px 0}
.nav-tree .nav-item,.nav-grp-hd{display:flex;align-items:center;gap:10px;width:100%;padding:16px 4px 16px 6px;margin:0;font-size:17px;line-height:24px;font-weight:700;color:#3A3F47;border:none;border-bottom:1px solid #E6E8EC;border-radius:0;background:none;font-family:inherit;text-align:left;cursor:pointer;text-decoration:none}
.nav-tree .nav-txt{flex:1;min-width:0}
.nav-tree .nav-ico{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0}
.nav-tree .nav-ico img{max-width:24px;max-height:24px;display:block}
.nav-tree .nav-ico .ico-on{display:none}
.nav-tree .nav-item.active .ico-off,.nav-grp.has-active>.nav-grp-hd .ico-off{display:none}
.nav-tree .nav-item.active .ico-on,.nav-grp.has-active>.nav-grp-hd .ico-on{display:block}
.nav-grp-hd:hover{background:#F3F8F7;color:var(--acc-d)}
.nav-pm{position:relative;width:14px;height:14px;flex-shrink:0;margin-right:1px}
.nav-pm::before,.nav-pm::after{content:'';position:absolute;left:1px;right:1px;top:50%;height:2px;margin-top:-1px;background:var(--acc);border-radius:1px}
.nav-pm::after{transform:rotate(90deg);transition:transform .15s}
.nav-grp.open .nav-pm::after{transform:rotate(0)}
.nav-grp-body{display:none;border-bottom:1px solid #E6E8EC}
.nav-grp.open .nav-grp-body{display:block}
.nav-grp.open>.nav-grp-hd{border-bottom:none}
.nav-tree .nav-item.nav-sub{padding:13px 4px 13px 20px;font-size:16px;border-bottom:none}
.sidebar.own .nav-tree .nav-item.active{background:#E8F5F2;color:var(--acc-d)}

/* サイドメニュー下部 */
/* お問い合わせ：メニュー最下行（高さ 57px）の下に 1 項目ぶん（57px）空ける。PC は上下の線なし */
.sb-footer-links.sb-contact{margin:57px 18px 0;padding:0;border:none}
.sidebar.own .sb-footer-links.sb-contact a:hover{background:#F3F8F7;color:var(--acc-d)}
.sidebar.heir .sb-footer-links.sb-contact a:hover{background:rgba(255,255,255,0.08);color:#fff}
.sb-mob-only .sb-footer-links.sb-contact{margin:57px 0 0}
.sb-footer{display:none}
.sb-mob-only{display:none}
.sb-mob-links{display:flex;flex-direction:column;padding:4px 0 6px}
.sb-mob-links .ml-hd-link{padding:8px 6px;font-size:0.7em}
.sidebar.heir .sb-mob-links .ml-hd-link,.sidebar.heir .sb-mob-only .u-name{color:#fff}
.sidebar.heir .sb-mob-links .ml-hd-link img{filter:brightness(0) invert(1)}
.sb-mob-only .user-row .u-name{font-size:0.72em}
@media(max-width:767px){
  .ml-header{display:none}
  body.ml-has-header .app{height:100vh;height:100dvh}
  .sb-mob-only{display:block}
  .sb-footer{display:block;border-top:none}
  /* SP のお問い合わせはログアウトの下（.sb-mob-only 内）に出す */
  .sb-scroll .sb-footer-links.sb-contact{display:none}
  /* ドロワーは下部（お知らせ・ユーザー等）まで含めて全体をスクロールさせる */
  .sidebar{overflow-y:auto}
  .sidebar .sb-scroll{flex:none;overflow:visible}
}

/* ── マイページ：登録項目へのリンク ── */
.ml-link-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.ml-link-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg);border:1px solid var(--br);border-radius:12px;text-decoration:none;color:#333333;transition:.15s}
.ml-link-card:hover{border-color:var(--acc-m);box-shadow:0 2px 10px rgba(43,122,111,0.10)}
.ml-link-ico{width:38px;height:38px;border-radius:10px;background:var(--acc-l);color:var(--acc);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ml-link-body{display:flex;flex-direction:column;min-width:0}
.ml-link-t{font-size:0.85em;font-weight:700}
.ml-link-s{font-size:0.68em;color:#888;margin-top:2px;line-height:1.4}

/* ── 準備中の画面 ── */
.ml-coming{padding:56px 24px;text-align:center}
.ml-coming-ico{font-size:2em;margin-bottom:10px}
.ml-coming-t{font-size:1em;font-weight:700;color:#333333;margin-bottom:6px}
.ml-coming-s{font-size:0.78em;color:#888;line-height:1.7}

/* ── API ステータスバー（全画面共通） ── */
.api-status-bar{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#2B7A6F;color:#fff;padding:8px 20px;border-radius:20px;font-size:.78rem;font-weight:600;z-index:8000;opacity:0;transition:opacity .3s;pointer-events:none}
.api-status-bar.show{opacity:1}
@media(max-width:767px){
  .sidebar{width:80vw;max-width:300px}
}

/* ── 入力系ページ（基本情報ほか bi-panel の画面） ──
   余白の基準：大項目の間 40px／小見出しの上 28px・下 12px／入力欄の間 16px */
.bi-panel{max-width:1160px;margin:0 auto}
.bi-head{padding:24px 0 20px}
.bi-title{font-size:1.9em;font-weight:700;color:#333333;margin:0 0 16px;letter-spacing:.02em}
.bi-desc{font-size:0.9em;color:#333;line-height:1.8;margin:0}
/* 目次：画面上部に追従。タブ列ははみ出したら横スクロールし、下の緑のつまみで位置を示す */
.bi-toc-bar{position:sticky;top:0;z-index:150;background:var(--bg3);padding:8px 0 16px;margin-top:4px}
.bi-toc{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:2px 0 10px}
.bi-toc::-webkit-scrollbar{display:none}
.bi-toc a{display:inline-flex;align-items:center;gap:6px;flex-shrink:0;font-size:16px;font-weight:700;color:#333333;background:var(--bg);border:1.5px solid #333333;border-radius:999px;padding:6px 10px 6px 12px;text-decoration:none;white-space:nowrap;transition:border-color .15s,color .15s,background-color .15s;-webkit-user-drag:none}
.bi-toc.is-dragging,.bi-toc.is-dragging a{cursor:grabbing;user-select:none}
.bi-toc a:hover{border-color:var(--acc);color:var(--acc-d)}
.bi-toc a.is-done{border-color:var(--acc);color:var(--acc-d)}
.bi-toc a.is-current{background:var(--acc-l)}
.bi-toc-chk{position:relative;display:inline-block;width:14px;height:14px;border:1.5px solid currentColor;border-radius:2px;box-sizing:border-box;flex-shrink:0}
.bi-toc a.is-done .bi-toc-chk{background:var(--acc);border-color:var(--acc)}
.bi-toc a.is-done .bi-toc-chk::after{content:'';position:absolute;left:3.5px;top:0.5px;width:3px;height:7px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg)}
.bi-toc-track{position:relative;height:4px;background:#D6D3CC;border-radius:2px;overflow:hidden}
.bi-toc-track[hidden]{display:none}
.bi-toc-thumb{position:absolute;top:0;bottom:0;left:0;background:var(--acc);border-radius:2px}
.bi-body{background:var(--bg);padding:16px 48px 64px}
.bi-sec{padding-top:40px;scroll-margin-top:96px}
.bi-sec + .bi-sec{border-top:1px solid var(--br2);margin-top:40px}
.bi-sec-title{font-size:1.3em;font-weight:700;color:var(--acc);margin:0 0 20px}
.bi-label{background:var(--bg3);font-size:0.85em;font-weight:700;color:#333333;padding:9px 12px;margin:28px 0 12px}
.bi-sec-title + .bi-label{margin-top:0}
.bi-panel .fl{font-size:0.8em;color:#333333;margin-bottom:8px}
/* 必須項目の印（項目名の横の赤文字） */
.req-mark{display:inline-block;color:var(--red);font-size:0.85em;font-weight:700;margin-left:8px;white-space:nowrap}
.bi-entry-req{font-size:0.85em;color:var(--red);font-weight:700;margin-top:2px}
.bi-panel .fi{height:48px;font-size:0.85em;border-radius:2px;padding:0 12px}
/* 複数行入力は5行分見えるように */
.bi-panel .fi.bi-ta,.bi-panel .fta,.bi-panel textarea.fi{height:auto;min-height:calc(1.6em * 5 + 20px);padding:10px 12px;line-height:1.6;resize:vertical}
.bi-row{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
/* 姓・名のようにセットの欄だけは横に並べる */
.bi-row-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
.bi-field{margin-bottom:16px}
.bi-field:last-child{margin-bottom:0}
/* 横並びの入力欄の直後の1行入力は、他の入力欄と同じ間隔をあける */
.bi-row + .bi-field{margin-top:16px}
/* 入力欄の中のエラー表示は、エラーがないときは場所をとらない */
.bi-field > .bi-err:empty{display:none}
.bi-half{max-width:480px}
.bi-panel .fi.bi-postal{width:190px}
.bi-postal-row{display:flex;align-items:center;gap:8px}
.bi-panel .bi-postal-row .fi.bi-postal{flex:0 1 190px;min-width:0}
.bi-postal-btn{flex:none;font-size:0.8em;font-weight:600;color:var(--acc-d);background:var(--bg);border:1px solid var(--acc);border-radius:2px;padding:0 14px;height:48px;cursor:pointer;font-family:inherit;white-space:nowrap}
.bi-postal-btn:hover{background:var(--acc-l)}
.bi-postal-btn:disabled{opacity:0.6;cursor:default}
.bi-dob{display:flex;align-items:center;gap:10px;font-size:0.85em}
.bi-panel .bi-dob .fi{width:60px;font-size:1em}
.bi-panel .bi-dob #gd-dob-year{width:106px}
.bi-radio{display:flex;gap:18px;padding:6px 0;font-size:0.85em}
.bi-radio label{display:flex;align-items:center;gap:8px;cursor:pointer}
.bi-radio input{accent-color:var(--acc);width:17px;height:17px;margin:0}
.bi-note{font-size:0.72em;color:#888;margin-top:2px}
.bi-rep .bi-label{margin:16px 0 12px}
.bi-rep-head + .bi-label{margin-top:0}
.bi-rep-status{display:flex;align-items:center;gap:8px}
.bi-rep-actions{display:flex;align-items:center;gap:8px}
.bi-err{font-size:0.72em;color:#B03030;margin-top:4px;min-height:1em}
/* 繰り返し項目：枠で囲まず、2件目以降を点線で区切る */
.bi-rep{position:relative;padding:0 0 16px}
.bi-rep + .bi-rep{border-top:1px dotted #B5B1A8;padding-top:16px}
.bi-rep-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:0.8em;font-weight:700;color:var(--acc-d)}
.bi-rep-head:empty{display:none}
.bi-rep-tools{display:flex;justify-content:flex-end;margin-top:12px}
.bi-rep-tools .bi-rep-del{display:inline-flex;align-items:center;gap:6px;font-size:0.75em;font-weight:700;color:#B03030;border:none;border-bottom:1.5px solid currentColor;border-radius:0;padding:2px 0}
.bi-rep-tools .bi-rep-del:hover{background:none;color:#8A2020}
.bi-rep-del{font-size:0.72em;color:#B03030;background:none;border:1px solid #E6B8B8;border-radius:6px;padding:3px 10px;cursor:pointer;font-family:inherit}
.bi-rep-head .bi-rep-del{font-size:0.9em}
.bi-rep-del:hover{background:#FBEDED}
.bi-rep .bi-wide,.bi-entry-form .bi-wide{grid-column:1 / -1}
/* 学歴・職歴の期間（年月〜年月） */
.bi-period{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:0.85em;margin-bottom:16px}
.bi-panel .bi-period .fi{width:60px;font-size:1em}
.bi-panel .bi-period .bi-period-year{width:96px}
.bi-period-part{display:inline-flex;align-items:center;gap:10px}
.bi-period-sep{margin:0 4px}
.bi-row .bi-period{margin-bottom:0}
.bi-period-old{margin-top:6px}
.bi-add{display:flex;align-items:center;justify-content:center;gap:6px;font-size:0.8em;font-weight:600;color:var(--acc-d);background:var(--bg);border:1px dotted var(--acc);border-radius:2px;padding:12px 16px;cursor:pointer;width:100%;max-width:560px;margin:4px auto 0;font-family:inherit}
.bi-add:hover{background:var(--acc-l)}
/* 一覧で登録する項目（勤務先・これまでの住所・学歴・職歴）：登録済みは1行ずつ表示し、「編集」で入力欄を開く */
.bi-entry{display:flex;align-items:center;gap:12px;border:1px solid var(--br2);border-radius:2px;padding:14px 16px;margin-bottom:8px;background:var(--bg)}
.bi-entry.is-editing{display:block;padding:20px 16px 16px}
.bi-entry-body{flex:1;min-width:0;font-size:0.8em;color:#333333;line-height:1.6}
.bi-entry-main{word-break:break-word}
.bi-entry-sub{font-size:0.9em;color:#555;word-break:break-word}
.bi-entry-line{display:flex;flex-wrap:wrap;column-gap:24px}
.bi-entry-period{white-space:nowrap}
.bi-entry-name{word-break:break-word}
.bi-entry-edit{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;font-size:0.72em;font-weight:700;color:#333333;background:var(--bg);border:1px solid #C9C6BF;border-radius:2px;padding:5px 10px;cursor:pointer;font-family:inherit}
.bi-entry-edit:hover{background:var(--bg3)}
.rep-entry-chk{display:flex;align-items:center;flex-shrink:0;margin:-14px -6px -14px -16px;padding:14px 6px 14px 16px;cursor:pointer}
.rep-entry-chk input{accent-color:var(--acc);width:17px;height:17px;margin:0;cursor:pointer}
.rep-chk-note{display:flex;align-items:center;gap:6px;font-size:0.78em;margin:0 0 12px}
.rep-chk-icon{display:inline-block;width:13px;height:13px;border:1.5px solid #333333;border-radius:2px;flex-shrink:0}
.bi-entry-split{display:flex;align-items:baseline;gap:0.8em}
.bi-entry-trunc{min-width:0;word-break:break-word}
.bi-entry-tail{flex-shrink:0;white-space:nowrap}
/* スマホ：一覧の行は1段目に要約、2段目にボタン。長い文字は1行で「…」にする */
@media(max-width:767px){
  .bi-entry:not(.is-editing){flex-wrap:wrap;row-gap:0}
  .bi-entry:not(.is-editing)::after{content:'';flex-basis:100%;order:1}
  .bi-entry:not(.is-editing) .bi-entry-edit{order:2;margin-top:10px;min-width:120px;justify-content:center;padding:7px 14px}
  .bi-entry-main,div.bi-entry-sub,.bi-entry-trunc,.bi-entry-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bi-entry-line{flex-wrap:nowrap;min-width:0}
  .bi-entry-period{flex-shrink:0}
  .bi-entry-name{min-width:0}
  .rep-entry-chk{margin:-8px -6px -8px -16px;padding:8px 6px 8px 16px}
}
.bi-entry-form .bi-err:empty{display:none}
.bi-entry-btns{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:16px}
.bi-entry-btns button{font-family:inherit;cursor:pointer}
.bi-entry-cancel,.bi-entry-ok{width:200px;max-width:calc(50% - 6px);height:44px;border-radius:2px;font-size:0.8em;font-weight:700}
.bi-entry-cancel{background:#E6E4DF;color:#333333;border:none}
.bi-entry-cancel:hover{background:#D9D6CF}
.bi-entry-ok{background:var(--acc);color:#fff;border:none}
.bi-entry-ok:hover{background:var(--acc-d)}
.bi-entry-btns .bi-rep-del{display:inline-flex;align-items:center;gap:6px;font-size:0.75em;font-weight:700;color:#B03030;border:none;border-bottom:1.5px solid currentColor;border-radius:0;padding:2px 0;margin-left:8px}
.bi-entry-btns .bi-rep-del:hover{background:none;color:#8A2020}
.bi-entry + .bi-add,.rep-list + .bi-add{margin-top:12px}
.bi-add.is-hidden{display:none}
@media(max-width:767px){
  .bi-entry-btns .bi-rep-del{flex-basis:100%;justify-content:center;border-bottom:none;margin-left:0}
}
.bi-toast{position:fixed;left:50%;bottom:104px;transform:translateX(-50%);z-index:260;background:#1DB79A;color:#fff;border-radius:8px;padding:10px 16px;font-size:0.83em;box-shadow:0 4px 16px rgba(0,0,0,.15);max-width:calc(100vw - 32px)}
.bi-actions{display:flex;justify-content:center;margin-top:48px}
.bi-next{position:relative;width:386px;max-width:100%;height:62px;background:var(--acc);color:#fff;border:none;border-radius:2px;font-size:0.95em;font-weight:700;letter-spacing:.04em;cursor:pointer;font-family:inherit;transition:background .15s}
.bi-next:hover{background:var(--acc-d)}
.bi-next-arrow{position:absolute;right:28px;top:50%;width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;transform:translateY(-50%) rotate(45deg)}
/* 画面下部に追従する保存バー（下端の「保存して次の項目へ」が見えている間は隠す） */
.bi-savebar{position:sticky;bottom:0;z-index:240;display:flex;justify-content:center;margin:24px -24px -24px;padding:16px 24px;background:rgba(51,51,51,.85);transition:opacity .2s,visibility .2s}
.bi-savebar.is-hidden{opacity:0;visibility:hidden}
.bi-save{width:520px;max-width:100%;height:48px;background:var(--acc);color:#fff;border:none;border-radius:2px;font-size:0.85em;font-weight:700;letter-spacing:.04em;cursor:pointer;font-family:inherit;transition:background .15s}
.bi-save:hover{background:var(--acc-d)}
/* 削除の確認ポップアップ */
.ml-del-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeIn .15s ease}
.ml-del-dialog{position:relative;width:500px;max-width:100%;max-height:calc(100vh - 32px);overflow-y:auto;background:var(--bg);border-radius:12px;padding:32px 32px 28px;box-shadow:0 20px 60px rgba(0,0,0,.25);text-align:center;font-size:20px}
.ml-del-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border:none;background:none;font-size:1.3em;line-height:1;color:#555;cursor:pointer;border-radius:50%}
.ml-del-x:hover{background:var(--bg3)}
.ml-del-ico{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:#FBE4E2;color:#B03030;display:flex;align-items:center;justify-content:center}
.ml-del-title{font-size:1.05em;font-weight:700;color:#333333;margin-bottom:20px}
.ml-del-sum{background:#F7F6F2;border:1px solid var(--br);border-radius:6px;padding:14px 18px;text-align:left;margin-bottom:20px}
.ml-del-sub{font-size:0.7em;color:#555;margin-bottom:4px}
.ml-del-main{font-size:0.85em;font-weight:700;color:#333333;word-break:break-word}
.ml-del-msg{font-size:0.75em;color:#555;line-height:1.8;margin:0 0 24px}
.ml-del-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ml-del-btns button{height:56px;border-radius:4px;font-size:0.85em;font-weight:700;cursor:pointer;font-family:inherit}
.ml-del-cancel{background:var(--bg);color:#333333;border:1.5px solid #C9C6BF}
.ml-del-cancel:hover{background:var(--bg3)}
.ml-del-ok{background:#B3261E;color:#fff;border:none}
.ml-del-ok:hover{background:#8F1E18}
@media(max-width:767px){
  .ml-del-dialog{padding:28px 20px 20px;font-size:16px}
  .ml-del-btns button{height:48px}
}
.page:not(:has(.bi-savebar)) .bi-toast{bottom:24px}
@media(max-width:767px){
  .bi-sec{scroll-margin-top:80px}
  .bi-savebar{margin:24px -14px -14px;padding:12px 14px}
  .bi-toast{bottom:88px}
}
/* モバイルの下部メニュー：通常は隠し、上へスクロールし戻したとき（body.mob-bnav-on）に保存バーの下へ出す */
.mob-bnav{display:none}
@media(max-width:767px){
  :root{--mob-bnav-h:64px}
  /* 最下部で内容が隠れないよう下部メニューぶん空ける（padding だと sticky の保存バーまで持ち上がるため要素で空ける） */
  .main::after{content:'';display:block;height:var(--mob-bnav-h)}
  .mob-bnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:245;height:calc(var(--mob-bnav-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:#fff;box-shadow:0 -2px 14px rgba(0,0,0,.08);transform:translateY(100%);visibility:hidden;transition:transform .2s ease,visibility .2s}
  body.mob-bnav-on .mob-bnav{transform:translateY(0);visibility:visible}
  .mob-bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;border:none;background:none;font-family:inherit;font-size:11px;font-weight:700;color:#333333;text-decoration:none;cursor:pointer}
  .mob-bnav-item svg{width:26px;height:26px}
  .mob-bnav-item.active{color:var(--acc)}
  .bi-savebar{transition:opacity .2s,visibility .2s,bottom .2s ease}
  body.mob-bnav-on .bi-savebar{bottom:var(--mob-bnav-h)}
  body.mob-bnav-on .bi-toast{bottom:calc(88px + var(--mob-bnav-h))}
  body.mob-bnav-on .page:not(:has(.bi-savebar)) .bi-toast{bottom:calc(24px + var(--mob-bnav-h))}
}
/* 新デザインを他の登録ページ（葬儀・資産・サブスク/SNS・見守り・メッセージ・日記）にも適用するための補助 */
.bi-label-sub{font-size:0.85em;font-weight:400;color:#888}
.bi-panel .fsel{height:48px;font-size:0.85em;border-radius:2px;padding:0 12px}
.bi-panel .fta{font-size:0.85em;border-radius:2px}
.bi-panel .form2{gap:16px;margin-bottom:16px}
.bi-panel .form1{margin-bottom:16px}
.bi-panel .radio-row{margin-bottom:0;padding:2px 0}
.bi-panel .bi-field .radio-row{margin-bottom:10px}
.bi-panel .opt-grid{margin-bottom:16px}
.bi-panel .lw-chk-grid{margin-bottom:0}
.bi-panel .mini-form{background:var(--bg);border-radius:6px;padding:16px;margin:12px 0}
.bi-toast.fn-toast{display:none}
.bi-toast.fn-toast.show{display:block}
.bi-metrics{margin:24px 0 0}
.bi-count{font-size:0.75em;color:#888;margin:-12px 0 12px}
.bi-count:empty{display:none}
.bi-list{border:1px solid var(--br);border-radius:6px;margin-bottom:12px;overflow:hidden}
.bi-list:empty{display:none}
.bi-form{margin-top:12px}
.bi-form-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.bi-total{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--br)}
.bi-total-l{font-size:0.87em;font-weight:700;color:#333333}
.bi-total-v{font-size:1.47em;font-weight:700;color:var(--acc-d)}
.bi-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer}
.bi-setting{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.bi-setting .bi-note{flex:1;min-width:200px;font-size:0.8em;margin:0}
.bi-panel .bottom-grid{grid-template-columns:minmax(0,1fr) 280px;gap:24px}
@container main (max-width: 720px){
  .bi-panel .bottom-grid{grid-template-columns:minmax(0,1fr)}
}
@container main (max-width: 720px){
  .bi-head{padding:16px 0 14px}
  .bi-toc-bar{padding:6px 0 12px}
  .bi-body{padding:8px 18px 40px}
  .bi-sec{padding-top:28px}
  .bi-sec + .bi-sec{margin-top:28px}
  .bi-row-pair{grid-template-columns:1fr}
  .bi-panel .bi-period .fi{width:48px;padding:0 8px}
  .bi-panel .bi-period .bi-period-year{width:72px}
  .bi-period,.bi-period-part{gap:6px}
  .bi-next{width:100%}
}

/* ── 繰り返しカードの入力画面（家族・知人、お金・資産） ── */
.rep-tools{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:16px}
.rep-tools .bi-note{flex:1;min-width:220px;font-size:0.78em;line-height:1.7;margin:0}
.rep-tools .bi-note a{color:var(--acc);font-weight:600}
.rep-tool-btn{font-size:0.78em;font-weight:600;color:var(--acc-d);background:var(--bg);border:1px solid var(--acc-m);border-radius:6px;padding:9px 16px;cursor:pointer;font-family:inherit;white-space:nowrap}
.rep-tool-btn:hover{background:var(--acc-l)}
.bi-panel .fi.rep-sel{width:100%;background:var(--bg)}
.bi-panel .fi.rep-other{margin-top:8px}
.rep-sel-other{display:flex;align-items:center;gap:8px}
.bi-panel .rep-sel-other .fi{flex:1;min-width:0}
.bi-panel .rep-sel-other .fi.rep-other{margin-top:0}
.rep-chks{display:flex;flex-wrap:wrap;gap:10px 20px;padding:6px 0}
.rep-chk{display:inline-flex;align-items:center;gap:8px;font-size:0.85em;cursor:pointer}
.rep-chk input{accent-color:var(--acc);width:17px;height:17px;margin:0}
.bi-panel .bi-dob .rep-ymd-year{width:106px}
.rep-empty{padding:20px;font-size:0.8em;color:#888;text-align:center;border:1px dashed var(--br2);border-radius:6px;margin-bottom:12px}
/* 親族表（家系図の枠にクリックで人を入れる） */
.ft-tools{display:flex;gap:8px;flex-wrap:wrap}
.ft-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:10px;font-size:0.8em}
.ft-legend-line{font-size:0.8em;color:#888;margin-left:6px}
.ft-legend-line::before{content:"";display:inline-block;width:22px;border-top:1.5px dashed #9AA5AE;vertical-align:middle;margin-right:6px}
.ft-zoom-btn{margin-left:auto;padding:7px 14px}
.ft-wrap{overflow:hidden;border:1px solid var(--br);border-radius:6px;background:var(--bg2)}
.ft-wrap.ft-zoomed{overflow:auto;max-height:78vh;-webkit-overflow-scrolling:touch}
.ft-stage{position:relative;overflow:hidden}
.ft-canvas{position:absolute;left:0;top:0;transform-origin:0 0}
.ft-lines{position:absolute;left:0;top:0;pointer-events:none}
.ft-line{fill:none;stroke:#9AA5AE;stroke-width:1.5}
.ft-line-inlaw{stroke-dasharray:4 3}
.ft-row-label{position:absolute;left:0;width:64px;display:flex;align-items:center;justify-content:center;font-size:0.62em;font-weight:700;color:#999;letter-spacing:.04em;writing-mode:vertical-rl;border-right:1px dashed var(--br2)}
.ft-slot{position:absolute;display:flex;flex-direction:column;gap:6px}
.ft-slot-head{height:18px;display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:0}
.ft-slot-label{font-size:0.66em;font-weight:700;color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ft-kin{display:inline-block;flex-shrink:0;padding:1px 6px;border-radius:999px;font-size:0.6em;font-weight:700;line-height:1.5;white-space:nowrap;border:1px solid transparent}
.ft-legend .ft-kin{font-size:0.75em}
.ft-kin-self{background:var(--acc);color:#fff}
.ft-kin-spouse{background:#F3EDF9;color:#6A3F96;border-color:#DCCBEC}
.ft-kin-k1{background:#E3F1FB;color:#1F5F8B;border-color:#BCDCF1}
.ft-kin-k2{background:#E8F5EE;color:#2B6B4A;border-color:#BFE2CE}
.ft-kin-k3{background:#FEF6E7;color:#8A5608;border-color:#F3D9A4}
.ft-kin-k4{background:#FDEDEA;color:#9A3B2C;border-color:#F2C7BF}
.ft-kin-in1,.ft-kin-in2{background:#F0EEE9;color:#666;border-color:#DDD8CE}
.ft-card{box-sizing:border-box;width:100%;font-size:inherit;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;padding:6px 10px;background:var(--bg);border:1px solid var(--br2);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.06);font-family:inherit;text-align:left;cursor:pointer;position:relative;z-index:1}
.ft-card:hover{border-color:var(--acc-m)}
.ft-card:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ft-card-self{border:2px solid var(--acc);background:var(--acc-l);cursor:default}
.ft-card-self:hover{border-color:var(--acc)}
.ft-card-name{max-width:100%;font-size:0.8em;font-weight:700;color:#333333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-card-rel{font-size:0.62em;color:#888;white-space:nowrap}
.ft-card-empty{align-items:center;background:rgba(255,255,255,0.7);border:1.5px dashed var(--br2);box-shadow:none;font-size:0.72em;font-weight:700;color:var(--acc-d)}
.ft-card-empty:hover{background:var(--acc-l);border-color:var(--acc-m)}
.ft-card-add{font-size:0.65em}
.ft-note-mark{display:inline-block;margin-left:6px;padding:0 5px;border-radius:3px;background:var(--acc-l);color:var(--acc-d);font-size:0.95em;font-weight:700;line-height:1.5;vertical-align:1px}
.ft-unplaced{margin-top:14px;padding:12px 14px;border:1px solid var(--br);border-radius:6px;background:var(--bg)}
.ft-unplaced-title{font-size:0.75em;font-weight:700;color:#555;margin-bottom:8px}
.ft-unplaced-list{display:flex;flex-wrap:wrap;gap:6px}
.ft-chip{display:inline-flex;align-items:baseline;gap:6px;padding:4px 10px;border:1px solid var(--br2);border-radius:999px;font-size:0.72em;font-weight:700;color:#333333;background:var(--bg2)}
.ft-chip small{font-size:0.85em;font-weight:400;color:#888}
.ft-picker{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box}
.ft-picker-panel{width:420px;max-width:100%;max-height:80vh;display:flex;flex-direction:column;background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.22);overflow:hidden}
.ft-picker-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid #eee}
.ft-picker-title{font-size:0.95em;font-weight:700;color:#333333}
.ft-picker-close{width:36px;height:36px;flex-shrink:0;border-radius:50%;background:#f0f0f0;border:none;cursor:pointer;font-size:1.1em;color:#555;font-family:inherit}
.ft-picker-body{overflow-y:auto;padding:8px 16px 16px;-webkit-overflow-scrolling:touch}
.ft-picker-cur{margin:8px 0 4px;padding:12px;border-radius:8px;background:var(--acc-l)}
.ft-picker-cur-name{font-size:0.9em;font-weight:700;color:#333333}
.ft-picker-cur-name small{margin-left:8px;font-size:0.8em;font-weight:400;color:#666}
.ft-picker-note{margin-top:6px;font-size:0.78em;line-height:1.6;color:#555;white-space:pre-wrap;word-break:break-word}
.ft-picker-remove{margin-top:10px;color:#B03030;border-color:#E2B4B4}
.ft-pick-sec{margin:14px 0 6px;font-size:0.72em;font-weight:700;color:#888}
.ft-pick-item{font-size:inherit;display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;min-height:52px;margin-bottom:6px;padding:8px 12px;background:var(--bg);border:1px solid var(--br2);border-radius:8px;font-family:inherit;text-align:left;cursor:pointer}
.ft-pick-item:hover{border-color:var(--acc-m);background:var(--acc-l)}
.ft-pick-item:disabled{opacity:.55;cursor:default;background:var(--bg2)}
.ft-pick-name{font-size:0.85em;font-weight:700;color:#333333}
.ft-pick-meta{font-size:0.72em;color:#888}
.ft-picker-empty{font-size:0.82em;line-height:1.7;color:#666}
.ft-picker-empty a{color:var(--acc);font-weight:600}
@media (max-width: 767px){
  .ft-picker{align-items:flex-end;padding:0}
  .ft-picker-panel{width:100%;max-height:85vh;border-radius:14px 14px 0 0;padding-bottom:env(safe-area-inset-bottom)}
  .ft-tools{width:100%}
  .ft-tools .rep-tool-btn{flex:1}
}
.rep-list .bi-row > div{min-width:0}
@container main (max-width: 720px){
  .rep-list .bi-dob{gap:6px}
  .bi-panel .rep-list .bi-dob .fi{width:52px;padding:0 8px}
  .bi-panel .rep-list .bi-dob .rep-ymd-year{width:76px}
  .rep-tool-btn{width:100%}
}
.rep-unit{display:flex;align-items:center;gap:8px;font-size:0.85em}
.bi-panel .rep-unit .fi{flex:1;min-width:0;font-size:1em}
/* お金・資産 */
.as-bronze{background:#FFF3CD;border:1px solid #FFE69C;border-radius:6px;padding:8px 12px;font-size:0.8em;color:#856404;margin-top:24px}
.bi-note.as-sec-note{font-size:0.78em;margin:-8px 0 14px}
.as-caution{background:var(--amber-l);border:1px solid #F3D9A4;border-radius:6px;padding:12px 14px;font-size:0.8em;line-height:1.7;color:#7A4E08;margin-bottom:16px}
.as-storage-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 16px;padding:14px 0;border-bottom:1px solid var(--br)}
.as-storage-row:first-child{padding-top:0}
.as-storage-label{font-size:0.85em;font-weight:700;color:#333333}
/* 医療・介護 */
.med-item-label{font-weight:700;margin:18px 0 8px}
.med-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.med-opts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px 16px}
.med-opt .rep-chk{line-height:1.5;align-items:flex-start}
.med-opt .rep-chk input{margin-top:2px;flex-shrink:0}
.med-sub{margin:10px 0 4px 26px;padding:12px 14px;border-left:3px solid var(--acc-m);background:var(--bg2)}
.med-fields{margin-bottom:14px}
.med-person .med-pick{margin-bottom:14px}
.med-person .med-pick .rep-sel{max-width:420px}
/* 承継者の「医療措置の希望」に出す要約 */
.med-sum{margin-top:16px;border:1px solid var(--br);border-radius:10px;padding:14px 16px;background:var(--bg)}
.med-sum-head{font-size:0.85em;font-weight:700;color:var(--acc-d);margin-bottom:8px}
.med-sum-sec{padding:10px 0;border-top:1px solid var(--br)}
.med-sum-sec:first-of-type{border-top:none;padding-top:2px}
.med-sum-title{font-size:0.75em;font-weight:700;color:#333333;margin-bottom:6px}
.med-sum-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:4px 12px;font-size:0.78em;line-height:1.6;padding:2px 0}
.med-sum-k{color:#888}
.med-sum-v{color:#333333;overflow-wrap:anywhere}
@container main (max-width: 720px){
  .med-sub{margin-left:12px}
  .med-sum-row{grid-template-columns:1fr}
}
/* 葬儀・お墓／相続・遺言／その他 */
.bi-row > .mf-span{grid-column:1 / -1}
.med-sub .med-person{margin:4px 0 0;background:var(--bg)}
.rep-subhead{font-size:0.8em;font-weight:700;color:var(--acc-d);padding-top:14px;margin-top:4px;border-top:1px dashed var(--br)}
.ed-photo{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ed-photo img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--br);cursor:zoom-in}
.ed-photo .rep-tool-btn{padding:7px 14px}

/* ── 日記 ── */
.dy-body{padding-top:28px}
.dy-write{scroll-margin-top:16px}
.dy-date-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;position:relative}
.dy-date{font-size:1.1em;font-weight:600;color:#333333;letter-spacing:.02em}
.dy-cal{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:none;border:none;border-radius:6px;color:var(--acc);cursor:pointer}
.dy-cal:hover{background:var(--acc-l)}
.dy-picker{position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:360px;max-width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--br2);border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,0.12);padding:12px 14px 14px}
.dy-picker[hidden]{display:none}
.dy-pk-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dy-pk-title{font-size:1.05em;font-weight:600;color:#333333;white-space:nowrap}
.dy-pk-nav{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:none;border-radius:4px;color:#333333;font-size:1.4em;line-height:1;cursor:pointer;font-family:inherit}
.dy-pk-nav:hover{background:var(--bg3)}
.dy-pk-nav:disabled{color:#ccc;background:none;cursor:default}
.dy-pk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dy-pk-wd{text-align:center;font-size:0.75em;color:#888;padding:6px 0}
.dy-pk-wd:first-child{color:#B03030}
.dy-pk-wd:nth-child(7){color:#2A5DB0}
.dy-pk-day{position:relative;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:50%;font-size:0.9em;color:#333333;cursor:pointer;font-family:inherit;padding:0}
.dy-pk-day:hover{background:var(--acc-l)}
.dy-pk-day.is-today{border-color:var(--acc)}
.dy-pk-day.is-sel{background:var(--acc);color:#fff}
.dy-pk-day:disabled{color:#ccc;background:none;cursor:default}
.dy-pk-day.has-entry::after{content:"";position:absolute;bottom:6px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--acc)}
.dy-pk-day.is-sel.has-entry::after{background:#fff}
.dy-editing{font-size:0.72em;color:var(--acc-d);background:var(--acc-l);border-radius:999px;padding:3px 10px}
.bi-panel .fi.dy-ta{width:100%;height:168px;min-height:168px;box-sizing:border-box;font-family:inherit}
.dy-count{text-align:right;font-size:0.8em;color:#333333;margin-top:10px}
.dy-count-over{color:#B03030}
.dy-actions{display:flex;justify-content:center;margin-top:20px}
.dy-save{width:236px;max-width:100%;height:52px;background:var(--acc);color:#fff;border:none;border-radius:2px;font-size:0.85em;font-weight:700;letter-spacing:.04em;cursor:pointer;font-family:inherit;transition:background .15s}
.dy-save:hover{background:var(--acc-d)}
.dy-save:disabled{opacity:.6;cursor:default}
.dy-past{margin-top:36px;padding-top:32px;border-top:1px solid var(--br)}
.dy-year{height:48px;padding:0 36px 0 14px;font-size:0.8em;font-family:inherit;color:#333333;background:var(--bg);border:1px solid var(--br2);border-radius:2px;cursor:pointer}
.dy-month{font-size:1.1em;font-weight:600;color:#333333;margin:22px 0 12px}
.dy-cards{display:flex;flex-direction:column;gap:10px}
.dy-card{border:1px solid var(--br2);border-radius:2px;padding:14px 16px 16px;background:var(--bg)}
.dy-card-head{display:flex;align-items:center;justify-content:space-between;position:relative;margin:-10px -12px 4px 0}
.dy-card-date{font-size:0.8em;font-weight:600;color:#333333}
.dy-more{display:inline-flex;align-items:center;justify-content:center;gap:3px;width:48px;height:48px;flex-shrink:0;padding:0;background:none;border:none;border-radius:4px;cursor:pointer}
.dy-more span{width:3px;height:3px;border-radius:50%;background:#888}
.dy-more:hover{background:var(--bg3)}
.dy-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:176px;background:var(--bg);border:1px solid var(--br2);border-radius:2px;box-shadow:0 6px 20px rgba(0,0,0,0.08);padding:6px 0}
.dy-menu[hidden]{display:none}
.dy-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:9px 16px;background:none;border:none;font-size:0.8em;color:#333333;cursor:pointer;font-family:inherit;text-align:left}
.dy-menu button:hover{background:var(--bg3)}
.dy-menu .dy-menu-del{color:#B03030}
.dy-card-body{margin:0;font-size:0.8em;line-height:1.85;color:#333;white-space:pre-wrap;word-break:break-word}
.dy-empty{font-size:0.82em;color:#888;margin:20px 0 0}
@container main (max-width: 720px){
  .dy-save{width:100%;height:52px}
  .dy-card{padding:12px 12px 14px}
  #pg-diary .bi-title{font-size:36px}
  #pg-diary .bi-desc{font-size:18px}
  .dy-date{font-size:20px}
  .dy-count{font-size:16px}
}