/* ===== Sankayou digital business card ===== */
:root{
  --brand:#2f5d4e;
  --brand-deep:#244a3e;
  --sage:#8ca195;
  --sage-deep:#4a7563;
  --sage-tint:#e7efe9;
  --cream:#f6f4ef;
  --paper:#ffffff;
  --ink:#2b2f36;
  --muted:#8b9099;
  --line:#ece8e0;
  --serif:'Cormorant Garamond','Noto Serif JP',Georgia,serif;
  --sans:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --shadow:0 18px 50px -18px rgba(36,74,62,.32);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:linear-gradient(168deg,#f2efe8 0%,#f6f4ef 38%,#eef1ee 100%);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:24px 16px 56px;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}

/* ---- card shell ---- */
.card{
  width:100%;
  max-width:430px;
  background:var(--paper);
  border-radius:22px;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}

/* ---- top bar: logo + lang ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px 0;
}
.brand-logo{height:30px;width:auto;display:block}
.lang{
  display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;
  font-size:12px;font-weight:500;
}
.lang button{
  border:0;background:transparent;color:var(--muted);
  padding:5px 11px;cursor:pointer;font-family:var(--sans);font-weight:500;
}
.lang button.on{background:var(--brand);color:#fff}

/* ---- hero ---- */
.hero{padding:14px 24px 4px;text-align:center}
.avatar{
  width:104px;height:104px;border-radius:50%;margin:6px auto 14px;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 28%,#9fb3a6,var(--sage-deep));
  color:#fff;font-family:var(--serif);font-size:40px;font-weight:600;
  letter-spacing:1px;
  box-shadow:0 0 0 5px #fff,0 0 0 6px var(--line);
  background-size:cover;background-position:center;overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.name-en{font-family:var(--serif);font-size:31px;line-height:1.1;font-weight:600;color:var(--brand)}
.name-jp{font-size:13px;color:var(--muted);margin-top:5px;letter-spacing:.12em}
.title{
  margin-top:12px;font-size:12px;font-weight:600;color:var(--sage-deep);
  letter-spacing:.16em;text-transform:uppercase;
}
.company{margin-top:3px;font-size:13.5px;color:var(--ink);font-weight:500}
.tagline{
  font-family:var(--serif);font-style:italic;font-size:16px;color:var(--sage-deep);
  margin:12px auto 2px;max-width:300px;
}

/* ---- actions ---- */
.actions{padding:18px 24px 6px;display:flex;flex-direction:column;gap:10px}
.btn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;padding:14px 16px;border-radius:13px;border:1px solid transparent;
  font-family:var(--sans);font-size:15px;font-weight:600;cursor:pointer;
  transition:transform .08s ease,box-shadow .2s ease,background .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 8px 18px -8px rgba(36,74,62,.55)}
.btn-primary:hover{background:var(--brand-deep)}
.btn-ghost{background:#fff;color:var(--brand);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--sage);color:var(--sage-deep)}
.btn svg{width:18px;height:18px;flex:none}

/* ---- contact list ---- */
.divider{height:1px;background:var(--line);margin:16px 24px 4px}
.contacts{padding:8px 14px 6px;display:flex;flex-direction:column}
.row{
  display:grid;grid-template-columns:40px 1fr;align-items:center;gap:12px;
  padding:11px 10px;border-radius:12px;
}
.row:hover{background:var(--cream)}
.ic{
  width:38px;height:38px;border-radius:50%;background:var(--sage-tint);
  display:flex;align-items:center;justify-content:center;color:var(--sage-deep);flex:none;
}
.ic svg{width:18px;height:18px}
.row .lab{display:block;font-size:10.5px;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;margin-bottom:2px}
.row .val{display:block;font-size:14.5px;color:var(--ink);font-weight:500;word-break:break-word;line-height:1.38}
.row .val.sm{font-size:13px;font-weight:400}

/* ---- qr reveal ---- */
.qrwrap{
  max-height:0;overflow:hidden;transition:max-height .35s ease;
  text-align:center;
}
.qrwrap.open{max-height:420px}
.qrbox{padding:6px 24px 18px}
.qrbox img{width:200px;height:200px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px}
.qrbox p{font-size:12px;color:var(--muted);margin-top:8px}

/* ---- footer ---- */
.foot{
  background:var(--brand);color:#c9ded2;padding:18px 24px 22px;margin-top:10px;
  text-align:center;font-size:11.5px;line-height:1.7;
}
.foot .flogo{height:24px;opacity:.95;margin-bottom:8px}
.foot .legal{color:#fff;font-weight:500;font-size:12.5px}
.foot .lic{color:#9fb3a6;margin-top:5px;font-size:11px}
.foot a{color:#9fb3a6;text-decoration:underline;text-underline-offset:2px}

/* ---- index (landing) ---- */
.index-head{text-align:center;padding:26px 24px 6px}
.index-head img{height:40px;margin-bottom:14px}
.index-head h1{font-family:var(--serif);font-size:24px;color:var(--brand);font-weight:600}
.index-head p{font-size:13px;color:var(--muted);margin-top:6px}
.people{padding:14px 18px 22px;display:flex;flex-direction:column;gap:10px}
.pcard{
  display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);
  border-radius:14px;transition:border .2s,background .2s;
}
.pcard:hover{border-color:var(--sage);background:var(--cream)}
.pcard .av{
  width:52px;height:52px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 32% 28%,#9fb3a6,var(--sage-deep));
  color:#fff;font-family:var(--serif);font-size:21px;font-weight:600;
  display:flex;align-items:center;justify-content:center;background-size:cover;overflow:hidden;
}
.pcard .av img{width:100%;height:100%;object-fit:cover}
.pcard>span{display:flex;flex-direction:column;min-width:0}
.pcard .pn{display:block;font-family:var(--serif);font-size:20px;color:var(--brand);font-weight:600;line-height:1.15}
.pcard .pt{display:block;font-size:11px;color:var(--sage-deep);letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.pcard .arr{margin-left:auto;color:var(--muted)}

/* ---- proof sheet (校正シート / 社内) ---- */
.proof{width:100%;max-width:800px;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:26px 30px 36px;margin:8px auto}
.proof h1{font-family:var(--serif);font-size:27px;color:var(--brand);font-weight:600}
.proof .note{font-size:12.5px;color:var(--muted);margin:6px 0 4px;line-height:1.6}
.proof .legend{font-size:12px;color:var(--muted);margin:10px 0 18px}
.proof .legend .miss{display:inline-block;padding:1px 7px;border-radius:6px;margin-right:4px;color:#b23b2e;background:#fbeae7;font-weight:500}
.proof h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-deep);margin:24px 0 6px;border-bottom:1px solid var(--line);padding-bottom:7px;font-weight:700}
.proof table{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
.proof col.k{width:118px}.proof col.v{width:auto}
.proof th{text-align:left;font-weight:600;color:var(--muted);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;vertical-align:top;padding:8px 10px 8px 0;white-space:nowrap}
.proof td{vertical-align:top;padding:8px 10px;border-top:1px solid var(--line);color:var(--ink);word-break:break-word;line-height:1.45}
.proof tr.hd th,.proof tr.hd td{border-top:0;color:var(--sage-deep);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.proof td.miss{color:#b23b2e;background:#fbeae7;border-radius:6px;font-weight:500}
.proof td.opt{color:var(--muted)}
.proof .pill{display:inline-block;font-size:11px;color:#fff;background:var(--sage-deep);border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle;letter-spacing:.04em}
@media print{body{background:#fff;padding:0}.proof{box-shadow:none;max-width:100%}}

/* ---- QR sheet (印刷用 / 社内) ---- */
.qrsheet{width:100%;max-width:820px;background:#fff;border-radius:18px;box-shadow:var(--shadow);padding:28px 32px 32px;margin:8px auto}
.qrsheet h1{font-family:var(--serif);font-size:27px;color:var(--brand);font-weight:600}
.qrsheet .sub{font-size:12.5px;color:var(--muted);margin:6px 0 8px;line-height:1.6}
.qsperson{display:flex;gap:22px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}
.qsperson .who{width:170px;flex:none}
.qsperson .who .n{font-family:var(--serif);font-size:21px;color:var(--brand);font-weight:600;line-height:1.1}
.qsperson .who .nj{font-size:12px;color:var(--muted);margin-top:3px}
.qsperson .who .t{font-size:10.5px;color:var(--sage-deep);text-transform:uppercase;letter-spacing:.1em;margin-top:8px}
.qsperson .who .u{font-size:11px;color:var(--muted);margin-top:8px;word-break:break-all}
.qrcell{text-align:center}
.qrcell img{width:150px;height:150px;border:1px solid var(--line);border-radius:12px;padding:8px;background:#fff}
.qrcell .cap{font-size:12px;color:var(--ink);margin-top:7px;font-weight:600}
.qrcell .cap span{display:block;color:var(--muted);font-weight:400;font-size:10.5px;margin-top:1px}
@media print{body{background:#fff;padding:0}.qrsheet{box-shadow:none;max-width:100%}.qsperson{break-inside:avoid}}

/* i18n visibility handled by JS toggling text; nothing needed here */
@media (max-width:380px){
  .name-en{font-size:27px}
  .avatar{width:92px;height:92px;font-size:34px}
}

/* ================= CAN 固有 ================= */
/* 資格（日本語面のみ）。英語面は data-en="" で空になるので :empty で消える */
.quals{margin-top:6px;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.quals:empty{display:none}

/* 未確認番号のプレースホルダ行：リンクにしない（誤発信防止）ので .row と同じ見た目だけ与える */
.row.pending{cursor:default}
.row.pending:hover{background:transparent}
.row.pending .val{color:var(--muted);font-style:italic}

/* トップページのヒーロー写真（上高地・河童橋前） */
.index-hero{position:relative;line-height:0}
.index-hero + .index-head{padding-top:18px}
.index-hero img{width:100%;height:190px;object-fit:cover;object-position:center 42%}
.index-hero-cap{position:absolute;left:14px;bottom:10px;color:#fff;font-size:10.5px;
  letter-spacing:.08em;text-shadow:0 1px 6px rgba(0,0,0,.55);line-height:1.2}
.index-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%)}
@media (max-width:420px){
  .index-hero img{height:160px}
}