/* ================================
   HeadChecker Common CSS  v2 (mono)
   - ロゴは画像 /logo.png を前提
   - 旧SVGハック類は全削除
   ================================ */

/* --- Design tokens --- */
:root{
  --bg:#fff; --ink:#111; --ink-weak:#666; --line:#e5e5e5; --muted:#fafafa;
  --radius-lg:14px; --radius-md:12px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --container:720px; --pad:16px;
  --font:'Noto Sans JP','Roboto',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* --- Base reset --- */
*{box-sizing:border-box}
html{overflow-y:scroll}
html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6;-webkit-text-size-adjust:100%}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--ink)}
a:hover{border-bottom:1px solid var(--ink)}
hr{border:none;border-top:1px solid var(--line);margin:24px 0}

/* --- Container --- */
.container{max-width:var(--container);margin:22px auto 40px;padding:0 var(--pad)}

/* --- Logo（画像で統一）---
  HTML:
  <div class="logo-bar">
    <a href="/"><img src="/logo.png" alt="頭身チェッカー" class="site-logo"></a>
  </div>
*/
.logo-bar{
  display:flex;justify-content:center;align-items:center;gap:0;
  margin:10px auto 10px;padding:0 var(--pad);max-width:var(--container)
}
.site-logo{height:40px;width:auto}

/* 旧 #logo が残っていても崩さない（互換だけ） */
#logo{display:flex;justify-content:center;align-items:center;gap:0;margin:10px auto 10px;padding:0 var(--pad);max-width:var(--container)}
#logo img{height:40px;width:auto}   /* 旧構造でも画像ロゴに揃える */
#logo span{display:none}            /* 旧“頭身チェッカー”文字は非表示（重複防止） */

/* --- Cards / section blocks --- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:14px;box-shadow:var(--shadow-sm)}
.card+.card{margin-top:12px}

/* --- Headings & text --- */
h1{font-size:2.1rem;margin:0 0 .7em}
h2{font-size:1.18rem;margin:1.6em 0 .5em}
h3{font-size:1.05rem;margin:1em 0 .4em}
.lead{font-weight:700}
.small{color:var(--ink-weak);font-size:.95em}
ul{margin:1em 0 1.4em 1.4em}
li{margin:.22em 0}

/* --- Buttons --- */
.btn{display:block;width:100%;text-align:center;cursor:pointer;border-radius:14px;font-weight:700;line-height:1.2;padding:12px 16px}
.btn-primary{background:var(--ink);color:#fff;border:none;transition:transform .06s ease}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}

/* ツールのボタンIDに自動適用（HTMLはそのままでOK） */
#openCard,#reset{display:block;width:100%}
#openCard{background:var(--ink);color:#fff;border:none;border-radius:12px;padding:12px 16px;font-weight:700}
#reset{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-weight:700}
#openCard:disabled{opacity:.45;cursor:not-allowed}

/* --- Tool: guide/result area & upload row --- */
#upload-guide{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;font-weight:600;margin:8px 0 10px}
#upload-guide span{color:var(--ink-weak);font-weight:400}
#maskface-label{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:600;margin:8px 0 6px}
#maskface{width:18px;height:18px}
#guide{font-weight:700;margin:8px 0}
#result{background:var(--muted);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-weight:700;margin:6px 0 8px}

.upload-row{display:flex;align-items:center;gap:12px;justify-content:flex-start;margin:10px 0 8px}
.upload-btn{display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);padding:12px 16px;font-weight:700;user-select:none}
.upload-btn svg{width:20px;height:20px}
#upload{display:none}
.upload-filename{color:#666;font-size:14px}

/* --- Canvas (巨大化防止) --- */
#canvas{display:block;margin:14px auto;width:100%;max-width:640px;min-height:200px;border-radius:12px;background:#fafafa}

/* --- Footer --- */
#footer-menu{margin:28px auto 16px;max-width:var(--container);text-align:center;font-size:15px;opacity:.93;padding:0 var(--pad)}
#footer-menu ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:1.2em}
#footer-menu li{display:inline}
#footer-menu a{font-weight:600}

/* --- Responsive --- */
@media (max-width:520px){
  .container{max-width:96vw;padding:0 10px}
  .site-logo{height:36px}
}

/* ロゴ */
.logo-bar{
  max-width: 720px;
  margin: 10px auto 6px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-link .logo-img{
  display:block;
  width:150px;   /* トップと揃えるならここを調整 */
  height:auto;
}

/* コンテンツ */
.policy-container{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 60px;
  line-height: 1.8;
  font-size: 16px;
}
.policy-container h1{
  font-size: 28px;
  margin: 24px 0 12px;
}
.policy-container .meta{
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}
.policy-container h2{
  font-size: 20px;
  margin: 24px 0 8px;
}
.policy-container p{
  margin-bottom: 16px;
}

/* フッター */
footer{
  text-align:center;
  font-size:14px;
  color:#888;
  padding:20px 0;
  border-top:1px solid #ddd;
}

/* a の下線をボタンでは無効化 */
a.btn {
  border-bottom: none !important;
  text-decoration: none !important;
}

/* フォーカス時の点線輪郭も消して安全なフォーカスリングに */
.btn:focus { outline: none; }
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(0,0,0,.15); }

/* 念のためボタンの表示を明示 */
.btn { display: inline-block; }

.btn { border: 2px solid #111; border-radius: 14px; }
.btn--primary { background:#111; color:#fff; }

/* 顔マスク（白ベタで本当に隠す） */
.face-mask{
  position:absolute;          /* 写真の上に重ねる */
  z-index: 10;                /* 必ず最前面 */
  width: 92px; height: 92px;  /* お好みで調整 */
  user-select:none;
  -webkit-user-drag: none;
  touch-action: none;         /* スクロール誤作動を抑える */
}