:root{--dict-max:1180px;--dict-gap:12px;--dict-radius:15px}

/* 투자사전 전용 반응형 보강: 기존 데이터와 동작은 유지하고 배치만 조정한다. */
.hero,.main,.header-in{max-width:var(--dict-max)}
.hero{text-align:left;padding-top:42px;padding-bottom:28px}
.hero h1{font-size:40px;line-height:1.15;margin:8px 0 8px}
.hero .lead{max-width:760px}
.hero .lead br{display:none}
.dictionary-mode-nav{display:flex;gap:18px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.dictionary-mode-nav a{position:relative;padding:0 2px 11px;color:#7893aa;font-size:13px;font-weight:850;text-decoration:none}
.dictionary-mode-nav a.active{color:#eef5ff}
.dictionary-mode-nav a.active::after{content:"";position:absolute;right:0;bottom:-1px;left:0;height:2px;background:#76c7ff}
.tabs{justify-content:flex-start;margin:22px 0 14px;flex-wrap:wrap;overflow:visible;scrollbar-width:none}
.tab{flex:0 0 auto;white-space:nowrap}
.search{max-width:none;margin:0}
.main{padding-bottom:72px}
.section{margin-top:28px}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dict-gap);border:0;background:transparent;overflow:visible}
.qcol{min-width:0;padding:17px;border:1px solid var(--line);border-radius:var(--dict-radius);background:linear-gradient(180deg,#0d1a2b,#0a1828)}
.qcol,.qcol:nth-child(2n),.qcol:last-child{border-right:1px solid var(--line)}
.qhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}
.qcol .qhead h3{margin:0;color:#eef5ff;font-size:15px}
.qcount{color:#7893aa;font-size:10px;white-space:nowrap}
.qterms{display:flex;flex-wrap:wrap;gap:6px;min-height:66px;align-content:flex-start}
.qcol .qlink{width:auto;padding:6px 8px;border:1px solid #203955;border-radius:8px;background:#091827;color:#b8cbdb;font-size:11px}
.qcol .qlink:hover{border-color:#4f83aa;background:#10243a;color:#fff}
.qview{display:inline-flex;margin-top:12px;padding:0;border:0;background:transparent;color:#76c7ff;font-size:11px;font-weight:900}
.cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--dict-gap)}
.card{min-height:0;padding:14px;border-radius:var(--dict-radius)}
.card-desc{-webkit-line-clamp:2}
.pattern-card{padding:12px}
.pattern-thumb{height:104px;margin:-2px -2px 11px;border:1px solid #19354c;border-radius:11px;overflow:hidden;background:#081827}
.pattern-thumb svg,
html body.hp-embedded .pattern-thumb svg{display:block;width:100%;height:100%;padding:8px 10px}

/* 넓은 화면에서는 목록을 유지한 채 상세만 오른쪽에서 연다. */
@media(min-width:1025px){
  .detail{inset:66px 0 0 auto;width:520px;height:calc(100vh - 66px);border-left:1px solid #315979;background:#081523;box-shadow:-24px 0 60px rgba(0,0,0,.42);overflow-y:auto;overflow-x:hidden}
  .detail.open{display:block}
  .detail-top{top:0}
  .detail-top-in{max-width:none;height:60px;padding:0 18px}
  .detail-top .back{font-size:13px}
  .detail-top .close{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;font-size:24px;line-height:1}
  .article{max-width:none;padding:30px 24px 70px}
  .article h2{font-size:30px}
  .summary{font-size:16px;margin:22px 0}
  .article-section{padding:21px 0}
  .article-section p{font-size:13px}
  .chartbox svg{min-width:0}
}

@media(min-width:641px) and (max-width:1024px){
  .quick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .detail{inset:60px 0 0 auto;width:min(560px,72vw);height:calc(100vh - 60px);border-left:1px solid #315979;box-shadow:-20px 0 50px rgba(0,0,0,.4)}
  .detail.open{display:block}
}

@media(max-width:640px){
  .hero{padding:32px 14px 22px}
  .hero h1{font-size:31px}
  .tabs{margin-top:18px;flex-wrap:nowrap;overflow-x:auto}
  .main{padding-right:14px;padding-left:14px}
  .quick{grid-template-columns:1fr;gap:9px}
  .qcol{padding:15px}
  .qterms{min-height:0}
  .cards{grid-template-columns:1fr}
  .card{padding:15px}
  .pattern-card{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:13px;align-items:center}
  .pattern-thumb{grid-row:1/5;width:112px;height:86px;margin:0}
.pattern-thumb svg,
html body.hp-embedded .pattern-thumb svg{padding:6px 7px}
  .pattern-card .detail-badge{justify-self:start}
  .detail{inset:auto 6px 0;width:calc(100% - 12px);max-height:90vh;border:1px solid #315979;border-bottom:0;border-radius:22px 22px 0 0;background:#081523;box-shadow:0 -18px 55px rgba(0,0,0,.55);overflow:auto}
  .detail.open{display:block}
  .detail-top{border-radius:22px 22px 0 0}
  .article{padding:26px 16px 60px}
}