/* ===========================
   RESET & BASE
=========================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo',sans-serif;background:#f5f5f0;color:#1a1a1a;min-height:100vh}
a{text-decoration:none;color:inherit}

/* ===========================
   HEADER
=========================== */
.header{
  background:#fff;border-bottom:1px solid #eee;
  padding:13px 20px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,.06)
}
.logo{font-size:19px;font-weight:700;color:#1a1a1a;display:flex;align-items:center;gap:7px;cursor:pointer}
.logo-dot{width:9px;height:9px;border-radius:50%;background:#E24B4A;display:inline-block}
.logo-sub{display:none!important;}
.live-badge{font-size:11px;color:#E24B4A;background:#fff0f0;padding:3px 10px;border-radius:20px;font-weight:600;border:1px solid #ffd0d0}

/* ===========================
   AD SLOTS
=========================== */
.ad-slot{
  background:#fff;border:1.5px dashed #ddd;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:#bbb;font-size:11px;gap:4px;flex-direction:column;
  text-align:center;line-height:1.5
}
.ad-banner{height:80px;width:100%;margin:8px 0}
.ad-rect{height:250px;width:100%;margin:12px 0}
/* 광고 승인 전 placeholder는 사용자에게 노출하지 않습니다. 실제 광고 단위 적용 시 ad-placeholder 클래스를 제거하세요. */
.ad-placeholder{display:none!important}

/* ===========================
   SEO CONTENT BLOCK
=========================== */
.seo-section{max-width:900px;margin:0 auto 32px;padding:0 16px}
.seo-box{background:#fff;border:1px solid #eee;border-radius:16px;padding:20px;box-shadow:0 1px 6px rgba(0,0,0,.04)}
.seo-box h2{font-size:18px;margin-bottom:10px;line-height:1.5;color:#1a1a1a}
.seo-box p{font-size:13px;color:#666;line-height:1.8;margin-bottom:12px}
.seo-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.seo-item{background:#fafafa;border:1px solid #eee;border-radius:12px;padding:13px}
.seo-item strong{display:block;font-size:13px;margin-bottom:5px;color:#222}
.seo-item span{font-size:12px;color:#777;line-height:1.6}
.notice-box{margin-top:12px;background:#fff8f8;border:1px solid #ffd0d0;border-radius:12px;padding:12px 14px;font-size:12px;color:#8a4b4b;line-height:1.7}

/* ===========================
   INFO MODAL
=========================== */
.info-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:18px;z-index:10000}
.info-modal.show{display:flex}
.info-card{width:min(560px,100%);max-height:82vh;overflow:auto;background:#fff;border-radius:16px;padding:22px;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.info-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;gap:12px}
.info-head h2{font-size:18px;color:#1a1a1a}
.info-close{border:0;background:#f5f5f0;border-radius:8px;padding:7px 10px;cursor:pointer;color:#555;font-weight:700}
.info-body{font-size:13px;color:#555;line-height:1.8}
.info-body h3{font-size:15px;margin:15px 0 6px;color:#222}
.info-body ul{padding-left:18px;margin:8px 0}
.info-body li{margin-bottom:5px}

/* 실제 AdSense ins 태그로 교체 시 이 클래스들 그대로 활용 */

/* ===========================
   HOME — HERO
=========================== */
.hero{
  background:#fff;padding:24px 20px 18px;text-align:center;
  border-bottom:1px solid #eee
}
.hero-new-tag{
  display:inline-block;font-size:12px;color:#E24B4A;font-weight:600;
  background:#fff0f0;padding:3px 12px;border-radius:20px;margin-bottom:10px;
  border:1px solid #ffd0d0
}
.hero h1{font-size:23px;font-weight:700;color:#1a1a1a;margin-bottom:6px;line-height:1.4}
.hero p{font-size:14px;color:#666;line-height:1.6}
.stat-row{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.stat{font-size:12px;color:#555;background:#f5f5f0;padding:4px 12px;border-radius:20px;border:1px solid #e8e8e0}

/* ===========================
   CATEGORY TABS
=========================== */
.cats{padding:12px 16px 8px;display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cats::-webkit-scrollbar{display:none}
.cat{
  white-space:nowrap;padding:6px 14px;border-radius:20px;font-size:13px;cursor:pointer;
  border:1px solid #ddd;background:#fff;color:#666;transition:all .15s;font-weight:500
}
.cat.on{background:#E24B4A;color:#fff;border-color:#E24B4A}
.cat:hover:not(.on){background:#f5f5f0}

/* ===========================
   TEST GRID
=========================== */
.page-layout{display:grid;grid-template-columns:1fr 180px;gap:14px;padding:12px 16px 30px;max-width:900px;margin:0 auto;align-items:start}
.test-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sidebar{}

.tcard{
  background:#fff;border:1px solid #eee;border-radius:14px;
  padding:18px 14px;cursor:pointer;transition:all .18s;position:relative;
  box-shadow:0 1px 4px rgba(0,0,0,.04)
}
.tcard:hover{border-color:#ccc;transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.1)}
.tcard:active{transform:translateY(0)}
.tc-thumb{
  position:relative;height:150px;border-radius:12px;overflow:hidden;margin-bottom:12px;
  background:linear-gradient(135deg,#fff2ef,#fff8ea 48%,#f1f7ff)
}
.tc-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.tcard:hover .tc-thumb img{transform:scale(1.035)}
.tc-thumb-fallback{
  display:none;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;
  gap:9px;padding:16px;text-align:center
}
.tc-thumb.no-img .tc-thumb-fallback{display:flex}
.tc-thumb.no-img img{display:none}
.thumb-emoji{font-size:48px;line-height:1}
.thumb-copy{font-size:13px;color:#444;font-weight:800;line-height:1.45;word-break:keep-all}
.tc-emoji{font-size:30px;margin-bottom:9px;display:block}
.tcard h3{font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:4px;line-height:1.4}
.tcard p{font-size:11px;color:#888;line-height:1.5}
.tc-footer{display:flex;justify-content:space-between;align-items:center;margin-top:11px}
.tc-badge{
  position:absolute;top:9px;right:9px;font-size:9px;padding:2px 7px;
  border-radius:10px;font-weight:700
}
.b-hot{background:#fff0f0;color:#cc3333;border:1px solid #ffd0d0}
.b-new{background:#e8f8f0;color:#0a7a45;border:1px solid #b0dfc4}
.b-week{background:#f0eeff;color:#5533bb;border:1px solid #ccbbff}
.tc-plays{font-size:10px;color:#aaa}
.tc-type{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600}
.t-long{background:#f0eeff;color:#5533bb}
.t-short{background:#e8f8f0;color:#0a7a45}

/* ===========================
   QUIZ SCREEN
=========================== */
.quiz-outer{padding:0 16px 30px;max-width:620px;margin:0 auto}
.qheader{display:flex;align-items:center;gap:10px;padding:12px 0 8px}
.back-btn{
  border:1px solid #ddd;background:#fff;padding:6px 13px;
  border-radius:8px;cursor:pointer;font-size:13px;color:#666;
  white-space:nowrap;transition:all .15s
}
.back-btn:hover{background:#f5f5f0}
.prog{flex:1;height:6px;background:#eee;border-radius:6px;overflow:hidden}
.prog-fill{height:100%;background:#E24B4A;border-radius:6px;transition:width .5s ease}
.q-n{font-size:12px;color:#999;white-space:nowrap}

.qcard{
  background:#fff;border:1px solid #eee;border-radius:14px;
  padding:22px 18px;margin-bottom:14px;box-shadow:0 1px 4px rgba(0,0,0,.04)
}
.q-tag{font-size:11px;color:#aaa;margin-bottom:7px;font-weight:600;letter-spacing:.5px}
.q-emoji{font-size:26px;margin-bottom:11px;display:block}
.qcard h2{font-size:18px;font-weight:700;color:#1a1a1a;line-height:1.5}

.opts{display:flex;flex-direction:column;gap:9px}
.opt{
  background:#fff;border:1.5px solid #e8e8e8;border-radius:10px;
  padding:14px 16px;text-align:left;cursor:pointer;font-size:14px;
  color:#333;transition:all .15s;line-height:1.5;font-weight:500
}
.opt:hover{background:#fff8f8;border-color:#ffbbbb}
.opt.sel{border-color:#E24B4A;background:#fff0f0;color:#cc3333;font-weight:700}

/* ===========================
   RESULT SCREEN
=========================== */
.result-outer{padding:0 16px 30px;max-width:560px;margin:0 auto}
.result-nav{padding:12px 0 8px;display:flex;align-items:center;gap:8px}

/* 결과 카드 (공유용 디자인) */
.res-card{
  background:#fff;border:1px solid #eee;border-radius:16px;
  overflow:hidden;margin-bottom:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.08)
}
.res-card-top{
  background:linear-gradient(135deg,#E24B4A 0%,#c73232 100%);
  padding:20px 20px 18px;text-align:center
}
.res-site-name{font-size:10px;color:rgba(255,255,255,.7);margin-bottom:8px;letter-spacing:2px;font-weight:600}
.res-big-emoji{font-size:66px;display:block;animation:pop .5s cubic-bezier(.34,1.56,.64,1);margin:4px 0 6px}
@keyframes pop{0%{transform:scale(.2) rotate(-15deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.res-code-big{font-size:32px;font-weight:800;color:#fff;letter-spacing:6px;margin-bottom:4px}
.res-title-white{font-size:20px;font-weight:700;color:#fff;margin-bottom:4px}
.res-sub-white{font-size:12px;color:rgba(255,255,255,.75)}
.res-illust-wrap{padding:16px 16px 0;background:#fff}
.res-illust{
  width:100%;height:260px;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,#fff4f1,#fff9ec 48%,#f4f8ff)
}
.res-illust img{width:100%;height:100%;object-fit:cover;display:block}
.res-illust.no-img .res-illust-fallback{display:flex}
.res-illust.no-img img{display:none}
.res-illust-fallback{display:none;
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:12px;text-align:center;padding:22px
}
.illust-emoji{font-size:72px;line-height:1}
.illust-copy{font-size:16px;font-weight:800;color:#333;line-height:1.55;word-break:keep-all}
.res-card-body{padding:18px 18px 16px}
.res-desc{font-size:14px;color:#555;line-height:1.75;margin-bottom:14px}

/* MBTI 차원 바 */
.dim-bars{margin-bottom:14px}
.dim-row{margin-bottom:10px}
.dim-labels{display:flex;justify-content:space-between;font-size:11px;color:#888;margin-bottom:4px;font-weight:600}
.dim-track{height:8px;background:#f0f0f0;border-radius:8px;overflow:hidden}
.dim-fill{height:100%;background:#E24B4A;border-radius:8px;transition:width .9s ease}

.traits{display:flex;flex-wrap:wrap;gap:6px}
.trait{font-size:12px;padding:4px 11px;border-radius:20px;border:1px solid #e8e8e8;color:#666;background:#fafafa}

/* ===========================
   SHARE SECTION ★
=========================== */
.share-section{
  background:#fff;border:1px solid #eee;border-radius:16px;
  padding:20px 16px;margin-bottom:12px;
  box-shadow:0 1px 6px rgba(0,0,0,.05)
}

/* 소셜 증명 */
.social-proof{
  display:flex;align-items:center;gap:10px;background:#fff8f8;
  border-radius:10px;padding:11px 13px;margin-bottom:18px;
  border:1px solid #ffd0d0
}
.sp-avatars{display:flex}
.sp-av{
  width:26px;height:26px;border-radius:50%;border:2px solid #fff;
  margin-left:-9px;font-size:13px;display:flex;align-items:center;justify-content:center;
  background:#E24B4A;color:#fff;font-weight:700
}
.sp-av:first-child{margin-left:0}
.sp-text{font-size:12px;color:#666;line-height:1.5}
.sp-text strong{color:#E24B4A;font-weight:700}

/* 공유 유도 헤드라인 */
.share-headline{text-align:center;margin-bottom:16px}
.share-hl-main{font-size:17px;font-weight:700;color:#1a1a1a;margin-bottom:5px;line-height:1.4}
.share-hl-sub{font-size:13px;color:#888;line-height:1.5}

/* 공유 버튼 그리드 */
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px}
.share-btn{
  display:flex;flex-direction:column;align-items:center;
  padding:14px 8px;border-radius:12px;cursor:pointer;border:none;
  transition:all .18s;gap:6px;position:relative;
  box-shadow:0 2px 8px rgba(0,0,0,.12)
}
.share-btn:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(0,0,0,.18)}
.share-btn:active{transform:scale(0.97)}
.s-icon{font-size:22px;line-height:1}
.s-name{font-size:13px;font-weight:700;line-height:1}
.s-desc{font-size:10px;opacity:.8;text-align:center;line-height:1.4}
/* 완료 뱃지 */
.done-badge{
  position:absolute;top:-6px;right:-6px;background:#0a7a45;
  color:#fff;font-size:9px;padding:2px 6px;border-radius:10px;
  opacity:0;transition:opacity .3s;pointer-events:none;font-weight:700
}
.done-badge.show{opacity:1}

/* 플랫폼 컬러 */
.s-kakao{background:#FAE100;color:#3A1D1D}
.s-facebook{background:#1877F2;color:#fff}
.s-x{background:#0f0f0f;color:#fff}
.s-link-btn{background:#f5f5f0;color:#333;border:1.5px solid #ddd !important;box-shadow:0 1px 4px rgba(0,0,0,.06) !important}

/* 링크 복사 인풋 */
.link-row{display:flex;gap:8px;margin-bottom:14px}
.link-input{
  flex:1;border:1.5px solid #e8e8e8;border-radius:8px;padding:10px 12px;
  font-size:12px;color:#888;background:#fafafa;outline:none;min-width:0
}
.link-input:focus{border-color:#E24B4A}
.copy-btn{
  padding:10px 16px;border:none;background:#E24B4A;color:#fff;
  border-radius:8px;font-size:13px;cursor:pointer;white-space:nowrap;
  font-weight:700;transition:all .15s
}
.copy-btn:hover{background:#c73232}
.copy-btn.copied{background:#0a7a45}

/* 친구 비교 유도 */
.compare-box{
  background:#f0f7ff;border:1px solid #b8d9f8;border-radius:10px;
  padding:13px 14px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.compare-text{font-size:12px;color:#1565c0;line-height:1.6}
.compare-text strong{display:block;font-size:13px;font-weight:700;margin-bottom:2px}
.compare-cta{
  padding:8px 14px;background:#1877F2;color:#fff;
  border:none;border-radius:8px;font-size:12px;font-weight:700;
  cursor:pointer;white-space:nowrap;transition:all .15s
}
.compare-cta:hover{background:#1565c0}

/* 인스타 유도 */
.insta-box{
  border:1px solid #e8e8e8;border-radius:10px;padding:12px 14px;
  margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:10px
}
.insta-text .insta-title{font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:3px}
.insta-text .insta-sub{font-size:11px;color:#888}
.insta-cta{
  padding:8px 13px;border:1.5px solid #ddd;border-radius:8px;
  background:#fff;cursor:pointer;font-size:12px;color:#333;
  white-space:nowrap;font-weight:600;transition:all .15s
}
.insta-cta:hover{background:#f5f5f0}

/* 공유 후 응원 */
.cheer-box{
  background:#e8f8f0;border:1px solid #b0dfc4;border-radius:10px;
  padding:14px;text-align:center;margin-bottom:14px;
  display:none;animation:fadeIn .4s ease
}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.cheer-emoji{font-size:28px;display:block;margin-bottom:5px}
.cheer-title{font-size:14px;font-weight:700;color:#0a7a45;margin-bottom:2px}
.cheer-sub{font-size:12px;color:#0a7a45;opacity:.8}

/* 액션 버튼 */
.result-actions{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
.act-retry{
  padding:13px;border:1.5px solid #ddd;border-radius:10px;
  background:#fff;cursor:pointer;font-size:14px;color:#666;font-weight:600;
  transition:all .15s
}
.act-retry:hover{background:#f5f5f0}
.act-more{
  padding:13px;border:none;border-radius:10px;
  background:#E24B4A;color:#fff;cursor:pointer;font-size:14px;font-weight:700;
  transition:all .15s
}
.act-more:hover{background:#c73232}

/* ===========================
   TOAST
=========================== */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:rgba(30,30,30,.92);color:#fff;padding:11px 22px;
  border-radius:30px;font-size:13px;font-weight:500;
  opacity:0;transition:opacity .3s;pointer-events:none;z-index:9999;
  white-space:nowrap;backdrop-filter:blur(8px)
}
.toast.show{opacity:1}

/* ===========================
   RESPONSIVE
=========================== */
@media(min-width:901px){
  body{background:linear-gradient(180deg,#f7f7f2 0%,#f4f2ec 100%)}
  .hero{padding:42px 20px 30px}
  .hero h1{font-size:34px;line-height:1.32}
  .hero p{font-size:16px}
  .page-layout{max-width:1180px;grid-template-columns:minmax(0,1fr) 260px;gap:24px;padding:22px 24px 52px}
  .test-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .tcard{border-radius:20px;padding:16px}
  .tc-thumb{height:176px;border-radius:16px}
  .tcard h3{font-size:17px}
  .tcard p{font-size:13px;min-height:42px}
  .result-outer{max-width:760px;padding:22px 18px 46px}
  .res-card{border-radius:22px}
  .res-card-top{padding:28px 24px 22px}
  .res-title-white{font-size:26px}
  .res-illust{height:330px}
  .share-section{border-radius:22px;padding:24px 22px}
  .share-grid{gap:12px}
}
@media(max-width:600px){
  .page-layout{grid-template-columns:1fr;padding:10px 12px 24px}
  .sidebar{display:none}
  .test-grid{grid-template-columns:1fr 1fr}
  .share-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:20px}
  .tc-thumb{height:128px}
  .res-illust{height:220px}
}
@media(max-width:400px){
  .test-grid{grid-template-columns:1fr}
}

/* ===========================
   FOOTER
=========================== */
.footer{
  background:#fff;border-top:1px solid #eee;padding:20px 16px;
  text-align:center;font-size:12px;color:#aaa;line-height:1.8
}
.footer a{color:#E24B4A}

/* ==========================================================
   ZERO-BASE UI REBUILD OVERRIDE - 2026
   PC/Mobile center alignment + thumbnail-first card layout
========================================================== */
:root{
  --brand:#E24B4A;
  --brand-dark:#c93433;
  --ink:#151515;
  --muted:#717171;
  --line:#ece9e2;
  --paper:#fbfaf6;
  --card:#ffffff;
  --shadow:0 14px 38px rgba(33, 24, 16, .08);
}
*{box-sizing:border-box}
html,body{width:100%;overflow-x:hidden}
body{
  background:var(--paper)!important;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
.header{
  height:56px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 20px!important;
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--line)!important;
  backdrop-filter:blur(10px);
}
.header .logo{
  width:min(1180px,100%)!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  font-size:22px!important;
  font-weight:900!important;
  letter-spacing:-.04em;
}
.logo-sub{font-size:12px!important;margin-left:10px!important;color:#888!important;font-weight:600!important;letter-spacing:0}
#s-home{
  width:100%!important;
}
#s-home > div[style*="padding:8px"]{
  display:none!important;
}
.hero{
  width:100%!important;
  margin:0!important;
  padding:56px 20px 34px!important;
  text-align:center!important;
  background:linear-gradient(180deg,#ffffff 0%,#fffaf4 70%,#f7f5ef 100%)!important;
  border-bottom:1px solid var(--line)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
}
.hero-new-tag{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  margin:0 auto 16px!important;
  padding:7px 16px!important;
  border-radius:999px!important;
  background:#fff1f1!important;
  border:1px solid #ffd0d0!important;
  color:var(--brand)!important;
  font-size:14px!important;
  font-weight:800!important;
}
.hero h1{
  width:min(900px,100%)!important;
  margin:0 auto 14px!important;
  font-size:clamp(36px,4.5vw,60px)!important;
  line-height:1.18!important;
  letter-spacing:-.055em!important;
  font-weight:950!important;
  color:#171717!important;
  text-align:center!important;
  word-break:keep-all!important;
}
.hero p{
  width:min(760px,100%)!important;
  margin:0 auto!important;
  color:#5f5f5f!important;
  font-size:18px!important;
  line-height:1.65!important;
  text-align:center!important;
}
.stat-row{
  width:min(760px,100%)!important;
  margin:20px auto 0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
}
.stat{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:32px!important;
  padding:6px 15px!important;
  background:#fff!important;
  border:1px solid var(--line)!important;
  border-radius:999px!important;
  color:#4f4f4f!important;
  font-size:13px!important;
  font-weight:700!important;
  box-shadow:0 2px 6px rgba(0,0,0,.03)!important;
}
.cats{
  width:min(1180px,100%)!important;
  margin:0 auto!important;
  padding:18px 20px 14px!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important;
  overflow:visible!important;
}
.cat{
  height:40px!important;
  padding:0 18px!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid #ddd!important;
  color:#555!important;
  font-size:14px!important;
  font-weight:800!important;
  box-shadow:0 4px 12px rgba(0,0,0,.04)!important;
}
.cat.on{
  background:var(--brand)!important;
  border-color:var(--brand)!important;
  color:#fff!important;
}
.section-head{
  width:min(1180px,100%)!important;
  margin:22px auto 10px!important;
  padding:0 20px!important;
  text-align:center!important;
  display:block!important;
}
.section-head h2{
  margin:0 0 8px!important;
  font-size:32px!important;
  line-height:1.28!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
  color:#171717!important;
  text-align:center!important;
  word-break:keep-all!important;
}
.section-head p{
  margin:0!important;
  color:#6f6f6f!important;
  font-size:15px!important;
  line-height:1.6!important;
  text-align:center!important;
}
.page-layout{
  width:min(1180px,100%)!important;
  margin:0 auto!important;
  padding:18px 20px 54px!important;
  display:block!important;
}
.sidebar{display:none!important}
.test-grid{
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px!important;
  justify-content:center!important;
  align-items:stretch!important;
}
.tcard{
  position:relative!important;
  display:flex!important;
  flex-direction:column!important;
  min-height:100%!important;
  padding:16px!important;
  background:#fff!important;
  border:1px solid #ececec!important;
  border-radius:24px!important;
  box-shadow:var(--shadow)!important;
  overflow:hidden!important;
  transform:translateY(0)!important;
}
.tcard:hover{
  transform:translateY(-5px)!important;
  border-color:#e0d8d0!important;
  box-shadow:0 18px 45px rgba(33,24,16,.12)!important;
}
.tc-badge{
  top:14px!important;
  right:14px!important;
  z-index:5!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  font-size:11px!important;
  font-weight:900!important;
  backdrop-filter:blur(6px)!important;
}
.tc-thumb{
  width:100%!important;
  height:210px!important;
  margin:0 0 16px!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:linear-gradient(135deg,#fff2ef,#fff8ea 48%,#f1f7ff)!important;
}
.tc-thumb img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}
.tcard:hover .tc-thumb img{
  transform:scale(1.04)!important;
}
.tc-thumb-fallback{
  width:100%!important;
  height:100%!important;
  padding:18px!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
.thumb-emoji{font-size:58px!important}
.thumb-copy{font-size:14px!important;font-weight:900!important;color:#333!important;line-height:1.45!important}
.tc-emoji{
  margin:0 0 8px!important;
  font-size:30px!important;
  line-height:1!important;
}
.tcard h3{
  min-height:auto!important;
  margin:0 0 8px!important;
  color:#141414!important;
  font-size:20px!important;
  line-height:1.36!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
  text-align:left!important;
  word-break:keep-all!important;
}
.tcard p{
  min-height:44px!important;
  margin:0 0 16px!important;
  color:#777!important;
  font-size:14px!important;
  line-height:1.65!important;
  text-align:left!important;
  word-break:keep-all!important;
}
.tc-footer{
  margin-top:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
}
.tc-type,.tc-plays{
  font-size:12px!important;
  font-weight:800!important;
}
.seo-section{
  width:100%!important;
  padding:0 20px 48px!important;
}
.seo-box{
  width:min(1180px,100%)!important;
  margin:0 auto!important;
  padding:30px!important;
  border-radius:26px!important;
  background:#fff!important;
  border:1px solid var(--line)!important;
  box-shadow:var(--shadow)!important;
}
.seo-box h2{
  margin:0 0 14px!important;
  font-size:26px!important;
  line-height:1.35!important;
  text-align:center!important;
  font-weight:950!important;
  letter-spacing:-.04em!important;
}
.seo-box p{
  max-width:900px!important;
  margin:0 auto 22px!important;
  font-size:15px!important;
  line-height:1.9!important;
  color:#666!important;
  text-align:center!important;
}
.seo-list{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:16px!important;
}
.seo-item{
  padding:18px!important;
  border-radius:18px!important;
  background:#faf9f5!important;
  border:1px solid var(--line)!important;
}
.notice-box{
  margin-top:16px!important;
  text-align:center!important;
}

/* Result page */
.result-outer{
  width:min(860px,100%)!important;
  margin:0 auto!important;
  padding:24px 20px 56px!important;
}
.res-card{
  border-radius:28px!important;
  overflow:hidden!important;
  box-shadow:0 18px 50px rgba(33,24,16,.12)!important;
}
.res-card-top{
  padding:32px 24px 24px!important;
}
.res-title-white{
  max-width:720px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  font-size:32px!important;
  line-height:1.25!important;
  word-break:keep-all!important;
}
.res-illust{
  height:360px!important;
  border-radius:22px!important;
}
.res-card-body{
  padding:26px 28px!important;
}
.res-desc{
  font-size:16px!important;
  line-height:1.85!important;
}
.share-section{
  border-radius:28px!important;
  padding:24px!important;
  box-shadow:0 14px 40px rgba(33,24,16,.08)!important;
}
.share-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
}
.share-btn{
  border-radius:18px!important;
}

/* Mobile */
@media(max-width:900px){
  .hero{padding:42px 16px 26px!important}
  .hero h1{font-size:clamp(32px,8vw,44px)!important}
  .test-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}
  .tc-thumb{height:160px!important}
  .seo-list{grid-template-columns:1fr!important}
  .seo-box{padding:22px!important}
}
@media(max-width:600px){
  .header{height:52px!important;padding:0 14px!important}
  .header .logo{font-size:20px!important}
  .hero{padding:30px 14px 22px!important}
  .hero h1{font-size:32px!important;line-height:1.22!important}
  .hero p{font-size:15px!important}
  .stat-row{
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    padding-bottom:3px!important;
  }
  .stat{white-space:nowrap!important}
  .cats{
    justify-content:flex-start!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    padding:12px 12px 10px!important;
  }
  .cat{height:36px!important;font-size:13px!important;padding:0 14px!important}
  .section-head{margin:18px auto 8px!important;padding:0 14px!important}
  .section-head h2{font-size:24px!important}
  .section-head p{font-size:13px!important}
  .page-layout{padding:10px 12px 34px!important}
  .test-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
  .tcard{border-radius:18px!important;padding:12px!important}
  .tc-thumb{height:122px!important;border-radius:14px!important;margin-bottom:10px!important}
  .tc-emoji{font-size:26px!important}
  .tcard h3{font-size:15px!important;line-height:1.35!important}
  .tcard p{font-size:12px!important;line-height:1.55!important;min-height:auto!important}
  .tc-footer{flex-direction:column!important;align-items:flex-start!important;gap:5px!important}
  .tc-type,.tc-plays{font-size:11px!important}
  .seo-section{padding:0 12px 34px!important}
  .seo-box{border-radius:20px!important;padding:18px!important}
  .seo-box h2{font-size:21px!important}
  .seo-box p{text-align:left!important;font-size:13px!important}
  .result-outer{padding:14px 12px 42px!important}
  .res-card{border-radius:22px!important}
  .res-title-white{font-size:24px!important}
  .res-illust{height:220px!important}
  .res-card-body{padding:20px 16px!important}
  .res-desc{font-size:14px!important}
  .share-section{border-radius:22px!important;padding:16px!important}
  .share-grid{gap:10px!important}
}
@media(max-width:380px){
  .test-grid{grid-template-columns:1fr!important}
  .tc-thumb{height:170px!important}
}


/* ==========================================================
   DAILY FORTUNE FIXED FEATURE
========================================================== */
.daily-feature{
  width:100%;
  padding:22px 20px 8px;
  background:linear-gradient(180deg,#f7f5ef 0%,#fbfaf6 100%);
}
.daily-card{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:22px;
  align-items:center;
  padding:26px 28px;
  border-radius:30px;
  border:1px solid #f0ded2;
  background:
    radial-gradient(circle at 12% 20%,rgba(255,226,198,.85),transparent 28%),
    radial-gradient(circle at 90% 15%,rgba(226,75,74,.16),transparent 28%),
    linear-gradient(135deg,#fff 0%,#fff7ef 58%,#fff0f0 100%);
  box-shadow:0 18px 48px rgba(120,72,42,.13);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative;
  overflow:hidden;
}
.daily-card::after{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-120px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:rgba(226,75,74,.08);
}
.daily-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 58px rgba(120,72,42,.18);
  border-color:#efc5b2;
}
.daily-main{position:relative;z-index:2}
.daily-kicker{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid #ffd5c7;
  color:#d64a36;
  font-size:13px;
  font-weight:900;
  margin-bottom:14px;
}
.daily-main h2{
  font-size:38px;
  line-height:1.18;
  letter-spacing:-.055em;
  font-weight:950;
  color:#171717;
  margin:0 0 10px;
  word-break:keep-all;
}
.daily-main p{
  font-size:16px;
  line-height:1.75;
  color:#5f5f5f;
  margin:0;
  word-break:keep-all;
}
.daily-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
}
.daily-tags span{
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid #f1ded3;
  color:#6f5144;
  font-size:13px;
  font-weight:800;
}
.daily-panel{
  position:relative;
  z-index:2;
  min-height:218px;
  padding:22px 18px;
  border-radius:24px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 10px 26px rgba(120,72,42,.10);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.daily-orb{
  width:66px;
  height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:22px;
  background:linear-gradient(135deg,#fff6df,#ffe4e2);
  font-size:34px;
  box-shadow:0 10px 20px rgba(226,75,74,.13);
  margin-bottom:10px;
}
.daily-date{
  color:#777;
  font-size:13px;
  font-weight:800;
  margin-bottom:8px;
}
.daily-score strong{
  display:block;
  font-size:36px;
  line-height:1;
  color:#E24B4A;
  font-weight:950;
}
.daily-score span{
  display:block;
  margin-top:5px;
  color:#666;
  font-size:12px;
  font-weight:800;
}
.daily-cta{
  margin-top:16px;
  border:0;
  border-radius:999px;
  padding:11px 18px;
  background:#E24B4A;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(226,75,74,.24);
}
.daily-result-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:18px 0 16px;
}
.daily-result-item{
  padding:15px;
  border-radius:16px;
  background:#faf9f5;
  border:1px solid #eee7df;
}
.daily-result-item b{
  display:block;
  font-size:13px;
  color:#8b6250;
  margin-bottom:6px;
}
.daily-result-item span{
  color:#333;
  font-size:15px;
  font-weight:900;
  line-height:1.45;
  word-break:keep-all;
}
.daily-bar{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background:#f0ede8;
  margin-top:9px;
}
.daily-bar i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#E24B4A,#ffac69);
}
.daily-message{
  margin-top:14px;
  padding:16px;
  border-radius:18px;
  background:#fff8f2;
  border:1px solid #f3ddcb;
  color:#6b493b;
  font-size:15px;
  line-height:1.75;
  font-weight:700;
  word-break:keep-all;
}
.daily-return-note{
  margin-top:12px;
  text-align:center;
  color:#888;
  font-size:13px;
  font-weight:800;
}
@media(max-width:800px){
  .daily-feature{padding:16px 12px 4px}
  .daily-card{grid-template-columns:1fr;padding:20px;border-radius:24px;gap:16px}
  .daily-main h2{font-size:29px}
  .daily-main p{font-size:14px}
  .daily-panel{min-height:auto;padding:18px}
  .daily-result-grid{grid-template-columns:1fr}
}


/* ==========================================================
   DAILY FORTUNE INPUT FORM
========================================================== */
.daily-input-outer{
  width:min(820px,100%);
  margin:0 auto;
  padding:28px 20px 56px;
}
.daily-input-card{
  background:#fff;
  border:1px solid #eee2d8;
  border-radius:28px;
  padding:28px;
  box-shadow:0 18px 48px rgba(120,72,42,.12);
}
.daily-back{
  margin-bottom:18px;
}
.daily-input-head{
  text-align:center;
  margin-bottom:24px;
}
.daily-input-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  border-radius:999px;
  background:#fff1f1;
  border:1px solid #ffd0d0;
  color:#E24B4A;
  font-size:13px;
  font-weight:900;
  margin-bottom:12px;
}
.daily-input-head h2{
  font-size:34px;
  line-height:1.25;
  letter-spacing:-.05em;
  font-weight:950;
  color:#171717;
  margin-bottom:10px;
  word-break:keep-all;
}
.daily-input-head p{
  max-width:640px;
  margin:0 auto;
  font-size:15px;
  line-height:1.75;
  color:#666;
  word-break:keep-all;
}
.daily-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.daily-form label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-weight:900;
  color:#333;
  font-size:14px;
}
.daily-form label span{
  padding-left:2px;
}
.daily-form input,
.daily-form select{
  width:100%;
  height:52px;
  border:1px solid #e4ded6;
  border-radius:16px;
  padding:0 15px;
  font-size:15px;
  background:#fff;
  color:#222;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.daily-form input:focus,
.daily-form select:focus{
  border-color:#E24B4A;
  box-shadow:0 0 0 4px rgba(226,75,74,.10);
}
.daily-full{
  grid-column:1 / -1;
}
.daily-privacy{
  grid-column:1 / -1;
  padding:13px 14px;
  border-radius:16px;
  background:#fff8f3;
  border:1px solid #f0ddce;
  color:#7b5a4a;
  font-size:13px;
  line-height:1.65;
  text-align:center;
}
.daily-submit{
  grid-column:1 / -1;
  height:56px;
  border:0;
  border-radius:18px;
  background:#E24B4A;
  color:#fff;
  font-size:17px;
  font-weight:950;
  cursor:pointer;
  box-shadow:0 12px 24px rgba(226,75,74,.22);
  transition:transform .15s, background .15s;
}
.daily-submit:hover{
  background:#c93433;
  transform:translateY(-2px);
}
.profile-mini{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:0 0 16px;
}
.profile-mini div{
  background:#fff;
  border:1px solid #efe7de;
  border-radius:15px;
  padding:12px;
}
.profile-mini b{
  display:block;
  color:#8b6250;
  font-size:12px;
  margin-bottom:5px;
}
.profile-mini span{
  color:#222;
  font-size:14px;
  font-weight:900;
  line-height:1.45;
  word-break:keep-all;
}
@media(max-width:700px){
  .daily-input-outer{padding:18px 12px 42px}
  .daily-input-card{padding:20px;border-radius:22px}
  .daily-input-head h2{font-size:27px}
  .daily-input-head p{font-size:14px;text-align:left}
  .daily-form{grid-template-columns:1fr}
  .daily-full,.daily-privacy,.daily-submit{grid-column:auto}
  .profile-mini{grid-template-columns:1fr}
}


/* ==========================================================
   MAIN TEST CARD SHARE BUTTONS
========================================================== */
.tc-share{
  margin-top:12px!important;
  padding-top:12px!important;
  border-top:1px solid #f0ece6!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}
.tc-share-title{
  grid-column:1 / -1!important;
  font-size:12px!important;
  line-height:1.4!important;
  color:#8b6b5c!important;
  font-weight:900!important;
  text-align:left!important;
}
.tc-share button{
  height:36px!important;
  border:1px solid #e7dfd6!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#333!important;
  font-size:12px!important;
  font-weight:900!important;
  cursor:pointer!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  transition:transform .15s, background .15s, border-color .15s!important;
}
.tc-share button:hover{
  transform:translateY(-1px)!important;
  border-color:#dfcfc3!important;
  background:#fff9f5!important;
}
.tc-share .tc-kakao{
  background:#FEE500!important;
  border-color:#F4D600!important;
  color:#191600!important;
}
.tc-share .tc-copy{
  background:#fafafa!important;
}
@media(max-width:600px){
  .tc-share{
    grid-template-columns:1fr!important;
    gap:6px!important;
    margin-top:10px!important;
    padding-top:10px!important;
  }
  .tc-share-title{
    font-size:11px!important;
  }
  .tc-share button{
    height:34px!important;
    font-size:11px!important;
  }
}


/* ==========================================================
   QUIZ PAGE REPRESENTATIVE IMAGE
========================================================== */
.quiz-cover{
  width:100%;
  margin:10px 0 16px;
  background:#fff;
  border:1px solid #eee7df;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 12px 32px rgba(33,24,16,.08);
}
.quiz-cover-img{
  width:100%;
  height:280px;
  overflow:hidden;
  background:linear-gradient(135deg,#fff2ef,#fff8ea 48%,#f1f7ff);
}
.quiz-cover-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.quiz-cover.no-img .quiz-cover-img img{display:none}
.quiz-cover-fallback{
  display:none;
  height:100%;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  gap:10px;
  padding:24px;
}
.quiz-cover.no-img .quiz-cover-fallback{display:flex}
.quiz-cover-emoji{
  font-size:64px;
  line-height:1;
}
.quiz-cover-copy{
  color:#333;
  font-size:18px;
  font-weight:950;
  line-height:1.4;
  word-break:keep-all;
}
.quiz-cover-info{
  padding:18px 20px 20px;
  text-align:center;
}
.quiz-cover-info b{
  display:block;
  color:#161616;
  font-size:23px;
  line-height:1.35;
  font-weight:950;
  letter-spacing:-.04em;
  word-break:keep-all;
  margin-bottom:6px;
}
.quiz-cover-info span{
  display:block;
  color:#777;
  font-size:14px;
  line-height:1.6;
  word-break:keep-all;
}
@media(max-width:600px){
  .quiz-cover{
    margin:8px 0 13px;
    border-radius:20px;
  }
  .quiz-cover-img{
    height:190px;
  }
  .quiz-cover-info{
    padding:14px 14px 16px;
  }
  .quiz-cover-info b{
    font-size:19px;
  }
  .quiz-cover-info span{
    font-size:13px;
  }
}


/* ==========================================================
   STOCK INVESTMENT TEST
========================================================== */
.stock-result-box{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:18px 0 16px;
}
.stock-result-box div{
  background:#faf9f5;
  border:1px solid #eee7df;
  border-radius:16px;
  padding:15px;
}
.stock-result-box b{
  display:block;
  color:#8b6250;
  font-size:12px;
  margin-bottom:6px;
}
.stock-result-box span{
  display:block;
  color:#242424;
  font-size:14px;
  font-weight:900;
  line-height:1.55;
  word-break:keep-all;
}
.stock-notice{
  margin-bottom:14px!important;
}
@media(max-width:700px){
  .stock-result-box{grid-template-columns:1fr}
}


/* ==========================================================
   LOGO / FAVICON
========================================================== */
.logo{
  gap:8px!important;
}
.logo-img{
  height:38px!important;
  max-width:170px!important;
  object-fit:contain!important;
  display:block!important;
}
.logo-fallback{display:none!important;}
.header-actions{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  margin-left:auto!important;
}
.opt:disabled{
  cursor:default!important;
  opacity:1!important;
}




/* =====================================================================
   v3 멀티페이지 — 신규 클래스
===================================================================== */
.breadcrumbs{font-size:12px;color:#888;padding:12px 16px;max-width:900px;margin:0 auto;display:flex;align-items:center;flex-wrap:wrap;gap:4px}
.breadcrumbs a{color:#888;text-decoration:none}
.breadcrumbs a:hover{color:#E24B4A}
.bc-sep{margin:0 6px;color:#ccc}

.test-landing{max-width:900px;margin:0 auto;padding:0 16px 30px}
.tl-hero{display:grid;grid-template-columns:240px 1fr;gap:20px;background:#fff;border:1px solid #eee;border-radius:16px;padding:20px;margin:8px 0 18px;box-shadow:0 1px 6px rgba(0,0,0,.04)}
@media (max-width:640px){.tl-hero{grid-template-columns:1fr;padding:16px}}
.tl-cover{border-radius:14px;overflow:hidden;background:linear-gradient(135deg,#fff2ef,#fff8ea 48%,#f1f7ff);aspect-ratio:1/1}
.tl-cover img{width:100%;height:100%;display:block;object-fit:cover}
.tl-cover-fallback{display:flex;align-items:center;justify-content:center;font-size:80px;width:100%;height:100%}
.tl-meta{display:flex;flex-direction:column;justify-content:center}
.tl-emoji{font-size:32px;display:block;margin-bottom:4px}
.tl-meta h1{font-size:22px;font-weight:700;color:#1a1a1a;line-height:1.4;margin-bottom:6px}
.tl-desc{color:#666;font-size:14px;line-height:1.7;margin-bottom:14px}
.tl-stat-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tl-stat-row .stat{font-size:11px;color:#555;background:#f5f5f0;padding:3px 10px;border-radius:20px;border:1px solid #e8e8e0}
.btn-start{background:#E24B4A;color:#fff;padding:13px 28px;border:0;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;align-self:flex-start;transition:all .12s}
.btn-start:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(226,75,74,.25)}

.tl-intro,.tl-results,.tl-faq,.tl-related{margin:24px 0}
.tl-intro h2,.tl-results h2,.tl-faq h2,.tl-related h2{font-size:18px;font-weight:700;color:#1a1a1a;margin-bottom:12px;padding-left:4px}
.tl-intro{background:#fff;border:1px solid #eee;border-radius:16px;padding:20px}
.tl-intro p{font-size:14px;color:#555;line-height:1.85;margin-bottom:10px}
.tl-intro p:last-child{margin-bottom:0}

.result-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;list-style:none;padding:0}
.result-preview{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:6px;transition:all .15s}
.result-preview:hover{border-color:#ddd;box-shadow:0 3px 10px rgba(0,0,0,.06)}
.rp-emoji{font-size:24px}
.result-preview strong{font-size:14px;color:#1a1a1a}
.result-preview p{font-size:12px;color:#777;line-height:1.55;flex:1}
.rp-link{margin-top:6px;font-size:12px;color:#E24B4A;font-weight:600;text-decoration:none}
.rp-link:hover{text-decoration:underline}

.tl-faq{background:#fff;border:1px solid #eee;border-radius:16px;padding:20px}
.tl-faq dt{font-size:14px;font-weight:700;color:#1a1a1a;margin-top:14px;padding-left:18px;position:relative}
.tl-faq dt:first-child{margin-top:0}
.tl-faq dt::before{content:'Q';position:absolute;left:0;color:#E24B4A;font-weight:800}
.tl-faq dd{font-size:13px;color:#666;line-height:1.75;margin:6px 0 0 18px}

.quiz-app{display:block;animation:fadeIn .25s ease}
.quiz-app[hidden]{display:none}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.back-btn{background:none;border:0;color:#888;font-size:13px;cursor:pointer;padding:4px 8px}
.back-btn:hover{color:#E24B4A}

.result-page{max-width:560px;margin:0 auto;padding:0 16px 30px}
.result-cta{display:flex;gap:8px;margin:16px 0}
.btn-retry,.btn-share{flex:1;padding:13px 14px;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer;text-align:center;border:1px solid #ddd;background:#fff;color:#333;transition:all .12s;text-decoration:none;display:inline-block}
.btn-retry:hover{background:#f5f5f0}
.btn-share{background:#E24B4A;color:#fff;border-color:#E24B4A}
.btn-share:hover{background:#cc3a39}
.result-other{background:#fff;border:1px solid #eee;border-radius:14px;padding:16px;margin-top:18px}
.result-other h2{font-size:15px;margin-bottom:6px}
.result-other p{font-size:13px;color:#666;line-height:1.7}
.result-other a{color:#E24B4A;font-weight:600}
.res-percent{margin-top:14px;padding:10px 14px;background:#fff8e8;border-radius:8px;font-size:13px;color:#7a4b00}

.site-footer{border-top:1px solid #eee;background:#fff;padding:18px 16px;text-align:center;margin-top:40px}
.footer-nav{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.footer-nav a{font-size:12px;color:#888;text-decoration:none}
.footer-nav a:hover{color:#E24B4A}
.footer-copy{font-size:11px;color:#aaa;line-height:1.6}

.legal-page{max-width:720px;margin:0 auto;padding:0 16px 30px}
.legal-page h1{font-size:22px;color:#1a1a1a;margin:12px 0 16px}
.legal-body{background:#fff;border:1px solid #eee;border-radius:14px;padding:20px;font-size:14px;line-height:1.85;color:#555}
.legal-body h3{font-size:15px;color:#222;margin:14px 0 6px}

.error-page{text-align:center;padding:80px 16px}
.error-page h1{font-size:72px;color:#E24B4A;font-weight:800;margin-bottom:12px}
.error-page p{font-size:15px;color:#666;margin-bottom:22px}
.btn-home{display:inline-block;background:#E24B4A;color:#fff;padding:11px 22px;border-radius:10px;text-decoration:none;font-weight:700;font-size:14px}
.btn-home:hover{background:#cc3a39}