/* Japan-Entry Teardown — 日本対応 検査証
   Direction: Japanese inspection certificate × editorial print × instrument readout.
   The one memorable element: the rough vermillion hanko verdict seal.
   Cohesion bet: 朱(vermillion) + 藍(indigo) on 生成り washi paper, document grid, hairline rules.
   No dark-devtool, no generic SaaS. */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --paper:#F2ECDB; --paper-2:#EBE2CB; --paper-3:#E3D8BD;
  --sumi:#1C1A16; --sumi-2:#46403A; --sumi-3:#736A5E;
  --shu:#D23C24; --shu-deep:#A82C18;        /* 朱 vermillion — stamp / alarm */
  --ai:#1C3B5A; --ai-2:#2E587E;             /* 藍 indigo — structure / data */
  --ochre:#B8862A;                          /* 黄土 — conditional */
  --line:rgba(28,26,22,.18); --line-2:rgba(28,26,22,.34);
  --maxw:880px;
  --serif:"Noto Serif JP",serif; --sans:"Noto Sans JP",system-ui,sans-serif; --mono:"JetBrains Mono",monospace;
  --pass:var(--ai); --partial:var(--ochre); --gap:var(--shu); --unknown:var(--sumi-3);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--sumi); background:var(--paper);
  line-height:1.7; letter-spacing:.01em;
  /* washi grain (feTurbulence fractalNoise, data-URI) layered over warm paper */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(28,26,22,.06), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-attachment:fixed,fixed,fixed;
}
a{color:var(--ai); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{color:var(--shu)}

/* ---- shell ---- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:clamp(18px,4vw,40px) clamp(14px,4vw,28px) 80px}
.sheet{position:relative; background:var(--paper); padding:clamp(22px,4.5vw,52px); border:1px solid var(--line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 50px -30px rgba(28,26,22,.5)}
/* トンボ registration marks at the corners — print authenticity */
.sheet::before,.sheet::after{content:""; position:absolute; width:14px; height:14px; pointer-events:none}
.sheet::before{top:8px; left:8px; border-top:1.5px solid var(--sumi); border-left:1.5px solid var(--sumi)}
.sheet::after{bottom:8px; right:8px; border-bottom:1.5px solid var(--sumi); border-right:1.5px solid var(--sumi)}
.corner-tr,.corner-bl{position:absolute; width:14px; height:14px; pointer-events:none}
.corner-tr{top:8px; right:8px; border-top:1.5px solid var(--sumi); border-right:1.5px solid var(--sumi)}
.corner-bl{bottom:8px; left:8px; border-bottom:1.5px solid var(--sumi); border-left:1.5px solid var(--sumi)}

/* ---- masthead ---- */
.mast{display:flex; justify-content:space-between; align-items:flex-start; gap:18px;
  border-bottom:3px double var(--sumi); padding-bottom:14px}
.brand{font-family:var(--mono); font-weight:700; letter-spacing:.34em; font-size:13px; color:var(--ai)}
.brand .g{color:var(--shu)}
.docmeta{font-family:var(--mono); font-size:11px; color:var(--sumi-2); text-align:right; line-height:1.8}
.docmeta b{color:var(--sumi)}
.title-zone{margin:26px 0 6px}
.kicker{font-family:var(--mono); font-size:11px; letter-spacing:.32em; color:var(--shu); text-transform:uppercase}
.title{font-family:var(--serif); font-weight:700; line-height:1.12; margin:6px 0 0;
  font-size:clamp(30px,6.4vw,58px); letter-spacing:.01em}
.title .en{display:block; font-family:var(--mono); font-weight:500; font-size:clamp(12px,2.4vw,15px);
  letter-spacing:.18em; color:var(--sumi-2); margin-top:10px}
.subject{margin-top:18px; font-size:clamp(15px,2.6vw,18px); color:var(--sumi-2); max-width:60ch}
.subject b{color:var(--sumi); font-weight:700}

/* ---- verdict row: gauge + hanko ---- */
.verdict{display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  margin:30px 0; padding:22px 6px; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.gauge .lab{font-family:var(--mono); font-size:11px; letter-spacing:.26em; color:var(--sumi-2); text-transform:uppercase}
.score{font-family:var(--serif); font-weight:700; line-height:.9; display:flex; align-items:baseline; gap:8px}
.score .n{font-size:clamp(60px,15vw,108px); color:var(--ai)}
.score .d{font-size:clamp(20px,4vw,30px); color:var(--sumi-3); font-family:var(--mono); font-weight:500}
.grade{font-family:var(--serif); font-weight:700; font-size:clamp(15px,3vw,19px); margin-top:4px}
.bar{height:9px; background:var(--paper-3); border:1px solid var(--line); margin-top:14px; position:relative; overflow:hidden}
.bar > i{position:absolute; inset:0 auto 0 0; background:
  repeating-linear-gradient(90deg, var(--ai), var(--ai) 7px, var(--ai-2) 7px, var(--ai-2) 8px)}

/* hanko — the memorable element */
.hanko{width:148px; height:148px; flex:0 0 auto; position:relative; transform:rotate(-7deg);
  filter:url(#rough); mix-blend-mode:multiply}
.hanko svg{display:block}
@media (max-width:560px){ .verdict{grid-template-columns:1fr} .hanko{margin:6px auto 0; transform:rotate(-6deg) scale(.92)} }

/* ---- scorecard ---- */
.section-h{font-family:var(--mono); font-size:11px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--sumi-2); display:flex; align-items:center; gap:12px; margin:38px 0 14px}
.section-h::after{content:""; flex:1; height:1px; background:var(--line)}
.section-h .no{color:var(--shu); font-weight:700}

.row{display:grid; grid-template-columns:26px 1fr auto; gap:14px; align-items:start;
  padding:16px 0; border-bottom:1px solid var(--line)}
.row .idx{font-family:var(--mono); font-size:12px; color:var(--sumi-3); padding-top:3px}
.row .dname{font-family:var(--serif); font-weight:600; font-size:17px; line-height:1.3}
.row .dname .en{font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.12em;
  color:var(--sumi-3); display:block; margin-top:2px}
.row .note{font-size:14px; color:var(--sumi-2); margin-top:7px; max-width:54ch}
.row .note a{font-weight:500}
.row .why{font-size:12.5px; color:var(--sumi-3); margin-top:5px; font-style:italic}
.statwrap{text-align:right; min-width:120px}
.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-weight:700;
  font-size:11px; letter-spacing:.12em; padding:5px 9px; border:1.5px solid currentColor; text-transform:uppercase}
.chip .dot{width:8px; height:8px; border-radius:50%; background:currentColor}
.chip.pass{color:var(--ai)} .chip.partial{color:var(--ochre)} .chip.gap{color:var(--shu)} .chip.unknown{color:var(--sumi-3)}
.wt{font-family:var(--mono); font-size:10.5px; color:var(--sumi-3); margin-top:8px}

/* mini per-dimension meter */
.meter{height:6px; width:108px; background:var(--paper-3); border:1px solid var(--line); margin-top:9px; margin-left:auto; position:relative}
.meter > i{position:absolute; inset:0 auto 0 0}
.meter.pass>i{width:100%; background:var(--ai)} .meter.partial>i{width:55%; background:var(--ochre)}
.meter.gap>i{width:12%; background:var(--shu)} .meter.unknown>i{width:34%; background:var(--sumi-3)}

/* ---- playbook ---- */
.play{counter-reset:p; margin:6px 0 0; padding:0; list-style:none}
.play li{counter-increment:p; display:grid; grid-template-columns:auto 1fr; gap:16px; padding:15px 0; border-bottom:1px solid var(--line)}
.play li::before{content:counter(p,decimal-leading-zero); font-family:var(--serif); font-weight:700;
  font-size:26px; color:var(--shu); line-height:1}
.play .pt{font-family:var(--serif); font-weight:600; font-size:16px}
.play .pd{font-size:14px; color:var(--sumi-2); margin-top:3px}
.play .eff{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--ai); text-transform:uppercase; margin-top:6px}

/* ---- ROI panel ---- */
.roi{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:8px}
.roi > div{background:var(--paper); padding:18px 16px}
.roi .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--sumi-3)}
.roi .v{font-family:var(--serif); font-weight:700; font-size:clamp(20px,4vw,28px); color:var(--ai); margin-top:6px; line-height:1.1}
.roi .s{font-size:12px; color:var(--sumi-2); margin-top:4px}
@media (max-width:560px){ .roi{grid-template-columns:1fr} }

