/* 유형 소개·전체 유형·테스트 소개 페이지 공통 스타일 (index.html과 같은 색·글꼴) */
:root{
  --cobalt:#2B4BEE; --cobalt-deep:#2240D8;
  --paper:#F3F5F9; --ink:#141833; --amber:#FFC23D;
  --tile:#1B2150; --muted:#6B7390; --line:#D5DAE5; --card:#FFFFFF;
  --display:"Black Han Sans","Pretendard Variable",sans-serif;
  --body:"Pretendard Variable",Pretendard,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:"IBM Plex Mono","Pretendard Variable",Pretendard,"Malgun Gothic",monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.7;word-break:keep-all;overflow-wrap:anywhere}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
.col{max-width:680px;margin:0 auto;padding:0 16px}

/* 상단 */
.hero{background:var(--cobalt);color:var(--paper);padding:16px 0 34px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}
.brand{font-family:var(--display);font-size:18px;text-decoration:none}
.top nav{display:flex;gap:14px;font-size:14px;font-weight:600}
.top nav a{text-decoration:none;opacity:.9}
.top nav a:hover{text-decoration:underline;text-underline-offset:3px}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--amber);margin:0 0 8px}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,10vw,52px);line-height:1.12;margin:0 0 12px}
.hero .lead{font-size:18px;font-weight:600;margin:0 0 20px;opacity:.95}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;border-radius:999px;background:rgba(243,245,249,.14);font-size:14px;font-weight:700}
.chips b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--tile);color:var(--amber);font-family:var(--mono);font-size:13px}

/* 본문 */
main{padding:28px 0 8px}
section{margin-bottom:30px}
h2{font-size:21px;font-weight:800;margin:0 0 10px;letter-spacing:-.01em}
h3{font-size:17px;font-weight:800;margin:18px 0 4px}
p{margin:0 0 10px;font-size:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 18px 8px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.tags span{font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;background:#E7EBF8;color:var(--cobalt-deep)}
ul.list{margin:0 0 10px;padding-left:20px}
ul.list li{margin-bottom:4px}
.quote{font-size:18px;font-weight:800;line-height:1.5;padding:16px 18px;border-left:4px solid var(--amber);background:var(--card);border-radius:0 12px 12px 0;margin:0}
.fine{font-size:13.5px;color:var(--muted)}

/* 회사 목록 */
.co{display:grid;gap:10px;margin-bottom:10px}
.co-row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.co-row .flap{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px}
.co-row .tile{display:inline-grid;place-items:center;min-width:26px;height:32px;padding:0 4px;border-radius:4px;background:var(--ink);color:var(--amber);font-family:var(--display);font-size:18px;position:relative}
.co-row .tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55)}
.co-row p{margin:0;font-size:15px}

/* 동료·유형 카드 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.tcard{display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;transition:border-color .15s, transform .15s}
.tcard:hover{border-color:var(--cobalt);transform:translateY(-2px)}
.tcard .k{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--cobalt-deep)}
.tcard b{display:block;font-size:17px;margin:2px 0 4px}
.tcard span{display:block;font-size:14px;color:var(--muted);line-height:1.5}
.tcard .co-names{margin-top:6px;font-size:13px;color:var(--ink)}

/* 시작 버튼 */
.cta{display:flex;align-items:center;justify-content:center;min-height:56px;border-radius:14px;background:var(--amber);color:var(--ink);font-weight:800;font-size:17px;text-decoration:none;box-shadow:0 6px 0 #C98F12;margin:6px 0 14px}
.cta:active{transform:translateY(4px);box-shadow:0 2px 0 #C98F12}

/* 하단 */
footer{border-top:1px solid var(--line);margin-top:20px;padding:18px 0 40px;font-size:13px;color:var(--muted);line-height:1.65}
footer p{margin:0 0 6px;font-size:13px}
footer nav{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:10px;font-weight:600;color:var(--ink)}

@media (prefers-reduced-motion: reduce){ *{transition:none !important} }