/* 테스트 홈페이지 전용: base.css(2차 시안·시연본) 위에 덧붙인다 */
.testNote { padding: 8px 16px; background: #fff5dc; color: #6d4b0d; font-size: 14px; text-align: center; }
.testNote b { font-family: var(--cute); font-weight: 400; }

/* 펼침 메뉴 */
.nav { gap: 6px; }
.dd { position: relative; }
.dd > button { min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--ink); font: 400 17px var(--cute); cursor: pointer; }
.dd > button::after { content: " ⌄"; color: var(--soft); }
.dd > button:hover, .dd.open > button { color: var(--teal); }
.ddBox { position: absolute; top: 100%; left: 0; z-index: 30; display: none; min-width: 210px; padding: 8px; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 6px; background: #fff; box-shadow: 0 14px 30px rgba(14, 51, 64, .12); }
.dd.open .ddBox { display: grid; }
.ddBox a { display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 4px; text-decoration: none; font: 400 16px var(--soft-text); white-space: nowrap; }
.ddBox a:hover { background: var(--mist); color: var(--teal); }
.ddBox small { padding: 8px 10px 2px; color: var(--soft); font: 400 13px var(--cute); }
@media (max-width: 1080px) {
  .head.open .nav { gap: 0; padding: 4px 16px 12px; }
  .head.open .dd > button { width: 100%; text-align: left; padding: 0; }
  .head.open .ddBox { position: static; display: grid; min-width: 0; padding: 0 0 6px 10px; border: 0; box-shadow: none; }
  .head.open .ddBox a { min-height: 40px; }
}

/* 떠 있는 바로가기 */
.quick { position: fixed; right: 18px; bottom: 20px; z-index: 15; display: grid; gap: 6px; }
.quick a, .quick button { display: grid; place-items: center; width: 64px; min-height: 58px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); font: 400 13px/1.3 var(--cute); text-align: center; text-decoration: none; box-shadow: 0 6px 16px rgba(14, 51, 64, .1); cursor: pointer; }
.quick a:hover { color: var(--teal); border-color: var(--teal); }
@media (max-width: 1440px) { .quick { display: none; } }

