/* ==========================================================
   상품권레이더 v20 — value-first homepage
   Toss-inspired principles: Value First / Clear Action / One Thing.
   첫 화면은 "무엇을 비교하는지"와 "지금 바로 할 일"이 5초 안에 보이게 한다.
   ========================================================== */

:root{--v20-blue:#3182f6;--v20-blue-deep:#1b64da;--v20-ink:#191f28;--v20-sub:#4e5968;--v20-muted:#8b95a1;--v20-line:#e8ebed;--v20-soft:#f7f8fa}

/* ---------- hero ---------- */
.v20-hero{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(350px,.84fr);gap:58px;align-items:center;padding:62px 0 42px}
.v20-hero-copy{min-width:0}
.v20-hero .kicker{margin:0 0 13px;font-size:13px;line-height:1.4;font-weight:650;color:var(--v20-blue);letter-spacing:-.015em}
.v20-hero h1{margin:0;font-size:52px;line-height:1.09;font-weight:730;letter-spacing:-.057em;color:var(--v20-ink)}
.v20-hero h1 em{font-style:normal;color:var(--v20-blue)}
.v20-hero .market-lead{max-width:710px;margin:20px 0 0!important;font-size:16px!important;line-height:1.72!important;color:var(--v20-sub)!important;letter-spacing:-.015em}
.v20-hero .market-lead b{color:#333d4b;font-weight:650}
.v20-search{position:relative;margin-top:27px!important;max-width:700px!important;height:60px!important;border-radius:17px!important;box-shadow:0 8px 28px rgba(25,31,40,.045)!important}
.v20-search input{font-size:15px!important}
.v20-search button{min-width:72px;font-weight:650!important}
.v20-suggest{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 8px);overflow:hidden;padding:6px;background:#fff;border:1px solid var(--v20-line);border-radius:15px;box-shadow:0 18px 42px rgba(25,31,40,.12)}
.v20-suggest a{display:flex;align-items:center;gap:9px;min-height:46px;padding:8px 10px;border-radius:10px;color:#333d4b}
.v20-suggest a:hover,.v20-suggest a.on{background:#f5f8fd}
.v20-suggest .mark{display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:9px;background:#f2f4f6;color:#4e5968;font-size:9px;font-weight:750}
.v20-suggest .name{min-width:0;flex:1;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v20-suggest .kind{font-size:10px;color:#8b95a1}.v20-suggest .price{font-size:11px;color:#3182f6;font-weight:650}
.v20-proof{display:flex;align-items:center;gap:0;margin-top:18px;color:#8b95a1;font-size:11.5px;line-height:1.4;white-space:nowrap}
.v20-proof span{display:flex;align-items:center;gap:4px}
.v20-proof span+span:before{content:"";width:1px;height:11px;margin:0 10px;background:#dfe3e7}
.v20-proof b{font-weight:650;color:#4e5968}

.v20-live-card{display:block;min-width:0;padding:22px;border:1px solid #e8edf3;border-radius:24px;background:linear-gradient(180deg,#fff 0%,#fbfdff 100%);box-shadow:0 18px 48px rgba(31,73,125,.07);transition:border-color .16s ease,box-shadow .16s ease}
.v20-live-card:hover{border-color:#cfe0fb;box-shadow:0 20px 52px rgba(31,73,125,.10)}
.v20-live-status{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.v20-live-status>span{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:650;color:#3182f6}.v20-live-status i{width:7px;height:7px;border-radius:50%;background:#3182f6;box-shadow:0 0 0 4px rgba(49,130,246,.10)}.v20-live-status small{font-size:10.5px;color:#8b95a1}
.v20-live-brand{display:flex;align-items:center;gap:13px}.v20-live-brand>div{min-width:0}.v20-live-brand small{display:block;margin-bottom:3px;font-size:10.5px;color:#8b95a1}.v20-live-brand h2{margin:0;font-size:21px;line-height:1.3;font-weight:680;letter-spacing:-.04em;color:#191f28}
.v20-live-prices{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.v20-live-prices>div{min-width:0;padding:15px 14px;border-radius:15px;background:#f5f7fa}.v20-live-prices span{display:block;font-size:10.5px;color:#8b95a1}.v20-live-prices strong{display:block;margin-top:5px;font-size:27px;line-height:1.1;font-weight:690;letter-spacing:-.03em}.v20-live-prices b{display:block;margin-top:8px;font-size:11.5px;font-weight:650;color:#333d4b}.v20-live-prices small{display:block;margin-top:4px;font-size:9.5px;line-height:1.4;color:#8b95a1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v20-live-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:15px;border-top:1px solid #edf0f2;font-size:11.5px;color:#6b7684}.v20-live-foot b{color:#3182f6;font-weight:650}

/* ---------- intent-first navigation ---------- */
.intent-hub{margin:12px 0 50px}
.intent-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.intent-grid>a{display:flex;align-items:center;min-width:0;gap:12px;padding:17px 15px;border:1px solid #edf0f2;border-radius:17px;background:#fff;transition:background .16s ease,border-color .16s ease}
.intent-grid>a:hover{background:#fbfdff;border-color:#cfe0fb}
.intent-icon{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:none;border-radius:13px;background:#f2f7ff;color:#3182f6}.intent-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.intent-grid>a>div{min-width:0;flex:1}.intent-grid b{display:block;font-size:13px;line-height:1.35;font-weight:650;letter-spacing:-.02em}.intent-grid small{display:block;margin-top:4px;font-size:10.5px;line-height:1.45;color:#8b95a1}.intent-grid i{font-style:normal;color:#b0b8c1;font-size:20px}

/* ---------- returning user continuity ---------- */
.home-personal{margin:0 0 48px}.home-personal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.home-personal-card{display:block;padding:14px 15px;border:1px solid #edf0f2;border-radius:16px;background:#fff}.home-personal-card:hover{border-color:#cfe0fb;background:#fbfdff}.home-personal-card>span{font-size:9.5px;color:#3182f6;font-weight:650}.home-personal-card>b{display:block;margin-top:5px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-personal-card>div{display:flex;gap:12px;margin-top:12px}.home-personal-card div span{font-size:9.5px;color:#8b95a1}.home-personal-card div strong{display:block;margin-top:2px;font-size:15px}.home-personal-card>small{display:block;margin-top:8px;font-size:9.5px;color:#8b95a1}

/* ---------- today radar ---------- */
.v20-radar{margin:0 0 52px}.v20-radar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.radar-card{position:relative;display:flex;flex-direction:column;min-height:170px;padding:19px;border:1px solid #edf0f2;border-radius:18px;background:#fff}.radar-card:hover{border-color:#cfe0fb;background:#fbfdff}.radar-card>span{font-size:10.5px;color:#8b95a1}.radar-card>b{margin-top:8px;font-size:13px;line-height:1.35;font-weight:650}.radar-card>strong{margin-top:5px;font-size:21px;line-height:1.25;font-weight:690}.radar-card>small{margin-top:6px;font-size:10.5px;line-height:1.5;color:#8b95a1}.radar-card>i{margin-top:auto;padding-top:13px;font-style:normal;font-size:10.5px;color:#3182f6;font-weight:600}.radar-card.radar-accent{background:#f7faff;border-color:#e2edff}

/* v20: methodology comes after the user has seen actual market data. */
.v20-trust{margin:38px 0 48px!important}.v20-trust a{min-height:78px!important}.v20-trust b{font-weight:650!important}

/* ---------- knowledge content: surface actual articles, not only categories ---------- */
.home-guide-list{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.home-guide-list>a{display:flex;flex-direction:column;min-height:174px;padding:17px;border:1px solid #edf0f2;border-radius:17px;background:#fff}.home-guide-list>a:hover{border-color:#cfe0fb;background:#fbfdff}.home-guide-list span{font-size:9.5px;color:#3182f6;font-weight:650}.home-guide-list b{margin-top:7px;font-size:13.5px;line-height:1.45;font-weight:650;letter-spacing:-.02em}.home-guide-list small{margin-top:7px;font-size:10.5px;line-height:1.6;color:#8b95a1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.home-guide-list i{margin-top:auto;padding-top:12px;font-style:normal;font-size:10.5px;color:#6b7684}

/* Old duplicated homepage status blocks are no longer used in v20. */
.market-pulse{display:none!important}

@media(max-width:1020px){
  .v20-hero{grid-template-columns:1fr;gap:24px;padding:42px 0 30px}.v20-hero h1{font-size:45px}.v20-live-card{max-width:760px}.intent-grid{grid-template-columns:1fr 1fr}.home-personal-grid{grid-template-columns:1fr 1fr}.home-guide-list{grid-template-columns:1fr 1fr}
}

@media(max-width:640px){
  .v20-hero{gap:18px;padding:27px 0 22px}.v20-hero .kicker{font-size:11.5px;margin-bottom:9px}.v20-hero h1{font-size:34px;line-height:1.12;letter-spacing:-.052em}.v20-hero .market-lead{margin-top:14px!important;font-size:14px!important;line-height:1.68!important}.v20-search{height:52px!important;margin-top:19px!important;border-radius:14px!important;box-shadow:none!important}.v20-search input{font-size:13.5px!important}.v20-search button{min-width:58px;height:38px!important;padding:0 12px!important}.v20-proof{overflow-x:auto;margin:13px -14px 0;padding:0 14px 3px;font-size:10.5px;scrollbar-width:none}.v20-proof::-webkit-scrollbar{display:none}.v20-proof span+span:before{margin:0 8px}.v20-suggest{top:calc(100% + 6px);border-radius:13px}.v20-suggest a{min-height:43px}
  .v20-live-card{padding:16px;border-radius:18px;box-shadow:none}.v20-live-status{margin-bottom:13px}.v20-live-brand h2{font-size:17px}.v20-live-brand .logo-badge.lg{width:46px!important;height:46px!important}.v20-live-prices{gap:6px;margin-top:14px}.v20-live-prices>div{padding:12px 11px;border-radius:12px}.v20-live-prices strong{font-size:21px}.v20-live-prices b{font-size:10.5px}.v20-live-prices small{font-size:9px}.v20-live-foot{font-size:10.5px;margin-top:12px;padding-top:12px}
  .intent-hub{margin:14px 0 38px}.intent-grid{grid-template-columns:1fr;gap:7px}.intent-grid>a{min-height:70px;padding:12px 13px;border-radius:15px}.intent-icon{width:39px;height:39px;border-radius:12px}.intent-grid b{font-size:12.5px}.intent-grid small{font-size:10px}.intent-grid i{font-size:18px}
  .home-personal{margin-bottom:38px}.home-personal-grid{display:flex;overflow-x:auto;gap:8px;margin:0 -14px;padding:0 14px 6px;scroll-snap-type:x proximity;scrollbar-width:none}.home-personal-grid::-webkit-scrollbar{display:none}.home-personal-card{flex:0 0 72%;scroll-snap-align:start}
  .v20-radar{margin-bottom:39px}.v20-radar-grid{display:flex;overflow-x:auto;gap:8px;margin:0 -14px;padding:0 14px 6px;scroll-snap-type:x proximity;scrollbar-width:none}.v20-radar-grid::-webkit-scrollbar{display:none}.radar-card{flex:0 0 78%;min-height:154px;padding:16px;border-radius:16px;scroll-snap-align:start}.radar-card>strong{font-size:19px}
  .v20-trust{margin:30px -14px 38px!important;padding:0 14px 5px!important}.v20-trust a{min-height:48px!important}
  .home-guide-list{display:flex;overflow-x:auto;gap:8px;margin:13px -14px 0;padding:0 14px 6px;scroll-snap-type:x proximity;scrollbar-width:none}.home-guide-list::-webkit-scrollbar{display:none}.home-guide-list>a{flex:0 0 78%;min-height:164px;scroll-snap-align:start}
}

@media(max-width:390px){
  .v20-hero h1{font-size:31px}.v20-live-prices strong{font-size:19px}.v20-live-prices>div{padding:10px}.radar-card,.home-guide-list>a{flex-basis:84%}.home-personal-card{flex-basis:80%}
}

@media(prefers-reduced-motion:no-preference){
  .v20-live-card,.intent-grid>a,.radar-card,.home-guide-list>a,.home-personal-card{transition:background .16s ease,border-color .16s ease,box-shadow .16s ease}
}