/* ---- CTA ---- */
.cta{margin:36px 0 8px; border:1.5px solid var(--sumi); background:var(--paper-2); padding:24px clamp(18px,4vw,30px)}
.cta h3{font-family:var(--serif); font-weight:700; font-size:clamp(18px,3.4vw,24px); margin:0 0 6px}
.cta p{margin:0 0 16px; color:var(--sumi-2); max-width:58ch}
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono); font-weight:700; font-size:13px;
  letter-spacing:.08em; padding:13px 22px; background:var(--shu); color:#FBF6E9; border:1.5px solid var(--shu-deep);
  text-decoration:none; transition:transform .08s ease}
.btn:hover{background:var(--shu-deep); color:#fff; transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--sumi); border-color:var(--line-2)}
.btn.ghost:hover{background:var(--sumi); color:var(--paper)}
.cta-row{display:flex; gap:12px; flex-wrap:wrap}

/* ---- share + footer ---- */
.share{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:26px; font-family:var(--mono); font-size:11px; color:var(--sumi-2)}
.share .u{padding:7px 10px; border:1px dashed var(--line-2); background:var(--paper-2); user-select:all; color:var(--sumi); overflow:auto; max-width:100%}
.foot{margin-top:30px; padding-top:18px; border-top:3px double var(--sumi); font-size:12px; color:var(--sumi-3)}
.foot .sig{font-family:var(--mono); letter-spacing:.2em; color:var(--ai)}
.foot .method{margin-top:8px; font-style:italic; max-width:70ch}
.backlink{display:inline-flex; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--sumi-2); text-decoration:none; margin-bottom:18px}
.backlink:hover{color:var(--shu)}

