/* ============================================================
   HP自動化ポータル 共通スタイル（maker/template.html の紺デザインを流用）
   スマホ縦を基準に、広い画面で見やすく広がるレスポンシブ設計。
   ============================================================ */
:root{
  --bg:#F2F4F8;
  --card:#FFFFFF;
  --ink:#1A2433;
  --muted:#5B6878;
  --navy:#1F3B5C;
  --navy-dark:#152A43;
  --line:#DDE3EB;
  --green:#1E9E63;
  --amber:#9A5B00;
  --amber-bg:#FFF6E5;
  --amber-line:#E8C97A;
  --danger:#C0392B;
  /* 4カテゴリ色 */
  --c-wp:#2271B1;      /* HP記事（WordPress青） */
  --c-insta:#D6336C;   /* Instagram（ピンク） */
  --c-wechat:#0E9E52;  /* WeChat（緑） */
  --c-canva:#7D2AE8;   /* Canva（紫） */
  --radius:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  line-height:1.7; -webkit-text-size-adjust:100%;
}
.wrap{max-width:920px; margin:0 auto; padding:14px 14px 96px;}

/* ---- ヘッダー ---- */
.appbar{
  background:linear-gradient(135deg,var(--navy) 0%,#27517E 100%);
  color:#fff; border-radius:var(--radius);
  padding:16px 18px; margin-bottom:14px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.appbar h1{font-size:18px; margin:0; font-weight:800; letter-spacing:.02em;}
.appbar .sub{font-size:11px; color:#A8C4E0; font-weight:700; text-transform:uppercase; letter-spacing:.1em;}
.appbar .spacer{flex:1;}
.appbar button{
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3);
  border-radius:10px; padding:7px 12px; font-size:12.5px; font-weight:700; cursor:pointer;
}
.appbar button:hover{background:rgba(255,255,255,.24);}

/* ---- 汎用ボタン ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--navy); color:#fff; border:none; border-radius:12px;
  padding:11px 16px; font-size:14.5px; font-weight:800; cursor:pointer;
  font-family:inherit; line-height:1.2;
}
.btn:hover{background:var(--navy-dark);}
.btn:active{transform:translateY(1px);}
.btn.ghost{background:#fff; color:var(--navy); border:1px solid var(--line);}
.btn.ghost:hover{background:#F2F4F8;}
.btn.wide{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ---- 一覧：検索＋新規 ---- */
.toolbar{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap;}
.toolbar .search{flex:1; min-width:180px; position:relative;}
.toolbar input[type=search]{
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:12px;
  font-size:15px; font-family:inherit; background:#fff;
}
.toolbar input[type=search]:focus{outline:2px solid #B7CBE4; border-color:#B7CBE4;}

/* ---- 店舗カード一覧 ---- */
.store-list{display:flex; flex-direction:column; gap:10px;}
.store-row{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:13px 15px; cursor:pointer; display:flex; align-items:center; gap:12px;
  transition:border-color .12s, box-shadow .12s;
}
.store-row:hover{border-color:#B7CBE4; box-shadow:0 2px 10px rgba(31,59,92,.08);}
.store-row .main{flex:1; min-width:0;}
.store-row .name{font-weight:800; font-size:16px; color:var(--ink); word-break:break-word;}
.store-row .meta{font-size:12px; color:var(--muted); margin-top:2px;}
.store-row .badges{display:flex; gap:5px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; max-width:150px;}
.pubbadge{
  font-size:10.5px; font-weight:800; border-radius:999px; padding:3px 9px;
  border:1px solid var(--line); color:var(--muted); background:#F5F7FA; white-space:nowrap;
}
.pubbadge.on{color:#fff; border-color:transparent;}
.pubbadge.hp.on{background:var(--c-wp);}
.pubbadge.ig.on{background:var(--c-insta);}
.pubbadge.wc.on{background:var(--c-wechat);}

.empty{
  text-align:center; color:var(--muted); padding:44px 16px; font-size:14px;
  background:var(--card); border:1px dashed var(--line); border-radius:14px;
}

/* ---- 詳細画面 ---- */
.detail-head{display:flex; align-items:center; gap:10px; margin-bottom:12px;}
.detail-head .back{
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:8px 12px; font-weight:800; cursor:pointer; color:var(--navy); font-size:13px;
}
.detail-head .title{font-size:19px; font-weight:800; flex:1; min-width:0; word-break:break-word;}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 16px; margin-bottom:14px;
}
.card > h2{
  font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase;
  letter-spacing:.08em; margin:0 0 12px; display:flex; align-items:center; gap:8px;
}
.card > h2 .accent{width:10px; height:10px; border-radius:3px; background:var(--navy);}

/* 入力欄 */
.field{margin-bottom:11px;}
.field:last-child{margin-bottom:0;}
.field label{display:block; font-size:12px; font-weight:700; color:var(--muted); margin-bottom:4px;}
.field input, .field textarea, .field select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:15px; font-family:inherit; background:#fff; color:var(--ink); line-height:1.6;
}
.field input:focus, .field textarea:focus{outline:2px solid #B7CBE4; border-color:#B7CBE4;}
.field textarea{resize:vertical; min-height:56px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
@media(max-width:520px){ .grid2{grid-template-columns:1fr;} }

/* ---- 成果物：コピー付きコードブロック ---- */
.block{border:1px solid var(--line); border-radius:12px; margin-bottom:13px; overflow:hidden;}
.block:last-child{margin-bottom:0;}
.block-head{
  display:flex; align-items:center; gap:8px; padding:9px 12px;
  background:color-mix(in srgb, var(--accent,var(--navy)) 10%, white);
  border-bottom:1px solid var(--line);
}
.block-head .dot{width:9px; height:9px; border-radius:3px; background:var(--accent,var(--navy)); flex-shrink:0;}
.block-head .lbl{font-weight:800; font-size:13.5px; color:var(--accent,var(--navy));}
.block-head .spacer{flex:1;}
.copy-btn{
  background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:6px 13px; font-size:12.5px; font-weight:800; cursor:pointer;
  color:var(--navy); font-family:inherit; white-space:nowrap;
}
.copy-btn:hover{background:#F2F4F8;}
.copy-btn.ok{background:#E7F6EE; color:var(--green); border-color:#B7E3C9;}
.copy-btn.ng{background:var(--amber-bg); color:var(--amber); border-color:var(--amber-line);}
.block textarea{
  width:100%; border:none; padding:11px 12px; font-size:14px; font-family:inherit;
  line-height:1.8; resize:vertical; min-height:52px; background:#fff; color:var(--ink); display:block;
}
.block textarea:focus{outline:2px solid #B7CBE4; outline-offset:-2px;}
.block textarea.code{
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:12.5px; background:#F8FAFC; white-space:pre;
}

/* ---- 公開状況チェック ---- */
.pubrow{display:flex; gap:10px; flex-wrap:wrap;}
.pubcheck{
  display:flex; align-items:center; gap:8px; padding:10px 14px; border:1px solid var(--line);
  border-radius:12px; cursor:pointer; font-weight:700; font-size:14px; background:#fff; flex:1; min-width:130px;
}
.pubcheck input{width:19px; height:19px; accent-color:var(--navy); cursor:pointer;}

/* ---- 保存バー（下部固定） ---- */
.savebar{
  position:fixed; left:0; right:0; bottom:0; background:rgba(255,255,255,.96);
  border-top:1px solid var(--line); padding:10px 14px; backdrop-filter:blur(6px);
  display:flex; gap:10px; align-items:center; z-index:20;
}
.savebar .inner{max-width:920px; margin:0 auto; width:100%; display:flex; gap:10px; align-items:center;}
.savebar .status{font-size:12.5px; color:var(--muted); font-weight:700;}
.savebar .status.saved{color:var(--green);}
.savebar .spacer{flex:1;}

/* ---- ログイン画面 ---- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; width:100%; max-width:380px; box-shadow:0 8px 30px rgba(31,59,92,.10);
}
.login-card .logo{
  background:linear-gradient(135deg,var(--navy) 0%,#27517E 100%); color:#fff;
  border-radius:12px; padding:16px; text-align:center; margin-bottom:20px;
}
.login-card .logo h1{margin:0; font-size:18px; font-weight:800;}
.login-card .logo .sub{font-size:10.5px; color:#A8C4E0; font-weight:700; letter-spacing:.12em; text-transform:uppercase;}
.login-card label{display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:6px;}
.login-card input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:12px;
  font-size:16px; font-family:inherit; margin-bottom:14px;
}
.login-card input:focus{outline:2px solid #B7CBE4; border-color:#B7CBE4;}
.login-err{
  color:var(--danger); font-size:13px; font-weight:700; margin:0 0 12px;
  background:#FDECEA; border:1px solid #F5C6C0; border-radius:10px; padding:9px 12px; display:none;
}
.login-err.show{display:block;}

.toast{
  position:fixed; left:50%; bottom:88px; transform:translateX(-50%);
  background:var(--navy-dark); color:#fff; padding:10px 18px; border-radius:999px;
  font-size:13.5px; font-weight:700; z-index:50; opacity:0; transition:opacity .2s; pointer-events:none;
}
.toast.show{opacity:1;}
.hidden{display:none !important;}