/* _ing アートマップ かなざわ — 共通スタイル（POPテーマ / ing-brand-colors 準拠） */
:root{
  --pink:   #ff3399;
  --navy:   #0000b2;
  --green:  #00c553;
  --yellow: #ffeb00;
  --bg:     #ededeb;   /* _ing標準の薄グレー背景 */
  --ink:    #000000;
  --muted:  #888;
  --paper:  #ffffff;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:'Noto Sans JP',sans-serif;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding:0 14px 90px}

/* ヘッダ：_ingロゴが主役 */
header.site{display:flex;align-items:center;gap:12px;padding:14px 2px 6px}
header.site img.ing-logo{height:34px;width:auto}
header.site .titles{display:flex;flex-direction:column}
header.site h1{margin:0;font-family:'Yusei Magic','Noto Sans JP',sans-serif;font-weight:400;
  font-size:22px;letter-spacing:.04em}
header.site .sub{font-size:12px;color:var(--muted);line-height:1.3}

/* 地図 */
#map-holder{position:relative;background:var(--paper);border-radius:6px;overflow:hidden;
  box-shadow:0 8px 26px rgba(0,0,0,.5)}
#map-holder svg{display:block;width:100%;height:auto}
.map-note{font-size:12px;color:var(--muted);margin:10px 4px}

/* ===== PDFITの盤面再現（本物 dev/pdfit/app/css/style.css の配色をそのまま使用） ===== */
#pdfit-frame{border-radius:14px;overflow:hidden;box-shadow:0 10px 34px rgba(0,0,0,.28);
  --pf-bg:#2b2f36; --pf-panel:#363b43; --pf-panel2:#3e444d; --pf-line:#4a515b;
  --pf-ink:#e9edf2; --pf-muted:#9aa4b0; --pf-accent:#00c850; --pf-on-accent:#06351a; --pf-stage:#1f2227}
.pf-toolbar,.pf-tools{display:flex;align-items:center;gap:6px;padding:8px 10px;
  background:var(--pf-panel);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.pf-toolbar::-webkit-scrollbar,.pf-tools::-webkit-scrollbar{display:none}
.pf-tools{border-top:1px solid var(--pf-line);border-bottom:1px solid var(--pf-line);padding-top:7px;padding-bottom:7px}
.pf-brand{display:flex;align-items:center;gap:6px;font-family:'Outfit',sans-serif;font-weight:800;
  letter-spacing:.5px;font-size:16px;color:var(--pf-ink);margin-right:6px;white-space:nowrap}
.pf-brand img{height:22px;width:auto}
.pf-brand span{color:var(--pf-accent)}
.pf-btn{background:var(--pf-panel2);color:var(--pf-ink);border:1px solid var(--pf-line);
  border-radius:7px;padding:7px 10px;font-size:12.5px;line-height:1;cursor:pointer;
  white-space:nowrap;font-family:'Noto Sans JP',sans-serif;flex:0 0 auto}
.pf-btn.pf-icon{min-width:30px;text-align:center}
.pf-btn.pf-primary{background:var(--pf-accent);border-color:var(--pf-accent);color:var(--pf-on-accent);font-weight:700}
.pf-btn.pf-active{background:var(--pf-accent);border-color:var(--pf-accent);color:var(--pf-on-accent);font-weight:700;
  box-shadow:0 0 0 2px rgba(0,200,80,.35)}
.pf-btn.pf-dead{opacity:.62}
.pf-zoom{color:var(--pf-muted);font-size:12px;flex:0 0 auto}
.pf-sep{width:1px;align-self:stretch;background:var(--pf-line);margin:0 2px;flex:0 0 auto}
.pf-stage{background:var(--pf-stage);padding:16px 14px}
.pf-status{display:flex;justify-content:space-between;gap:10px;align-items:center;
  background:var(--pf-panel);border-top:1px solid var(--pf-line);padding:7px 12px;
  color:var(--pf-muted);font-size:11px}
.pf-status span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pf-msg{flex:1;text-align:center}
#pf-msg.pf-flash{color:var(--pf-accent);font-weight:700}

/* 地図タップ→「ここに投稿」ミニ吹き出し（PDFITの指示ピン配置と同じ操作感） */
#tap-pop{position:absolute;z-index:16;background:#fffdec;border:2px solid var(--yellow);
  border-radius:12px;padding:10px 12px;box-shadow:0 6px 18px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:8px;font-size:13px;max-width:220px}
