/* ===== COPYMAC デザインシステム (mockups.html 準拠) ===== */
:root{
--fuji:#8B7DC2; /* アクセント：藤色 */
--fuji-deep:#473C73; /* 濃い藤（文字） */
--fuji-text:#2E2651; /* AI文章の文字 */
--fuji-bg:#EEEBF7; /* 薄い藤の背景 */
--line:#1a1a1a; /* 枠線：黒 */
--ink:#1a1a1a; /* 本文 */
--sub:#6b6b6b; /* 補助テキスト */
--muted:#9a9a9a; /* 非選択 */
--panel:#f4f4f4; /* グレーパネル */
--star:#EF9F27; /* 星 */
--danger:#C0392B; /* 警告 */
--page:#cfcadd; /* ページ背景 */
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0;}
html,body{height:100%;}
body{
font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
background:var(--page);color:var(--ink);
display:flex;justify-content:center;
}
/* 画面コンテナ：スマホ幅360px基準・外枠なし */
.app{width:100%;max-width:420px;min-height:100vh;background:#fff;display:flex;flex-direction:column;position:relative;}
.app.has-tab{padding-bottom:64px;}
/* ヘッダー */
.hd{background:var(--fuji);padding:16px 18px;display:flex;align-items:center;justify-content:space-between;}
.hd.dark{background:var(--line);}
.hd-left{display:flex;align-items:center;gap:8px;}
.logo{width:26px;height:26px;background:#fff;color:var(--fuji);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;}
.logo.on-dark{background:var(--fuji);color:#fff;}
.hd-title{color:#fff;font-weight:600;font-size:16px;}
.hd-store{color:#fff;font-size:13px;display:flex;align-items:center;gap:4px;}
.hd-back{color:#fff;text-decoration:none;font-size:20px;display:inline-flex;}
a.hd-back:hover{opacity:.85;}
/* メイン領域 */
.main{flex:1;display:flex;flex-direction:column;}
/* 統計カード */
.stats{display:flex;gap:8px;padding:14px 16px 6px;}
.stat{flex:1;border:2px solid var(--line);padding:10px;text-align:center;background:#fff;}
.stat.hl{background:var(--fuji-bg);}
.stat .lbl{font-size:11px;color:var(--sub);}
.stat.hl .lbl{color:var(--fuji-deep);}
.stat .num{font-size:22px;font-weight:600;}
.stat.hl .num{color:var(--fuji-deep);}
.sectlbl{padding:8px 16px 4px;font-size:13px;color:var(--sub);display:flex;align-items:center;gap:6px;justify-content:space-between;}
.sectlbl .l{display:flex;align-items:center;gap:6px;}
.list{padding:4px 16px 16px;display:flex;flex-direction:column;gap:12px;}
/* カード */
.card{border:2px solid var(--line);padding:14px;background:#fff;}
.card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.who{display:flex;align-items:center;gap:8px;}
.av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:#FBEAF0;color:#993556;}
.nm{font-size:13px;font-weight:600;}
.stars{font-size:12px;color:var(--star);letter-spacing:1px;}
.badge{font-size:11px;color:#fff;background:var(--fuji);padding:3px 8px;white-space:nowrap;}
.badge.danger{background:var(--danger);}
.badge.ok{background:#3a8a4a;}
.review{font-size:13px;line-height:1.6;margin:0 0 12px;color:var(--ink);}
/* AI枠 */
.ai{background:var(--fuji-bg);border:1px solid var(--fuji);padding:10px 12px;margin-bottom:10px;}
.ai .ai-lbl{font-size:11px;color:var(--fuji-deep);display:flex;align-items:center;gap:5px;margin-bottom:5px;}
.ai p{font-size:13px;line-height:1.65;margin:0;color:var(--fuji-text);white-space:pre-wrap;}
/* ボタン */
.actions{display:flex;gap:8px;}
.btn{border:2px solid var(--line);background:#fff;color:var(--ink);padding:9px;font-size:13px;display:inline-flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;font-family:inherit;text-decoration:none;}
.btn:hover{background:var(--panel);}
.btn.primary{background:var(--fuji);color:#fff;font-weight:600;border-color:var(--fuji);}
.btn.primary:hover{background:#7a6cb5;}
.btn.f1{flex:1;} .btn.f14{flex:1.4;}
.btn[disabled],.btn.disabled{opacity:.45;pointer-events:none;cursor:not-allowed;}
.btn.block{width:100%;padding:12px;font-size:14px;}
/* タブバー (下部固定) */
.tab{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:420px;background:#fff;border-top:2px solid var(--line);display:flex;padding:8px 0;}
.tab a{flex:1;text-align:center;color:var(--muted);font-size:11px;text-decoration:none;}
.tab a.on{color:var(--fuji);font-weight:600;}
.tab a i{font-size:20px;display:block;}
/* フォーム */
.field-lbl{padding:14px 16px 4px;font-size:12px;color:var(--sub);}
.field-lbl.tight{padding-top:4px;}
.field-lbl.ai-lbl2{color:var(--fuji-deep);display:flex;align-items:center;gap:5px;}
.input,textarea.input,select.input{display:block;width:calc(100% - 32px);margin:0 16px;border:2px solid var(--line);padding:10px 12px;font-size:13px;color:var(--ink);font-family:inherit;background:#fff;}
textarea.input{min-height:54px;line-height:1.6;resize:vertical;}
.input:focus,textarea.input:focus{outline:none;border-color:var(--fuji);}
.pad{padding:0 16px;}
.gap{padding:10px 16px;}
/* チップ・タグ */
.chiprow{padding:0 16px 12px;display:flex;gap:8px;flex-wrap:wrap;}
.chip{border:2px solid var(--line);background:#fff;padding:9px;text-align:center;font-size:13px;flex:1;cursor:pointer;color:var(--ink);}
.chip.on{background:var(--fuji);color:#fff;font-weight:600;border-color:var(--fuji);}
.tag{border:2px solid var(--line);padding:6px 12px;font-size:12px;cursor:pointer;background:#fff;}
.tag.on{background:var(--fuji-bg);}
.tag.off{color:var(--sub);}
.dashed{margin:0 16px;border:2px dashed var(--line);padding:18px;text-align:center;color:var(--muted);font-size:13px;}
.greet{padding:16px 16px 6px;font-size:14px;font-weight:600;}
.todo{border:2px solid var(--line);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;text-decoration:none;color:var(--ink);}
.todo:hover{background:var(--panel);}
.todo .ic{width:34px;height:34px;background:var(--fuji-bg);border:1px solid var(--fuji);display:flex;align-items:center;justify-content:center;color:var(--fuji-deep);}
.todo .t1{font-size:13px;font-weight:600;}
.todo .t2{font-size:11px;color:var(--sub);}
.savebtn{padding:6px 16px 16px;}
/* ログイン */
.login-hd{background:var(--fuji);padding:22px 18px;text-align:center;}
.login-logo{display:inline-flex;width:44px;height:44px;background:#fff;color:var(--fuji);align-items:center;justify-content:center;font-weight:600;font-size:20px;margin-bottom:8px;}
.login-body{padding:20px 18px;}
.login-body .lbl{font-size:12px;color:var(--sub);margin-bottom:4px;}
.code{display:flex;gap:6px;justify-content:center;margin:0 0 18px;}
.code input{width:36px;height:44px;border:2px solid var(--line);text-align:center;font-size:18px;font-weight:600;font-family:inherit;}
.code input:focus{outline:none;border-color:var(--fuji);background:var(--fuji-bg);}
.note-link{font-size:11px;color:var(--fuji);text-decoration:none;}
.center{text-align:center;}
.muted-text{color:var(--sub);font-size:13px;line-height:1.6;}
/* 通知 */
.flash{margin:12px 16px 0;padding:10px 12px;border:2px solid var(--line);font-size:12px;}
.flash.error{border-color:var(--danger);color:var(--danger);background:#fbecea;}
.flash.ok{border-color:#3a8a4a;color:#2c6b39;background:#eaf5ec;}
.charcount{text-align:right;font-size:11px;color:var(--muted);margin-top:4px;}
.empty{padding:40px 16px;text-align:center;color:var(--muted);font-size:13px;}