/* ---- index / landing ---- */
.lede{font-size:clamp(16px,2.8vw,20px); color:var(--sumi-2); max-width:62ch; margin:20px 0 4px}
.lede b{color:var(--sumi)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:1px; background:var(--line);
  border:1px solid var(--line); margin-top:30px}
.card{background:var(--paper); padding:20px 18px 18px; text-decoration:none; color:inherit; position:relative;
  display:flex; flex-direction:column; min-height:178px; transition:background .12s ease}
.card:hover{background:var(--paper-2)}
.card .cat{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--sumi-3)}
.card .cn{font-family:var(--serif); font-weight:700; font-size:19px; margin:8px 0 0; line-height:1.25}
.card .cb{font-size:12.5px; color:var(--sumi-2); margin-top:8px; flex:1}
.card .crow{display:flex; align-items:center; justify-content:space-between; margin-top:14px}
.card .cgrade{font-family:var(--mono); font-weight:700; font-size:12px; letter-spacing:.1em}
.card .cscore{font-family:var(--serif); font-weight:700; font-size:24px; color:var(--ai)}
.card .seal{position:absolute; top:14px; right:14px; width:46px; height:46px; transform:rotate(-8deg); opacity:.9; mix-blend-mode:multiply}
.tag-pass{color:var(--ai)} .tag-partial{color:var(--ochre)} .tag-warn{color:var(--ochre)} .tag-gap{color:var(--shu)}

.addbox{margin-top:1px; background:var(--paper-2); border:1px solid var(--line); padding:24px;
  display:flex; justify-content:space-between; gap:18px; align-items:center; flex-wrap:wrap}
.addbox p{margin:0; font-family:var(--serif); font-weight:600; font-size:17px}
.addbox span{display:block; font-family:var(--sans); font-weight:400; font-size:13.5px; color:var(--sumi-2); margin-top:4px}

.print-hint{font-family:var(--mono); font-size:10.5px; color:var(--sumi-3); margin-top:10px}

@media print{
  body{background:#fff} .sheet{box-shadow:none; border:none} .backlink,.share,.cta .btn{display:none}
  @page{margin:14mm}
}