#tap-pop .btn{padding:10px 14px;min-height:42px;font-size:14px}

/* ピン */
.pin{cursor:pointer}
.pin circle.dot{fill:var(--pink);stroke:#ffffff;stroke-width:4}
.pin.official circle.dot{fill:var(--navy)}
.pin text{fill:#ffffff;font-family:'Outfit','Noto Sans JP',sans-serif;font-weight:800;
  text-anchor:middle;dominant-baseline:central;pointer-events:none}
.pin.sel circle.halo{fill:none;stroke:var(--yellow);stroke-width:6}

/* 詳細シート（下からのカード） */
#sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;transform:translateY(110%);
  transition:transform .22s ease;max-width:720px;margin:0 auto;padding:0 10px 10px}
#sheet.open{transform:translateY(0)}
/* 詳細カード＝PDFITの「指示ピンの吹き出し」と同じ言語（薄黄色の紙＋黄色の縁）。
   色は _ing 正規 Yellow #ffeb00 の縁＋極薄シェード背景で、PDFITの操作感を公開Webで再現する */
#sheet .card{background:#fffdec;border:2px solid var(--yellow);border-radius:16px;
  box-shadow:0 -6px 30px rgba(0,0,0,.22);padding:14px 16px;position:relative}
#sheet .pdfit-credit{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);
  margin:8px 2px 10px;line-height:1.5}
#sheet .pdfit-credit b{font-family:'Outfit',sans-serif;color:var(--navy);letter-spacing:.04em}
#sheet img.photo{width:100%;max-height:44vh;object-fit:contain;border-radius:10px;background:var(--bg)}
#sheet .cmt{margin:10px 2px 4px;font-size:15px;white-space:pre-wrap;word-break:break-word}
#sheet .meta{font-size:12px;color:var(--muted);margin:0 2px 10px}
#sheet .row{display:flex;gap:10px}
#sheet .x{position:absolute;top:8px;right:10px;border:0;background:transparent;
  font-size:20px;color:var(--muted);cursor:pointer;padding:6px}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;
  border-radius:12px;padding:13px 18px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:inherit;text-decoration:none;min-height:48px}
.btn.primary{background:var(--pink);color:#ffffff}
.btn.navy{background:var(--navy);color:#ffffff}
.btn.ghost{background:var(--paper);color:var(--ink);border:1.5px solid rgba(0,0,0,.18)}
.btn.wide{width:100%}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* 投稿への固定導線 */
#cta{position:fixed;left:0;right:0;bottom:14px;display:flex;justify-content:center;z-index:20;
  pointer-events:none}
#cta .btn{pointer-events:auto;box-shadow:0 8px 24px rgba(255,51,153,.4)}

/* フォーム */
.field{background:var(--paper);border-radius:14px;padding:14px 16px;margin:12px 0}
.field h3{margin:0 0 8px;font-size:15px}
.field .hint{font-size:12px;color:var(--muted)}
textarea,input[type=text],input[type=password]{width:100%;border:1.5px solid rgba(0,0,0,.18);
  border-radius:10px;padding:10px;font:15px/1.6 'Noto Sans JP',sans-serif}
textarea{min-height:84px;resize:vertical}
#photo-preview{width:100%;max-height:40vh;object-fit:contain;border-radius:10px;
  background:var(--bg);display:none;margin-top:10px}
.guideline{font-size:12px;color:#444;background:var(--paper);border-radius:14px;padding:12px 16px}
.guideline ul{margin:6px 0 0;padding-left:18px}
.status-msg{margin:10px 2px;font-size:14px;font-weight:700}
.status-msg.err{color:var(--pink)}
.status-msg.ok{color:var(--green)}

/* 管理 */
.spot-card{background:var(--paper);border-radius:14px;padding:12px 14px;margin:12px 0}
.spot-card img{width:100%;max-height:38vh;object-fit:contain;border-radius:10px;background:var(--bg)}
.spot-card .meta{font-size:12px;color:var(--muted)}
.tabbtns{display:flex;gap:8px;margin:12px 0}
.tabbtns .btn.on{background:var(--navy);color:#fff}

/* フッタ（会社ロゴ併記＋Powered by PDFIT） */
footer.site{margin:34px 0 8px;text-align:center;color:var(--muted);font-size:12px}
footer.site img.corp{width:120px;max-width:40%;opacity:.85;display:block;margin:0 auto 6px}
footer.site .powered{font-family:'Outfit',sans-serif;letter-spacing:.05em}
footer.site a{color:var(--muted)}