/* ウラ性格診断 タイプ図鑑 共通スタイル */
:root{
  --desk:#17140f; --paper:#eee3c9; --paper2:#e5d8b8; --paper-line:#c9b78d;
  --kraft:#a5854e; --kraft2:#8a6c3c;
  --ink:#26221a; --ink2:#5c5340; --ink3:#8a7d61;
  --red:#b5121b; --red2:#8e0e15;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--desk); color:var(--ink);
  font-family:'Shippori Mincho B1',serif; min-height:100vh; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(90,74,48,.20), transparent 65%),
    radial-gradient(ellipse 120% 90% at 50% 110%, rgba(0,0,0,.55), transparent 60%);}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");}
.wrap{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:0 16px 70px;}
.mono{font-family:'IBM Plex Mono',monospace;}

/* パンくず */
.crumb{padding:20px 2px 0;font-size:11.5px;color:#877c63;letter-spacing:.06em;}
.crumb a{color:#a4977b;text-decoration:none;}
.crumb a:hover{color:#d8caa8;}

/* 紙 */
.sheet{
  position:relative; background:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
  border-radius:3px;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 50px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.45);
  padding:26px 22px 30px; margin-top:22px;
}
.sheet::before{content:'';position:absolute;inset:10px;border:1px solid rgba(120,100,60,.4);pointer-events:none;border-radius:2px;}
.sheet-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:18px;flex-wrap:wrap;
}
.sheet-head .doc-title{font-weight:800;font-size:14.5px;letter-spacing:.2em;}
.sheet-head .doc-no{font-size:10.5px;color:var(--ink2);letter-spacing:.08em;font-family:'IBM Plex Mono',monospace;}
.chip-secret{
  display:inline-block;border:2px solid var(--red);color:var(--red);
  font-weight:800;font-size:11px;letter-spacing:.3em;padding:3px 8px 3px 11px;
  transform:rotate(-4deg);opacity:.9;
}

/* タイプ見出し */
.type-hero{text-align:center;padding:4px 0 6px;}
.type-hero .emoji{font-size:64px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.2));}
.type-hero h1 .code{
  font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.3em;color:var(--ink2);
  border:1px solid var(--paper-line);display:block;width:fit-content;margin:0 auto 12px;
  padding:3px 12px 3px 15px;border-radius:2px;font-weight:600;
}
.type-hero h1{font-size:clamp(21px,5.6vw,27px);font-weight:800;letter-spacing:.06em;line-height:1.5;}
.type-hero .catch{margin-top:14px;font-size:14px;line-height:2;color:var(--ink2);}

/* 表と裏 */
.faces{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px;}
@media(max-width:520px){.faces{grid-template-columns:1fr;}}
.face{border:1px solid var(--paper-line);border-radius:2px;padding:14px 14px 16px;background:rgba(255,255,255,.25);}
.face .lbl{font-size:10.5px;letter-spacing:.22em;color:var(--ink3);margin-bottom:8px;font-family:'IBM Plex Mono',monospace;}
.face .txt{font-size:15px;font-weight:800;line-height:1.7;}
.face.ura{background:rgba(181,18,27,.06);border-color:rgba(181,18,27,.35);}
.face.ura .txt{color:var(--red2);}

h2.sec{
  font-size:15px;font-weight:800;letter-spacing:.14em;margin:30px 0 12px;
  border-left:5px solid var(--red);padding-left:10px;
}
h3.sub{font-size:13.5px;font-weight:800;letter-spacing:.1em;color:var(--ink2);margin:20px 0 8px;}
p.body{font-size:14px;line-height:2.05;color:var(--ink);}
p.lead{font-size:12.5px;line-height:1.9;color:var(--ink3);margin:0 0 10px;}

/* 16タイプ全員との相性 */
.aisho-list{display:flex;flex-direction:column;gap:1px;background:rgba(0,0,0,.09);
  border:1px solid rgba(0,0,0,.12);border-radius:4px;overflow:hidden;}