/* 검사 구입 */
.buyTabs { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; margin-bottom: 22px; }
.buyTabs b { color: var(--soft); font: 400 15px var(--cute); }
.buyTabs .levels { margin: 0; }
.levels a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: 400 16px var(--cute); text-decoration: none; }
.levels a.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.subTabs { display: flex; gap: 6px; margin: -8px 0 22px; }
.subTabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-bottom: 3px solid transparent; color: var(--soft); font: 400 17px var(--cute); text-decoration: none; }
.subTabs a.on { border-color: var(--teal); color: var(--ink); }
.recommend { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 18px; padding: 18px; border: 1px solid var(--line); border-left: 6px solid var(--skill); border-radius: 6px; background: #fffaf0; }
.recommend h2 { grid-column: 1 / -1; font: 400 20px var(--cute); }
.recommend input { height: 50px; padding: 0 14px; border: 1px solid #9db6b3; border-radius: 6px; font: 400 16px var(--soft-text); }
.recommend .btn { min-height: 50px; }
#assign { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
#assign select { height: 50px; padding: 0 10px; border: 1px solid #9db6b3; border-radius: 6px; background: #fff; color: var(--ink); font: 400 16px var(--soft-text); }
@media (max-width: 860px) { #assign { grid-template-columns: minmax(0, 1fr); } }
.recoOut { grid-column: 1 / -1; color: var(--ink); font-size: 15px; }
.recoOut a { margin-right: 10px; font-family: var(--cute); }
.test.k-org { grid-template-columns: minmax(0, 1fr) 170px 92px; }
.test.k-coupon { grid-template-columns: minmax(0, 1fr) 92px; }
.test.k-personal { grid-template-columns: minmax(0, 1fr) 104px 104px; }
.test.soon { opacity: .7; }
.testInfo .tgt { display: block; color: var(--soft); font-size: 14px; }
.testInfo .pdf { margin-left: 8px; font: 400 14px var(--cute); color: var(--mind); }
.soonTag { align-self: center; justify-self: end; padding: 4px 10px; border-radius: 12px; background: var(--mist); color: var(--soft); font: 400 14px var(--cute); }
.docs { display: grid; gap: 6px; margin-top: 12px; }
.docs button { min-height: 40px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); font: 400 15px var(--cute); cursor: pointer; }
@media (max-width: 860px) {
  .buyTabs { grid-template-columns: 1fr; }
  .test.k-org, .test.k-personal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .test.k-coupon { grid-template-columns: minmax(0, 1fr) 100px; }
  .test.k-coupon .testInfo { grid-column: auto; }
}

/* 교육 */
.eduGrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.edu { display: flex; flex-direction: column; padding: 20px 0 24px; border-top: 1px solid var(--line); }
.edu small { color: var(--c, var(--teal)); font: 400 14px var(--cute); }
.edu h3 { margin: 4px 0 6px; font: 400 22px/1.35 var(--cute); }
.edu p { flex: 1; margin: 0 0 12px; color: var(--soft); font-size: 15px; }
.edu .acts { display: flex; gap: 14px; }
.edu .acts a { display: inline-flex; align-items: center; min-height: 40px; font: 400 16px var(--cute); color: var(--teal); }
.eduHero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end; padding: 28px; border-radius: 6px; background: var(--mist); }
.eduHero h1 { font: 400 34px/1.3 var(--cute); }
.eduHero p { margin: 8px 0 0; }
.pdfFrame { width: 100%; height: 760px; margin-top: 22px; border: 1px solid var(--line); border-radius: 6px; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; max-height: 280px; overflow: auto; padding: 10px; border: 1px solid #9db6b3; border-radius: 6px; }
.checks label { display: flex; align-items: center; gap: 8px; min-height: 40px; font: 400 15px var(--soft-text); }
.checks input { width: 18px; height: 18px; min-height: 0; margin: 0; accent-color: var(--teal); }
@media (max-width: 860px) {
  .eduGrid, .checks { grid-template-columns: minmax(0, 1fr); }
  .eduHero { grid-template-columns: minmax(0, 1fr); }
  .pdfFrame { height: 70vh; }
}

/* 상담·안내 */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.card { padding: 22px; border: 1px solid var(--line); border-top: 5px solid var(--teal); border-radius: 6px; }
.card h2 { font: 400 21px var(--cute); }
.card p { margin: 6px 0 14px; color: var(--soft); font-size: 15px; }
@media (max-width: 860px) { .cards3 { grid-template-columns: minmax(0, 1fr); } }

/* 온라인 검사 */
.q { padding: 18px 0; border-bottom: 1px solid var(--line); }
.q p { margin: 0 0 10px; font-weight: 700; }
.scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.scale label { display: grid; place-items: center; min-height: 52px; padding: 4px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; text-align: center; cursor: pointer; }
.scale input { position: absolute; opacity: 0; }
.scale label:has(input:checked) { border-color: var(--teal); background: var(--teal); color: #fff; }
.scale label:has(input:focus-visible) { outline: 3px solid var(--skill); }
.progress { height: 8px; margin: 10px 0 0; border-radius: 4px; background: var(--mist); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--teal); }
.report { padding: 28px; border: 1px solid var(--line); border-top: 6px solid var(--ink); border-radius: 6px; }
.report h2 { font: 400 24px var(--cute); }
.bars { display: grid; gap: 14px; margin: 20px 0; }
.bars div { display: grid; grid-template-columns: 120px minmax(0, 1fr) 48px; gap: 12px; align-items: center; }
.bars span { height: 18px; border-radius: 3px; background: var(--mist); overflow: hidden; }
.bars span i { display: block; height: 100%; }

/* 결과자료실·관리자 */
.loginBox { max-width: 440px; padding: 26px; border: 1px solid var(--line); border-top: 6px solid var(--teal); border-radius: 6px; }
.loginBox .btn { width: 100%; margin-top: 8px; }
.social { display: grid; gap: 8px; }
.social button { min-height: 50px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: 400 16px var(--cute); color: var(--ink); cursor: pointer; }
.tbl { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.tbl th { padding: 12px; background: var(--mist); font: 400 15px var(--cute); text-align: left; white-space: nowrap; }
.tbl td { padding: 12px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr.click { cursor: pointer; }
.tbl tbody tr.click:hover { background: #f5faf9; }
.tbl tr.sel { background: var(--mist); }
.adminTabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.adminTabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); font: 400 16px var(--cute); text-decoration: none; }
.adminTabs a.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.adminTabs i { font-style: normal; display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--skill); color: #fff; font-size: 13px; }
pre.json { max-height: 220px; overflow: auto; padding: 10px; border-radius: 6px; background: #0e3340; color: #d6efe9; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
.panel textarea { width: 100%; min-height: 70px; padding: 8px; border: 1px solid #9db6b3; border-radius: 6px; font: 400 15px var(--soft-text); }
.panel .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mt { margin-top: 10px; }
.photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.photos img { width: 84px; height: 84px; object-fit: cover; border-radius: 4px; border: 1px solid var(--line); }
.prose h2 { margin: 26px 0 8px; font: 400 22px var(--cute); }
.prose p { margin: 0 0 10px; }
@media print {
  .testNote, .head, .foot, .quick, .wm, .noPrint, .toast { display: none !important; }
  .page { padding: 0; }
}

/* 3차 디자인: 글씨는 원티드 산스(제목·버튼·이름표) + 프리텐다드(본문). 주아·고운돋움·함렛은 쓰지 않는다 */
:root {
  --display: "Wanted Sans Variable", "Wanted Sans", "Pretendard Variable", "Malgun Gothic", sans-serif;
  --cute: var(--display);
  --soft-text: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;
  --ink: #0f2d38; --ink2: #163f4c; --soft: #5a7078; --line: #dbe4e2; --mist: #eef4f2;
  --teal: #12877c; --teal2: #0d6c63; --strength: #b2456e; --emotion: #7d63a8;
}
body { font-family: var(--soft-text); font-size: 16px; line-height: 1.72; letter-spacing: -.01em; color: var(--ink); }
h1, h2, h3, .logo b, .mark { font-family: var(--display); }
.hero h1, .sec h2, .pageTitle, .eduHero h1, .special h2, .codeBox h2, .report h2, .row h3, .prog h3, .edu h3, .doneBox strong, .card h2, .route h3, .logo b {
  font-weight: 700; letter-spacing: -.045em;
}
.hero h1 { font-size: clamp(38px, 4vw, 58px); font-weight: 800; line-height: 1.18; letter-spacing: -.055em; }
.pageTitle { font-size: 40px; line-height: 1.2; margin-bottom: 4px; }
.sec h2 { font-size: 44px; line-height: 1.15; }
.eduHero h1 { font-size: 38px; }
.logo b { font-size: 20px; }
.logo small { font-family: var(--display); font-weight: 500; letter-spacing: .14em; font-size: 9.5px; }
.mark { font-weight: 800; border-radius: 10px; }
.pageLead, .pitch p { color: var(--soft); }
.hero .pitch p { color: #b9d2d3; font-size: 17px; }
.btn, button.btn, .login, .menu, .codeForm button, .result, .more, .dd > button, .levels a, .levels button, .areas button, .subTabs a, .adminTabs a, .quick a, .quick button, .docs button, .social button, .edu .acts a, .detailBack, .route a, .foot nav a,
.ddBox small, .edu small, .row small, .prog small, .legend, .chips, .steps, .buyTabs b, .review th, .tbl th, #appTable th, .test label, .fields label, .info dt, .testInfo a, .testInfo b, .cartItem b, .cart h2, .panel h2, .recommend h2, .areaHead, .agree, .codeShow, .tag, .soonTag, .testInfo .pdf, .bars b, .sum .total dd, .reviewSum b, .cartBar b, .testNote b, .steps li::before {
  font-family: var(--display); letter-spacing: -.02em;
}
.btn, button.btn, .login, .codeForm button, .levels a, .levels button, .areas button, .subTabs a, .adminTabs a, .docs button, .social button { font-weight: 600; }
.btn, button.btn { font-size: 15.5px; border-radius: 999px; padding-inline: 24px; }
.btn.solid { background: var(--teal); border-color: var(--teal); }
.btn.solid:hover { background: var(--teal2); border-color: var(--teal2); }
.btn.line:hover { background: var(--mist); }
.login { border-radius: 999px; font-size: 15px; }
.codeForm button, .codeForm input { border-radius: 999px; }
.levels a, .levels button, .areas button, .adminTabs a { border-radius: 999px; }
.testInfo a { font-weight: 650; font-size: 18px; text-decoration: none; }
.testInfo a:hover { color: var(--teal); text-decoration: underline; }
.testInfo b { font-weight: 600; font-variant-numeric: tabular-nums; }
.sum .total dd, .reviewSum b, .cartBar b { font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.review .num, .tbl td, .codeShow, .bars b, .sum dd { font-variant-numeric: tabular-nums; }
.ddBox small, .buyTabs b { font-size: 12px; font-weight: 600; color: var(--soft); letter-spacing: .04em; }
.edu small, .row small, .prog small, .legend, .chips, .steps, .review th, .tbl th, #appTable th, .test label, .fields label, .info dt, .agree, .tag, .soonTag { font-weight: 600; }
.cart h2, .panel h2, .recommend h2 { font-weight: 700; font-size: 19px; }

/* 메뉴: 화살표 없이 글자만, 아래 밑줄로 반응 */
.nav { gap: 4px; }
.dd > button { position: relative; padding: 0 14px; font-size: 15.5px; font-weight: 600; }
.dd > button::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 1px; background: var(--teal); transform: scaleX(0); transition: transform .2s ease; }
.dd > button:hover::after, .dd.open > button::after { transform: scaleX(1); }
.ddBox { border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: 0 18px 40px rgba(15, 45, 56, .14); }
.ddBox a { border-radius: 8px; font-family: var(--soft-text); font-weight: 500; font-size: 15px; }
@media (max-width: 1080px) { .head.open .dd > button::after { display: none; } .head.open .ddBox { box-shadow: none; } }

/* 첫 화면 */
.hero { background: radial-gradient(70% 90% at 78% 40%, rgba(32, 160, 146, .28), transparent 70%), linear-gradient(140deg, #0b2731 0%, #113a46 55%, #15505c 100%); }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%); mask-image: linear-gradient(90deg, #000 0%, transparent 55%); }
.pitch { position: relative; z-index: 2; }
.btn.on { background: #fff; color: var(--ink); }
.btn.on:hover { background: #dff1ed; }
.btn.off { border-color: rgba(255, 255, 255, .35); }
.btn.off:hover { background: rgba(255, 255, 255, .08); }

/* 결과표 3장: 올린 장이 앞으로 */
.sheets { z-index: 1; }
.sheet { position: absolute; width: 112%; margin: 0; aspect-ratio: 1100 / 781; border-radius: 4px; box-shadow: 0 18px 40px rgba(0, 18, 26, .45); cursor: pointer; transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s, filter .5s; }
.sheet img { position: static; display: block; width: 100%; height: 100%; border-radius: 4px; box-shadow: none; }
.sheets .sheet:nth-child(1) { left: 0; top: 268px; z-index: 1; }
.sheets .sheet:nth-child(2) { left: 16%; top: 150px; z-index: 2; }
.sheets .sheet:nth-child(3) { left: 32%; top: 36px; z-index: 3; }
.sheets .sheet:not(.front) { filter: brightness(.86) saturate(.9); }
.sheets .sheet.front { z-index: 5; filter: none; transform: translateY(-12px); box-shadow: 0 30px 70px rgba(0, 18, 26, .6); }
.sheet:focus-visible { outline: 3px solid var(--skill); outline-offset: 4px; }
.sheet .radar { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sheet .shape { transform-box: view-box; transform-origin: 207.5px 363.75px; }
.sheet .wipe { position: absolute; display: block; background: #fff; transform-origin: right center; transform: scaleX(0); }
.sheet.play .wipe { animation: wipe 1.15s cubic-bezier(.25, .8, .25, 1) var(--d, 0s) both; }
.sheet.play .shape { animation: grow 1.3s cubic-bezier(.2, .9, .25, 1.15) .15s both; }
@keyframes wipe { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes grow { 0% { transform: scale(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet.play .wipe, .sheet.play .shape { animation: none !important; transition: none; }
}
@media (max-width: 860px) {
  .sheet { width: 88%; }
  .sheets .sheet:nth-child(1) { left: 0; top: 40vw; }
  .sheets .sheet:nth-child(2) { left: 12%; top: 20vw; }
  .sheets .sheet:nth-child(3) { left: 24%; top: 0; }
  .sheets .sheet.front { transform: translateY(-6px); }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .pageTitle { font-size: 30px; }
  .sec h2 { font-size: 32px; }
  .eduHero h1 { font-size: 29px; }
}

/* 상자: 위쪽 굵은 선 대신 둥근 모서리와 옅은 그림자 */
.codeBox, .cart, .doneBox, .report, .loginBox, .card, .panel, .recommend { border-radius: 18px; border-top-width: 1px; border-color: var(--line); box-shadow: 0 10px 30px rgba(15, 45, 56, .06); }
.codeBox { position: relative; overflow: hidden; border: 0; box-shadow: 0 24px 50px rgba(15, 45, 56, .12); }
.codeBox::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--career), var(--skill), var(--study), var(--mind)); }
.cart { border-top: 1px solid var(--line); }
.cart::before { content: ""; display: block; height: 4px; margin: -22px -22px 18px; border-radius: 18px 18px 0 0; background: linear-gradient(90deg, var(--career), var(--skill), var(--study), var(--mind)); }
.recommend { border-left-width: 1px; background: linear-gradient(120deg, #fff8ec, #fff); }
.eduHero { border-radius: 22px; background: linear-gradient(120deg, #e6f2ef, #f4f1fa); }
.tableWrap { border-radius: 14px; }
.fields input, .fields select, .fields textarea, .filters input, .test select, .test input, .recommend input, .panel select, .panel textarea, #assign select { border-radius: 10px; border-color: #c4d4d1; }
.fields input:focus, .fields select:focus, .fields textarea:focus, .filters input:focus, .test select:focus, .test input:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(18, 135, 124, .15); }

/* 영역 색 */
.areaHead { color: var(--c, var(--teal)); border-bottom: 2px solid var(--c, var(--teal)); font-size: 17px; font-weight: 700; }
.areaHead::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--teal)); }
.test.picked { background: linear-gradient(90deg, rgba(18, 135, 124, .08), transparent 70%); box-shadow: -12px 0 0 rgba(18, 135, 124, .08); }
.eduGrid { gap: 0 20px; }
.edu { padding: 22px 22px 20px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: inset 0 4px 0 var(--c, var(--teal)); transition: transform .2s, box-shadow .2s; }
.edu:hover { transform: translateY(-3px); box-shadow: inset 0 4px 0 var(--c, var(--teal)), 0 14px 30px rgba(15, 45, 56, .08); }
.edu small { color: var(--c, var(--teal)); }
.edu h3 { font-size: 20px; }
.row h3 { font-size: 23px; }
.prog img { border-radius: 14px; }
.special { background: radial-gradient(60% 120% at 90% 50%, rgba(201, 129, 31, .18), transparent 70%), var(--ink2); }
.programs { background: linear-gradient(180deg, #eef4f2, #f6f3fa); }
.tag { border-radius: 999px; }
.foot { background: #0b2731; }
@media (prefers-reduced-motion: reduce) { .edu, .edu:hover { transition: none; transform: none; } }

/* 4차 움직임: 처음 열릴 때 한 번(제목·결과표), 보일 때 한 번(막대·육각형·사진), 누르거나 올릴 때(결과표·검사 줄·버튼) */
#app.enter { animation: pageIn .45s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

/* 첫 화면: 은은하게 흐르는 빛, 제목 줄이 아래에서 올라옴, 결과표가 차례로 놓임 */
.hero::before { content: ""; position: absolute; inset: -25%; pointer-events: none; background: radial-gradient(32% 38% at 64% 42%, rgba(52, 196, 176, .2), transparent 70%), radial-gradient(26% 30% at 30% 80%, rgba(201, 129, 31, .12), transparent 70%); animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(-3%, -2%) rotate(0deg); } to { transform: translate(4%, 3%) rotate(8deg); } }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .ln > span { display: inline-block; animation: lineUp .95s cubic-bezier(.2, .8, .2, 1) both; }
.hero h1 .ln + .ln > span { animation-delay: .12s; }
.hero .pitch p { animation: fadeUp .8s cubic-bezier(.2, .8, .2, 1) .38s both; }
.hero .cta { animation: fadeUp .8s cubic-bezier(.2, .8, .2, 1) .5s both; }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.sheets .sheet:nth-child(1) { --k: 6; --i: 0; }
.sheets .sheet:nth-child(2) { --k: 11; --i: 1; }
.sheets .sheet:nth-child(3) { --k: 18; --i: 2; }
.sheet { --lift: 0px; transform: translate3d(calc(var(--mx, 0) * var(--k) * 2px), calc(var(--my, 0) * var(--k) * 2px - var(--lift)), 0); animation: sheetIn 1s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * .14s + .2s) both; }
.sheets .sheet.front { --lift: 12px; transform: translate3d(calc(var(--mx, 0) * var(--k) * 2px), calc(var(--my, 0) * var(--k) * 2px - var(--lift)), 0); }
.sheets.intro .sheet.play .shape { animation-delay: 1.15s; }
.sheets.intro .sheet.play .wipe { animation-delay: calc(var(--d, 0s) + 1s); }
@keyframes sheetIn { from { opacity: 0; translate: 70px 40px; rotate: 2deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }

/* 버튼: 살짝 떠오름 */
.btn, button.btn, .codeForm button { transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s; }
.btn:hover, button.btn:hover, .codeForm button:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 45, 56, .16); }
.hero .btn:hover, .special .btn:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }

/* 검사 코드 상자: 윗선이 왼쪽부터 그어짐 */
.codeBox::before { transform-origin: left; transition: transform 1.2s cubic-bezier(.7, 0, .2, 1) .3s; }
.mo .codeBox.rv:not(.in)::before { transform: scaleX(0); }

/* 바로 가기: 화살표 대신 짧은 선이 늘어남 */
.route a { transition: color .2s, padding .25s; }
.route a::after { content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--line); transition: width .25s, background .25s; }
.route a:hover { padding-left: 6px; }
.route a:hover::after { width: 30px; background: var(--teal); }

/* 검사 줄: 작은 막대그래프가 자라고, 올리면 위 선이 영역 색으로 그어짐 */
.row { position: relative; }
.row::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--c, var(--teal)); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.row:hover::before { transform: scaleX(1); }
.row:hover h3 { color: var(--c, var(--teal)); }
.row span { color: var(--c, var(--teal)); }
.bar { align-items: flex-end; height: 30px; width: 84px; gap: 4px; }
.bar i { border-radius: 3px 3px 1px 1px; transform-origin: bottom; transition: transform .8s cubic-bezier(.3, 1.35, .5, 1) calc(var(--r, 0) * .09s + var(--j, 0) * .07s); }
.mo .row.rv:not(.in) .bar i { transform: scaleY(0); }
.row:hover .bar i { animation: bob .7s cubic-bezier(.3, 1.4, .5, 1) calc(var(--j, 0) * .05s); }
@keyframes bob { 0% { transform: scaleY(1); } 35% { transform: scaleY(.35); } 100% { transform: scaleY(1); } }

/* 특수직무군: 뒤에 큰 육각형이 그려지고 값이 퍼짐 */
.special { position: relative; overflow: hidden; }
.special .wrap { position: relative; z-index: 1; }
.hexArt { position: absolute; top: 50%; right: calc(max(16px, 50% - 640px) + 250px); width: 230px; height: 230px; translate: 0 -50%; pointer-events: none; }
.hexArt .rings { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1; }
.hexArt .rings > :nth-child(2) { transition-delay: .12s; } .hexArt .rings > :nth-child(3) { transition-delay: .24s; } .hexArt .rings > :nth-child(4) { transition-delay: .36s; } .hexArt .rings line { transition-delay: .5s; }
.hexArt polygon, .hexArt line { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s cubic-bezier(.6, 0, .2, 1); }
.hexArt .val { fill: rgba(231, 181, 110, .16); stroke: #e7b56e; stroke-width: 2; stroke-linejoin: round; transform-origin: 0 0; transition: transform 1.2s cubic-bezier(.2, .9, .25, 1.15) .9s, opacity .4s .9s; }
.hexArt .val polygon { stroke-dasharray: none; }
.hexArt .val circle { fill: #e7b56e; stroke: none; }
.mo .special.rv:not(.in) .hexArt .rings * { stroke-dashoffset: 1; }
.mo .special.rv:not(.in) .hexArt .val { transform: scale(0); opacity: 0; }

/* 교육 사진: 아래에서 위로 열리고, 올리면 살짝 확대 */
.ph { display: block; overflow: hidden; border-radius: 14px; clip-path: inset(0 0 0 0 round 14px); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1) calc(var(--r, 0) * .1s); }
.ph img, .prog .ph img { border-radius: 0; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.prog:hover .ph img { transform: scale(1.05); }
.mo .prog.rv:not(.in) .ph { clip-path: inset(100% 0 0 0 round 14px); }

/* 단계 표시: 지금 단계가 두 번 퍼짐 */
.steps .now::before { animation: ping 1.4s ease-out .4s 2; }
@keyframes ping { from { box-shadow: 0 0 0 0 rgba(18, 135, 124, .45); } to { box-shadow: 0 0 0 12px rgba(18, 135, 124, 0); } }

/* 접수·결제 완료: 체크가 그려짐 */
.okMark { display: block; width: 64px; height: 64px; margin: 0 auto 14px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.okMark circle { stroke: var(--teal); stroke-dasharray: 1; animation: draw .7s cubic-bezier(.6, 0, .3, 1) .15s both; }
.okMark path { stroke: var(--teal); stroke-width: 4; stroke-dasharray: 1; animation: draw .45s cubic-bezier(.6, 0, .3, 1) .75s both; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.doneBox strong { animation: fadeUp .6s cubic-bezier(.2, .8, .2, 1) .9s both; }

/* 검사 결과: 막대가 차오르고 숫자가 올라감 */
.bars b:first-child { font-weight: 600; }
.bars span i { border-radius: 3px; transform-origin: left; animation: barIn 1.1s cubic-bezier(.2, .8, .2, 1) calc(var(--j, 0) * .09s + .2s) both; }
@keyframes barIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 860px) {
  .sheets .sheet.front { --lift: 6px; }
  .hexArt { width: 200px; height: 200px; top: 22%; right: -50px; opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  #app.enter, .hero::before, .hero h1 .ln > span, .hero .pitch p, .hero .cta, .sheet, .row:hover .bar i, .steps .now::before, .okMark *, .doneBox strong, .bars span i { animation: none !important; }
  .bar i, .ph, .ph img, .hexArt *, .codeBox::before, .row::before, .btn, .route a { transition: none !important; }
}

/* 5차 가독성: 고객 요청(11/08) — 글씨 크고 진하게, 버튼·간격 통일, 검사명·대상·가격·신청 한눈에, 교육 교구 사진 크게, 모바일 손가락 크기 */
:root { --soft: #46606a; --line: #d3dedb; --tap: 50px; }
body { font-size: 17px; line-height: 1.75; }
.pageLead { font-size: 17px; margin: 8px 0 28px; }
.hint { font-size: 15.5px; }
.testNote { font-size: 15px; }
/* 메뉴·로그인 */
.dd > button { font-size: 17px; min-height: 48px; }
.ddBox a { font-size: 16px; min-height: 44px; }
.ddBox small { font-size: 13px; }
.login { font-size: 16px; min-height: 46px; }
/* 버튼: 모든 버튼 같은 높이·글씨 */
.btn, button.btn { min-height: var(--tap); font-size: 16.5px; padding-inline: 26px; }
.levels a, .levels button, .areas button, .subTabs a, .adminTabs a, .docs button { min-height: 46px; font-size: 16.5px; }
.cart .btn { min-height: 54px; font-size: 17.5px; }
/* 입력칸 */
.fields label, .test label { color: var(--ink); }
.fields label { font-size: 16.5px; font-weight: 600; }
.fields input, .fields select, .fields textarea, .filters input { min-height: 54px; font-size: 17px; }
.test label { font-size: 14px; font-weight: 600; }
.test select, .test input { height: 50px; font-size: 17px; }
/* 단계 표시: 크게, 사이를 선으로 이어 지금 어디인지 바로 보이게 */
.steps { gap: 0; margin-bottom: 30px; font-size: 16.5px; }
.steps li { display: flex; align-items: center; color: var(--soft); font-weight: 600; }
.steps li + li { padding-left: 14px; }
.steps li:not(:last-child) { padding-right: 14px; }
.steps li:not(:last-child)::after { content: ""; display: block; width: 28px; height: 2px; margin-left: 14px; background: var(--line); }
.steps li.did:not(:last-child)::after { background: var(--teal); }
.steps li::before { width: 30px; height: 30px; margin-right: 8px; font-size: 15px; }
.steps .now { color: var(--ink); font-weight: 700; }

/* 검사 구입: 단체/소량 줄 이름표를 키우고 탭을 크게 */
.buyTabs { gap: 10px 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: #f7faf9; }
.buyTabs b { font-size: 15px; letter-spacing: 0; color: var(--ink); }
.levels { gap: 8px; }
.levels a { min-height: 48px; padding: 0 20px; font-size: 17px; }
.pageTitle { margin-top: 6px; }
.areas { gap: 8px; margin: 14px 0 10px; }
.areaHead { margin-top: 34px; font-size: 19px; padding-bottom: 10px; }
/* 검사 한 줄: 왼쪽 정보(검사명→대상→설명→가격·상세), 오른쪽 입력칸 */
.test { gap: 12px 14px; padding: 22px 0; align-items: center; }
.testInfo { display: grid; gap: 4px; }
.testInfo .tName { justify-self: start; font-size: 21px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.testInfo .tgt { justify-self: start; padding: 2px 10px; border-radius: 999px; background: var(--mist); color: var(--ink2); font-size: 14.5px; font-weight: 600; }
.testInfo p { margin: 2px 0 0; color: var(--soft); font-size: 16px; line-height: 1.6; }
.tMeta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 6px; }
.tMeta .price { font-family: var(--display); font-size: 20px; font-weight: 800; color: var(--teal2); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tMeta .price small { margin-left: 8px; font-size: 15px; font-weight: 600; color: var(--ink2); }
.tLink { display: inline-flex; align-items: center; min-height: 36px; font-family: var(--display); font-size: 15.5px; font-weight: 600; color: var(--ink2); text-underline-offset: 3px; }
.tLink:hover { color: var(--teal); }
.tLink.pdf { color: var(--mind); }
.test { grid-template-columns: minmax(0, 1fr) 128px 100px 92px; }
.test.k-org { grid-template-columns: minmax(0, 1fr) 180px 100px; }
.test.k-personal { grid-template-columns: minmax(0, 1fr) 110px 110px; }
.test.k-coupon { grid-template-columns: minmax(0, 1fr) 100px; }
.soonTag { font-size: 15px; }
/* 장바구니 */
.cart h2 { font-size: 20px; }
.cartItem { font-size: 16px; }
.cartItem b { font-size: 17px; font-weight: 700; }
.cartItem small { font-size: 15px; }
.sum div { font-size: 16.5px; }
.docs button { font-size: 15.5px; }

/* 교육 목록: 교구 사진이 보이는 카드, 버튼 두 개 */
.eduTabs { margin: 26px 0 22px; }
.eduTabs em { margin-left: 4px; font-style: normal; font-size: 14px; opacity: .65; }
.eduGrid { gap: 22px; }
.edu { padding: 0; margin: 0; overflow: hidden; box-shadow: inset 0 4px 0 var(--c, var(--teal)); }
.edu:hover { box-shadow: inset 0 4px 0 var(--c, var(--teal)), 0 16px 34px rgba(15, 45, 56, .1); }
.eduPic { display: block; aspect-ratio: 760 / 371; overflow: hidden; background: var(--mist); }
.eduPic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.edu:hover .eduPic img { transform: scale(1.04); }
.eduBody { display: flex; flex: 1; flex-direction: column; padding: 18px 22px 22px; }
.edu small { font-size: 14.5px; }
.edu h3 { margin: 4px 0 8px; font-size: 21px; }
.edu h3 a { color: var(--ink); text-decoration: none; }
.edu h3 a:hover { color: var(--c, var(--teal)); }
.edu p { font-size: 16px; line-height: 1.6; margin-bottom: 12px; }
.eduFacts { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.eduFacts li { padding: 3px 11px; border-radius: 999px; background: var(--mist); color: var(--ink2); font-size: 14px; font-weight: 600; }
.edu .acts { gap: 8px; margin-top: auto; }
.edu .acts .btn { flex: 1; min-height: 46px; padding-inline: 12px; font-size: 16px; color: var(--ink); }
.edu .acts .btn.solid { color: #fff; }

/* 교육 상세 */
.eduTop { align-items: center; padding: 34px 36px; }
.eduTop small { color: var(--c, var(--teal)); font-family: var(--display); font-size: 15px; font-weight: 700; }
.eduTop h1 { margin: 4px 0 8px; font-size: 40px; }
.eduTop p { max-width: 36em; font-size: 18px; color: var(--ink2); }
.eduTop .actions { flex-direction: column; margin: 0; }
.glance { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.glance li { display: grid; padding: 10px 18px; border-left: 4px solid var(--c, var(--teal)); border-radius: 10px; background: #fff; }
.glance b { font-family: var(--display); font-size: 18px; font-weight: 700; }
.glance span { color: var(--soft); font-size: 14.5px; }
.eduJump { position: sticky; top: 0; z-index: 6; display: flex; gap: 6px; margin: 18px 0 8px; padding: 10px 0; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); overflow-x: auto; }
.eduJump button { flex: none; min-height: 44px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: 600 16px var(--display); cursor: pointer; }
.eduJump button:hover { border-color: var(--c, var(--teal)); color: var(--c, var(--teal)); }
.eduSec { padding: 44px 0 8px; scroll-margin-top: 80px; }
.eduSec h2 { margin-bottom: 20px; font-size: 30px; font-weight: 700; letter-spacing: -.035em; }
.subHead { margin: 32px 0 14px; font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.gains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: g; }
.gains li { counter-increment: g; display: flex; gap: 14px; align-items: center; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; font-size: 18px; font-weight: 600; line-height: 1.5; }
.gains li::before { content: counter(g); flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--c, var(--teal)); color: #fff; font: 700 17px var(--display); }
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: f; }
.flow li { counter-increment: f; display: grid; gap: 4px; padding: 20px 22px; border-radius: 16px; background: var(--mist); }
.flow li::before { content: "0" counter(f); color: var(--c, var(--teal)); font: 700 15px var(--display); }
.flow b { font-family: var(--display); font-size: 19px; font-weight: 700; }
.flow span { color: var(--ink2); font-size: 16px; }
.remain { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 16px 0 0; padding: 18px 22px; border-radius: 16px; background: var(--ink); color: #fff; font-size: 17px; }
.remain b { font-family: var(--display); color: #9fe0d5; }
.curri { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.cHead, .cRow { display: grid; grid-template-columns: 76px minmax(0, 190px) minmax(0, 1fr) 150px; gap: 18px; align-items: center; padding: 16px 22px; }
.cHead { background: var(--ink); color: #fff; font: 600 15px var(--display); }
.cRow { border-top: 1px solid var(--line); }
.cRow:nth-child(odd) { background: #f8fbfa; }
.cNo { display: grid; place-items: center; align-content: center; width: 50px; height: 50px; border-radius: 12px; background: var(--c, var(--teal)); color: #fff; font: 800 20px/1.05 var(--display); }
.cNo small { font-size: 11px; font-weight: 600; opacity: .85; }
.cTopic { font-family: var(--display); font-size: 18px; font-weight: 700; line-height: 1.4; }
.cActs { margin: 0; padding-left: 18px; font-size: 16.5px; line-height: 1.7; }
.cTool { justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--mist); color: var(--ink2); font: 600 15px var(--display); }
.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.tools figure { margin: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
.toolPic { display: block; width: 100%; padding: 0; border: 0; background: var(--mist); cursor: zoom-in; overflow: hidden; }
.toolPic img { display: block; width: 100%; aspect-ratio: 760 / 371; object-fit: cover; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.toolPic:hover img { transform: scale(1.03); }
.tools figcaption { display: grid; gap: 2px; padding: 16px 20px 18px; }
.tools figcaption b { font-family: var(--display); font-size: 19px; font-weight: 700; }
.tools figcaption span { color: var(--soft); font-size: 15.5px; }
.outs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.outs li { display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 12px; background: #f4f8f7; font-size: 17.5px; font-weight: 600; }
.outs li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--c, var(--teal)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat; }
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.voices blockquote { margin: 0; padding: 20px 22px; border-left: 4px solid var(--c, var(--teal)); border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(15, 45, 56, .06); }
.voices small { color: var(--c, var(--teal)); font: 700 14px var(--display); }
.voices p { margin: 6px 0 0; font-size: 16.5px; line-height: 1.65; }
.resultBar { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin: 22px 0 0; padding: 18px 22px; border-radius: 16px; background: var(--ink); color: #cfe3e2; }
.resultBar b { color: #fff; font-family: var(--display); font-size: 19px; }
.eduEnd { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 48px; padding: 26px 30px; border-radius: 20px; background: linear-gradient(120deg, #e6f2ef, #f4f1fa); }
.eduEnd p { margin: 0; font-size: 18px; }
.eduEnd .actions { margin: 0; }
.zoom { width: min(1000px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 14px; border: 0; border-radius: 16px; }
.zoom::backdrop { background: rgba(8, 25, 31, .75); }
.zoom img { display: block; width: 100%; border-radius: 10px; }
.zoom p { margin: 10px 4px; font: 700 18px var(--display); }
.zoom form { display: flex; justify-content: flex-end; }

/* 관리자: 검사·교육 관리 */
.mngTabs { margin-bottom: 14px; }
.mngTabs a { min-height: 42px; font-size: 15.5px; }
.tbl.mng td { vertical-align: middle; }
.tbl.mng input:not([type=checkbox]), .tbl.mng select { width: 100%; min-width: 90px; height: 44px; padding: 0 10px; border: 1px solid #c4d4d1; border-radius: 8px; font: 400 15.5px var(--soft-text); color: var(--ink); background: #fff; }
.tbl.mng td:nth-child(2) input { min-width: 170px; }
.tbl.mng td:nth-child(4) input { min-width: 260px; }
.tbl.mng input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--teal); }
.tbl, #appTable { font-size: 15.5px; }

/* 홈 아래쪽 글씨 */
.row p { font-size: 16.5px; }
.row small, .prog small { font-size: 14.5px; }
.prog p { font-size: 16px; }
.route a { font-size: 17px; min-height: 50px; }
.codeBox p { font-size: 16px; }
.foot { font-size: 16px; }

@media (max-width: 960px) {
  .eduGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voices, .flow { grid-template-columns: minmax(0, 1fr); }
  .cHead { display: none; }
  .cRow { grid-template-columns: 56px minmax(0, 1fr); gap: 6px 14px; align-items: start; }
  .cNo { grid-row: span 3; }
  .cActs, .cTool { grid-column: 2; }
  .cartBar b { font-size: 24px; }
  .cartBar small { font-size: 15px; }
  .cartBar .btn { min-height: 54px; font-size: 17px; padding-inline: 24px; }
}
@media (max-width: 860px) {
  body { font-size: 17px; }
  .wrap, .narrow { width: calc(100% - 32px); }
  .pageTitle { font-size: 30px; }
  .pageLead { font-size: 16.5px; }
  .testNote { font-size: 14px; }
  /* 카테고리: 한 줄로 밀어서 넘기기(줄바꿈으로 화면을 차지하지 않게) */
  .buyTabs { padding: 12px; gap: 6px; }
  .levels { flex-wrap: nowrap; overflow-x: auto; margin-inline: -12px; padding: 2px 12px 6px; scrollbar-width: none; }
  .levels::-webkit-scrollbar { display: none; }
  .levels a, .levels button { flex: none; }
  .areas { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .areas::-webkit-scrollbar { display: none; }
  .areas button { flex: none; }
  .test { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 20px 0; }
  .test.k-org, .test.k-personal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .test.k-coupon { grid-template-columns: minmax(0, 1fr) 110px; }
  .test.k-coupon .testInfo { grid-column: auto; }
  .test.k-coupon.soon .testInfo { grid-column: 1 / -1; }
  .testInfo .tName { font-size: 20px; }
  .test select, .test input { height: 52px; }
  .steps { font-size: 15px; }
  .steps li:not(:last-child)::after { width: 12px; margin-left: 8px; }
  .steps li:not(:last-child) { padding-right: 8px; }
  .steps li + li { padding-left: 8px; }
  .steps li::before { width: 26px; height: 26px; margin-right: 5px; }
  .eduGrid, .gains, .tools { grid-template-columns: minmax(0, 1fr); }
  .eduTop { padding: 24px 20px; }
  .eduTop h1 { font-size: 30px; }
  .eduTop p { font-size: 17px; }
  .eduTop .actions { flex-direction: row; }
  .eduSec h2 { font-size: 25px; }
  .glance li { flex: 1 1 140px; padding: 8px 14px; }
  .eduEnd { padding: 22px 20px; }
  .eduEnd .actions .btn { flex: 1 1 100%; }
  .dd > button { font-size: 18px; min-height: 52px; }
  .head.open .ddBox a { min-height: 48px; font-size: 17px; }
  .menu { min-height: 48px; font-size: 16px; padding: 0 18px; }
}
@media (prefers-reduced-motion: reduce) { .eduPic img, .toolPic img { transition: none; } }
.testInfo .tMeta .price { margin-left: 0; }
.testInfo .tMeta .tLink { margin-left: 0; padding: 0 14px; border: 1px solid #b9cbc8; border-radius: 999px; font-size: 15px; text-decoration: none; }
.testInfo .tMeta .tLink:hover { border-color: var(--teal); background: var(--mist); }
.testInfo .tMeta .tLink.pdf { padding: 0 2px; border: 0; text-decoration: underline; }
@media (max-width: 860px) {
  .steps li:not(.now) { font-size: 0; }
  .steps li:not(.now)::before { font-size: 14px; margin-right: 0; }
}

/* 6차: 토스 테스트 결제창·약관·환불 규정·바닥글 사업자 정보 (카드사 심사 준비) */
.tossNote { margin: 0 0 16px; padding: 12px 16px; border-left: 5px solid #3182f6; border-radius: 6px; background: #eef5ff; color: var(--ink); font-size: 15.5px; }
.tossBox { min-height: 120px; }
#tossAgree { margin-bottom: 8px; }
.refundSum { margin: 18px 0 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: #f7faf9; color: var(--ink); font-size: 15px; line-height: 1.7; }
.refundSum a, .agree a, .report .hint a { color: var(--teal); font-weight: 600; }
.policy h2 { margin: 30px 0 8px; font-size: 21px; }
.policy p, .policy li { color: var(--ink); font-size: 16.5px; line-height: 1.8; }
.policy ul { padding-left: 22px; }
.draftNote { padding: 12px 16px; border: 1px dashed #c08a1e; border-radius: 6px; background: #fff7e6; }
.foot .biz { display: flex; flex-wrap: wrap; gap: 4px 22px; width: 100%; margin: 4px 0 0; padding-top: 20px; border-top: 1px solid #2c4b55; font-size: 14.5px; }
.foot .biz div { display: flex; gap: 6px; }
.foot .biz dt { color: #9fbcc0; }
.foot .biz dd { margin: 0; color: #fff; }
.foot .biz .todo { color: #ffd27a; }
.foot .copy { width: 100%; margin: 0; color: #9fbcc0; font-size: 13.5px; }

/* 7차 다듬기: 고객 답(11/09) "가독성·모바일 조금 더" — 좁은 폰(360px)에서 버튼 두 줄 깨짐, 추천 입력칸 눌림, 밀어서 넘기는 줄이 잘려 보이는 것, 손가락 크기 */
a, button { -webkit-tap-highlight-color: rgba(18, 135, 124, .14); }
.testInfo .tName, .edu h3 a { display: inline-block; padding: 8px 0; margin: -8px 0; }
.cNo small { font-size: 12.5px; }
@media (max-width: 860px) {
  /* 밀어서 넘기는 줄: 오른쪽 끝을 흐리게 해서 옆에 더 있다는 걸 보이게 */
  .levels, .areas, .eduJump { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); padding-right: 36px; }
  /* 교육 상세 첫 칸 버튼: 한 줄씩 꽉 차게 */
  .eduHero.eduTop .actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; justify-self: stretch; align-self: stretch; }
  .eduHero.eduTop .actions .btn { width: 100%; justify-content: center; white-space: nowrap; }
  /* 검사 추천: 입력칸과 버튼 위아래로 */
  .recommend { grid-template-columns: minmax(0, 1fr); }
  .recommend .btn { width: 100%; justify-content: center; }
  /* 본문 글줄 간격 조금 더, 회색 설명 글씨 진하게 */
  .testInfo p, .edu p, .prog p, .row p { line-height: 1.65; color: #3d5660; }
  .foot dl.biz dd { overflow-wrap: anywhere; }
  .foot dl.biz dt { white-space: nowrap; }
}

/* 실제 홈페이지(live.js): 시연용 단추 숨김 */
.live #fillDemo, .live #resetDemo { display: none !important; }
.contactBox { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--mist); }
.contactBox p { margin: 0 0 6px; }

/* 11/10 견적서 과세·면세 구분 */
.quoteMethod { display: inline-flex; gap: 10px; align-items: center; margin: 4px 0 14px; font-weight: 600; }
.quoteMethod select { min-height: 40px; }
.taxSum { display: grid; gap: 6px; justify-content: end; margin: 14px 0 0; }
.taxSum div { display: flex; gap: 18px; justify-content: space-between; min-width: 240px; }
.taxSum dd { font-variant-numeric: tabular-nums; }
.report .tblWrap { overflow-x: auto; }
@media print { .report .tblWrap { overflow: visible; } }

/* 11/10 대표님 요청: 단체검사·소량검사를 큰 구분으로, 그 아래 대상은 작게 */
.buyTabs2 { margin-bottom: 26px; }
.gTabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gTab { display: grid; gap: 2px; padding: 18px 22px; border: 2px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-decoration: none; }
.gTab b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.gTab span { font-size: 15px; font-weight: 600; color: var(--soft); }
.gTab small { font-size: 14px; color: var(--soft); }
.gTab.on { border-color: var(--ink); background: var(--ink); color: #fff; }
.gTab.on span, .gTab.on small { color: rgba(255,255,255,.82); }
.gTab:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.levels.sub { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0 0 0 4px; }
.levels.sub a { min-height: 42px; padding: 0 16px; font-size: 15.5px; }
@media (max-width: 640px) { .gTab { padding: 14px 14px; } .gTab b { font-size: 20px; } .gTab small { display: none; } }
.methodNote { margin: 4px 0 0; font-size: 15px; }
.methodNote small { color: var(--soft); }

/* 견적서: 연구소 엑셀 양식 */
.quoteTo { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 6px 0 14px; }
.quoteTo label { flex: 1 1 280px; display: grid; gap: 6px; font-weight: 600; }
.quoteTo input { min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 16px; }
.qsPreview { overflow-x: auto; padding: 12px; background: #eef1f2; border-radius: 12px; display: grid; gap: 12px; justify-content: center; }
.qsHolder { position: fixed; left: -10000px; top: 0; }
.qs { width: 794px; height: 1123px; box-sizing: border-box; padding: 56px 46px 40px; background: #fff; color: #111; font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; font-size: 13px; font-weight: 700; }
.qs h1 { margin: 0 0 22px; text-align: center; font-size: 40px; font-weight: 800; letter-spacing: .1em; }
.qs table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.qs th, .qs td { border: 1px solid #222; padding: 0 6px; height: 34px; vertical-align: middle; }
.qs th { font-weight: 700; text-align: center; white-space: nowrap; }
.qhead .date, .qhead .to, .qhead .say { border: 0; font-size: 15px; padding-left: 4px; }
.qhead .to { font-size: 17px; border-bottom: 1px solid #222; }
.qhead .sup { line-height: 1.6; }
.qhead .sm { font-size: 11.5px; }
.qhead .ceo { position: relative; }
.qhead .ceo img { position: absolute; right: 2px; top: -14px; width: 62px; height: 59px; }
.qsum { margin-top: 10px; }
.qsum th { width: 23%; height: 48px; line-height: 1.3; }
.qsum th small { font-size: 11px; }
.qsum td { font-size: 14.5px; padding-left: 12px; }
.qbody { margin-top: 10px; }
.qbody thead th { height: 34px; background: #f3f3f3; }
.qbody td { height: 30.5px; font-weight: 500; }
.qbody td.nm { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.qbody td.nm small { margin-left: 6px; font-size: 10.5px; font-weight: 500; color: #555; }
.qbody .r { text-align: right; } .qbody .c { text-align: center; }
.qbody tfoot th, .qbody tfoot td { height: 36px; font-weight: 800; }
.qnote { border: 1px solid #222; border-top: 0; height: 86px; padding: 8px 10px; position: relative; }
.qnote p { margin: 6px 0 0; font-size: 12px; font-weight: 500; }
.qnote .pg { position: absolute; right: 10px; bottom: 6px; }
@media print {
  body * { visibility: hidden; }
  .qsPreview, .qsPreview * { visibility: visible; }
  .qsPreview { position: absolute; left: 0; top: 0; padding: 0; background: none; display: block; }
  .qs { break-after: page; }
}
/* 검사 방식 칸이 생긴 단체검사 줄: 설명은 위 한 줄, 고르는 칸은 아래 한 줄 */
.test.has-mode { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.test.has-mode.m3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(0, 1fr); }
.test.has-mode.m2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.test.has-mode .testInfo { grid-column: 1 / -1; }
.test.has-mode select { font-size: 16px; }
@media (max-width: 640px) { .test.has-mode, .test.has-mode.m3, .test.has-mode.m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qsPreview { display: block; } .qsPreview .qs { margin: 0 auto 12px; box-shadow: 0 2px 10px rgba(0,0,0,.08); }
/* 11/10 대표님 요청: 상단 '심리검사' 펼침 메뉴에서도 단체검사·소량검사가 큰 목차, 아래 대상은 작은 목차 */
.dd .ddBox small { display: block; margin-top: 6px; padding: 10px 10px 6px; border-top: 1px solid var(--line); color: var(--ink); font-family: var(--display); font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; }
.dd .ddBox small:first-child { margin-top: 0; border-top: 0; }
.dd .ddBox small ~ a { min-height: 38px; padding-left: 22px; font-size: 14.5px; font-weight: 500; color: var(--ink2); }
.head.open .dd .ddBox small { font-size: 18px; }
.head.open .dd .ddBox small ~ a { min-height: 44px; font-size: 16px; padding-left: 24px; }
/* 결시자 추가 등록 안내 (11/10) */
.absentBox { margin-top: 24px; padding: 28px 30px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.absentBox h2 { font-size: 20px; font-weight: 800; }
.absentBox ul { margin: 14px 0 22px; padding-left: 20px; display: grid; gap: 8px; font-size: 16.5px; line-height: 1.5; }
.absentBox .btn { min-height: 52px; padding: 0 28px; font-size: 17px; }
.absentBox .hint { margin-top: 12px; }
.absentBox.shrink { background: #f7faf9; }
.absentBox.shrink .pageLead { font-size: 16px; margin: 8px 0 16px; }
.absentBox .pick { cursor: pointer; min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; }
.absentBox #shrinkSave { margin-top: 8px; }
/* 11/12 대표님 요청: 누를 수 있는 탭(대상·영역·표준화검사 신청/결시자 추가등록·교육 분야·결제 수단)을 고정 제목과 구분 — 모두 같은 모양
   안 고른 칸 = 연한 청록 바탕 + 청록 테두리, 고른 칸 = 진한 남색 채움(단체검사/소량검사 큰 칸과 같은 색) */
.levels a, .levels button, .areas button, .subTabs a {
  border: 1.5px solid #9ccac3; border-radius: 999px; background: var(--mist); color: var(--ink2); font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(14, 51, 64, .08); transition: background .15s, border-color .15s, color .15s;
}
.levels a:hover, .levels button:hover, .areas button:hover, .subTabs a:hover { border-color: var(--teal); background: #d9ede9; color: var(--ink); }
.levels a.on, .levels button.on, .levels .on, .areas button[aria-pressed=true], .subTabs a.on { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 0 2px 6px rgba(14, 51, 64, .22); }
.levels a.on:hover, .levels button.on:hover, .areas button[aria-pressed=true]:hover, .subTabs a.on:hover { background: var(--ink2); color: #fff; }
.subTabs { flex-wrap: wrap; gap: 8px; margin: 6px 0 22px; }
.subTabs a { min-height: 44px; padding: 0 18px; font-size: 16px; }
/* 휴대폰 메뉴: 누르는 줄 끝에 청록 › 표시(단체검사·소량검사 같은 목차 글자에는 없음) */
.head.open .ddBox a::after { content: "›"; margin-left: auto; padding-left: 12px; color: var(--teal); font-size: 22px; line-height: 1; }
/* 대문 바로 가기 줄도 같은 청록 › 표시 */
.route a::after, .route a:hover::after { content: "›"; width: auto; height: auto; border-radius: 0; background: none; color: var(--teal); font-size: 22px; line-height: 1; }
/* 교육 상세 위쪽 바로 가기 칩도 같은 모양 */
.eduJump button { border: 1.5px solid #9ccac3; background: var(--mist); color: var(--ink2); box-shadow: 0 1px 2px rgba(14, 51, 64, .08); }
.eduJump button:hover { border-color: var(--teal); background: #d9ede9; color: var(--ink); }
/* 11/13 대표님 요청: 검사 코드 입력을 첫 화면(결과표 그림 위에 걸치지 않게) 왼쪽 아래로, 좌우 폭 줄여서 — PC·휴대폰 */
.pitch { padding-bottom: 60px; }
.hero .code { margin: 34px 0 0; max-width: 460px; padding-top: 0; animation: fadeUp .8s cubic-bezier(.2, .8, .2, 1) .62s both; }
.hero .codeBox { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t r" "f f"; gap: 12px 16px; padding: 18px 20px 20px; color: var(--ink); box-shadow: 0 18px 40px rgba(0, 18, 26, .35); }
.hero .codeBox > div { grid-area: t; }
.hero .codeForm { grid-area: f; }
.hero .codeBox .result { grid-area: r; align-self: start; min-height: 32px; color: var(--ink2); font-size: 14.5px; }
.hero .codeBox h2 { font-size: 19px; }
.hero .codeBox p { max-width: none; margin: 2px 0 0; color: var(--soft); font-size: 14px; animation: none; }
.hero .codeForm input { height: 46px; padding: 0 16px; font-size: 16px; }
.hero .codeForm button { height: 46px; padding: 0 20px; font-size: 15.5px; }
.hero .code .hint { color: #b9d2d3; }
@media (max-width: 860px) {
  .pitch { padding-bottom: 28px; }
  .hero .code { margin-top: 24px; max-width: none; }
  .hero .codeBox { padding: 16px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .hero .code { animation: none; } }