.aisho-list a{
  display:grid;grid-template-columns:34px 30px 1fr;gap:10px;align-items:center;
  background:var(--paper);padding:11px 12px;text-decoration:none;color:inherit;
  transition:background .15s;
}
.aisho-list a:hover{background:rgba(142,14,21,.045);}
.aisho-list .rk{
  font-size:16px;font-weight:800;text-align:center;line-height:1;
  font-family:'Shippori Mincho B1',serif;
}
.aisho-list .rk.r1{color:#2f6b3d;}
.aisho-list .rk.r2{color:var(--ink2);}
.aisho-list .rk.r3{color:#9a7a1e;}
.aisho-list .rk.r4{color:var(--red2);}
.aisho-list .em{font-size:19px;line-height:1;text-align:center;}
.aisho-list .tx .cd{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  color:var(--ink3);font-weight:600;
}
.aisho-list .tx .nm{font-size:12.5px;font-weight:800;margin-left:7px;color:var(--ink);}
.aisho-list .tx .ln{font-size:12.5px;line-height:1.8;color:var(--ink);margin-top:3px;}
.aisho-list a.self{background:rgba(0,0,0,.035);}
@media(max-width:420px){
  .aisho-list a{grid-template-columns:26px 24px 1fr;gap:7px;padding:10px 9px;}
  .aisho-list .tx .ln{font-size:12px;}
}
p.body + p.body{margin-top:.9em;}
ul.aru{list-style:none;margin-top:6px;}
ul.aru li{
  position:relative;padding-left:24px;font-size:13.5px;line-height:1.95;margin:.5em 0;color:var(--ink);
}
ul.aru li::before{
  content:'☑';position:absolute;left:0;top:0;color:var(--red);font-size:13px;
}
.sw{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px;}
@media(max-width:520px){.sw{grid-template-columns:1fr;}}
.sw .box{border:1px solid var(--paper-line);border-radius:2px;padding:13px 14px;background:rgba(255,255,255,.25);}
.sw .box .lbl{font-size:10.5px;letter-spacing:.2em;color:var(--ink3);margin-bottom:7px;font-family:'IBM Plex Mono',monospace;}
.sw .box p{font-size:13.5px;line-height:1.95;}

/* 相性 */
.match{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:12px;}
@media(max-width:520px){.match{grid-template-columns:1fr;}}
.match a{
  display:block;text-decoration:none;color:var(--ink);border:1px solid var(--paper-line);
  border-radius:2px;padding:14px;background:rgba(255,255,255,.3);transition:transform .15s;
  text-align:center;
}
.match a:hover{transform:translateY(-2px);}
.match .lbl{font-size:11px;letter-spacing:.16em;margin-bottom:8px;font-weight:800;}
.match a.good{border-color:rgba(47,107,61,.45);}
.match a.good .lbl{color:#2f6b3d;}
.match a.bad{border-color:rgba(142,14,21,.4);}
.match a.bad .lbl{color:var(--red2);}
.match .emoji{font-size:30px;line-height:1;}
.match .nm{font-size:14px;font-weight:800;margin-top:6px;line-height:1.6;}
.match .cd{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink3);letter-spacing:.14em;margin-top:4px;}

/* 引用（心の声） */
.voice{
  margin-top:16px;border-left:4px solid var(--red);background:rgba(181,18,27,.05);
  padding:12px 14px;font-size:14.5px;font-weight:800;line-height:1.9;color:var(--red2);
}

/* CTA */
.cta{margin-top:26px;text-align:center;}
.cta .btn{
  display:inline-block;background:linear-gradient(160deg,#c0161f,#8e0e15);color:#f7ecd4;
  font-weight:800;font-size:14px;letter-spacing:.08em;border-radius:3px;padding:15px 30px;
  text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.cta .btn:hover{filter:brightness(1.08);}
.cta .btn.sub{background:transparent;color:var(--ink);border:2px solid var(--ink2);box-shadow:none;}
.cta .note{margin-top:10px;font-size:11.5px;color:var(--ink3);}
.cta .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* 一覧グリッド */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:16px;}
.grid a{
  display:block;text-decoration:none;color:var(--ink);text-align:center;
  border:1px solid var(--paper-line);border-radius:2px;padding:14px 8px;background:rgba(255,255,255,.28);
  transition:transform .15s,background .15s;
}
.grid a:hover{transform:translateY(-2px);background:rgba(255,255,255,.5);}
.grid .em{font-size:30px;line-height:1;}
.grid .cd{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.16em;color:var(--ink3);margin-top:6px;}
.grid .nm{font-size:12.5px;font-weight:800;line-height:1.5;margin-top:4px;}
.grid a.cur{background:rgba(181,18,27,.1);border-color:var(--red);}

/* フッター */
footer{text-align:center;padding:44px 18px 10px;position:relative;z-index:2;}
.foot-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:14px;}
.foot-links a{color:#877c63;font-size:12px;text-decoration:none;letter-spacing:.06em;}
.foot-links a:hover{color:#b9ad8f;}
.foot-copy{font-family:'IBM Plex Mono',monospace;letter-spacing:.3em;font-size:10.5px;color:#6b634e;}
.foot-note{margin-top:10px;font-size:10.5px;color:#6b634e;line-height:1.8;max-width:480px;margin-left:auto;margin-right:auto;}

/* ============ 取扱説明書（他人視点） ============ */
.gokai{display:flex;flex-direction:column;gap:11px;margin-top:12px;}
.gokai .g{border:1px solid var(--paper-line);border-radius:2px;
  background:rgba(255,255,255,.25);padding:13px 15px;}
.gokai .mie{
  font-size:13.5px;font-weight:800;line-height:1.75;color:var(--ink2);
  position:relative;padding-left:30px;
}
.gokai .mie::before{
  content:'噂';position:absolute;left:0;top:1px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;color:var(--ink3);
  border:1px solid var(--paper-line);border-radius:2px;padding:2px 5px;line-height:1;
}
.gokai .jitsu{
  margin-top:9px;padding-top:9px;border-top:1px dashed var(--paper-line);
  font-size:13.5px;line-height:1.95;position:relative;padding-left:30px;
}
.gokai .jitsu::before{
  content:'実';position:absolute;left:0;top:11px;
  font-size:9.5px;font-weight:800;letter-spacing:.1em;color:#fff;background:var(--red);
  border-radius:2px;padding:2px 5px;line-height:1;
}
ul.dont,ul.do{list-style:none;margin-top:9px;}
ul.dont li,ul.do li{position:relative;padding-left:27px;margin:.85em 0;}
ul.dont li::before{content:'✕';position:absolute;left:3px;top:1px;color:var(--red);font-weight:800;font-size:14px;}
ul.do li::before{content:'○';position:absolute;left:2px;top:1px;color:#2f6b3d;font-weight:800;font-size:13px;}
ul.dont li b,ul.do li b{display:block;font-size:13.5px;font-weight:800;line-height:1.75;}
ul.dont li span,ul.do li span{display:block;font-size:13px;line-height:1.95;color:var(--ink2);margin-top:4px;}
.tsukare{
  margin-top:20px;border-top:1px solid var(--paper-line);padding-top:15px;
  font-size:13.5px;line-height:2.05;color:var(--ink2);
}