/* 투자한판 공통 App Shell 디자인 토큰 — 페이지별 CSS 다음에 로드되는 최종 UI 레이어 */
:root{
  --hp-bg:#07111f;--hp-panel:#0d1b2c;--hp-panel-soft:#0a1828;
  --hp-line:#203d58;--hp-line-strong:#2b5272;--hp-text:#eef6ff;
  --hp-muted:#94abc0;--hp-subtle:#718ca3;--hp-accent:#67beff;
  --hp-shell-header:4.125rem;--hp-sidebar-width:14rem;
  --hp-content-max:82.5rem;--hp-content-gutter:4rem;--hp-content-edge:2rem;--hp-content-top:2rem;
  --hp-font-page-title:2.5rem;--hp-font-section-title:1.375rem;
  --hp-font-card-title:1rem;--hp-font-body:.875rem;--hp-font-small:.75rem;
  --hp-font-sidebar:.875rem;--hp-line-body:1.7;
  --hp-section-gap:1.75rem;--hp-card-gap:.875rem;--hp-card-padding:1.25rem;
  --hp-card-radius:1rem;--hp-control-height:2.625rem;--hp-action-height:2.125rem;
  --hp-control-radius:.625rem;
  --hp-page-header-top:3.25rem;--hp-page-header-bottom:2.25rem;
}

/* Shell */
.hp-shell{height:var(--hp-shell-header)}
.hp-app-layout{grid-template-columns:var(--hp-sidebar-width) minmax(0,1fr);height:calc(100vh - var(--hp-shell-header));min-height:0}
.hp-app-sidebar{width:var(--hp-sidebar-width);flex-basis:var(--hp-sidebar-width)}
.hp-side-group{padding:0}
.hp-side-group h2{margin:0 .625rem .5rem;font-size:.6875rem;line-height:1.4;letter-spacing:.045em}
.hp-side-group a{min-height:3rem;padding:0 .875rem;gap:.75rem;border-radius:.75rem;font-size:var(--hp-font-sidebar)}
.hp-side-group a>span{width:1.5rem;height:1.5rem;font-size:.75rem}
.hp-side-group a>strong{font-size:inherit;line-height:1.3}

/* Content frame and typography */
html body.hp-embedded{font-size:var(--hp-font-body);line-height:var(--hp-line-body)}
html body.hp-embedded,html body.hp-embedded *{box-sizing:border-box}
html body.hp-embedded{max-width:100%;overflow-x:hidden}
html body.hp-embedded :is(img,svg,canvas,video){max-width:100%;height:auto}
html body.hp-embedded :is(main,section,article,.wrap,.shell,.panel,.card)>*{min-width:0}
html body.hp-embedded :is(.hp-page-header,.hp-title-region){box-sizing:border-box!important;width:100%!important;min-height:0!important;margin:0!important;padding:var(--hp-page-header-top) 0 var(--hp-page-header-bottom)!important;text-align:left!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
html body.hp-embedded :is(.hp-page-kicker,.hp-title-kicker){display:none!important}
html body.hp-embedded :is(.hp-page-title,.hp-title-heading){display:none!important}
html body.hp-embedded :is(.hp-page-lead,.hp-title-lead){display:none!important}
html body.hp-embedded>.wrap,
html body.hp-embedded>main.wrap,
html body.hp-embedded main>.wrap,
html body.hp-embedded main>.hero>.wrap,
html body.hp-embedded .section>.wrap,
html body.hp-embedded .shell,
html body.hp-embedded .flow-wrap,
html body.hp-embedded .pre-wrap,
html body.hp-embedded .money-wrap,
html body.hp-embedded .dict-wrap,
html body.hp-embedded .diagnosis-main,
html body.hp-embedded .calendar-shell{
  box-sizing:border-box;width:min(var(--hp-content-max),calc(100% - var(--hp-content-gutter)));max-width:var(--hp-content-max);margin-right:auto;margin-left:auto;padding-right:0;padding-left:0
}
html body.hp-embedded .analysisToolWrap{
  box-sizing:border-box!important;width:min(var(--hp-content-max),calc(100% - var(--hp-content-gutter)))!important;max-width:var(--hp-content-max)!important;margin-right:auto!important;margin-left:auto!important;padding-right:0!important;padding-left:0!important
}
html body.hp-embedded.dashboard-home .dashboard-home-main>.wrap,
html body.hp-embedded.hp-page-home>.wrap,
html body.hp-embedded.hp-page-search>.wrap,
html body.hp-embedded.hp-page-rank>.wrap,
html body.hp-embedded.hp-page-market .shell,
html body.hp-embedded.hp-page-diagnosis .diagnosis-main,
html body.hp-embedded.hp-page-mypage .mypage-main>.wrap,
html body.hp-embedded.hp-page-dictionary>.hero,
html body.hp-embedded.hp-page-dictionary>.main,
html body.hp-embedded.hp-page-calendar .calendar-shell,
html body.hp-embedded.prestart-page .hp-content-tabs-inner,
html body.hp-embedded.money-page .hp-content-tabs-inner,
html body.hp-embedded.hp-page-start .hp-content-tabs-inner{
  box-sizing:border-box!important;
  width:min(var(--hp-content-max),calc(100% - var(--hp-content-gutter)))!important;
  max-width:var(--hp-content-max)!important;
  margin-right:auto!important;
  margin-left:auto!important;
  padding-right:0!important;
  padding-left:0!important;
}
html body.hp-embedded.hp-page-calendar .calendar-page{padding-top:0!important;padding-right:0!important;padding-left:0!important}
html body.hp-embedded.dashboard-embed>.wrap{width:min(var(--hp-content-max),calc(100% - var(--hp-content-gutter)))!important;max-width:var(--hp-content-max)!important;margin-right:auto!important;margin-left:auto!important;padding-right:0!important;padding-left:0!important}
html body.hp-embedded :is(.section-head,.sectionHead,.panelHead,.filterHead,.resultHead) h2{font-size:var(--hp-font-section-title);line-height:1.3}
html body.hp-embedded :is(.panel,.card,.diagnosis-card,.summaryCard,.stockCard) h3{font-size:var(--hp-font-card-title);line-height:1.4}
html body.hp-embedded :is(.muted,.meta,.note,.hint,small,.stockMeta){font-size:var(--hp-font-small);line-height:1.55}

/* Shared controls. Component-specific layouts retain their own width/grid rules. */
html body.hp-embedded :is(button,input,select,textarea){font:inherit}
html body.hp-embedded :is(input:not([type="checkbox"]):not([type="radio"]),select){min-height:var(--hp-control-height)}
html body.hp-embedded :is(.primaryBtn,.ghostBtn,.btn,.diagnosis-start,.loadMoreBtn,.money-cta,.finish-button){min-height:var(--hp-control-height);border-radius:var(--hp-control-radius);font-size:.8125rem;font-weight:850}
html body.hp-embedded :is(.favoriteActions,.stockActions,.cardActions) :is(button,a){min-height:var(--hp-action-height);font-size:.71875rem}
html body.hp-embedded :is(.panel,.filterPanel,.resultSection,.diagnosis-card,.style-result){padding:var(--hp-card-padding);border-color:var(--hp-line);border-radius:var(--hp-card-radius)}

/* Stock lists share one visual rhythm even when their data/renderers differ. */
html body.hp-embedded :is(.hpStockHead,.stockListHead){color:var(--hp-subtle);font-size:.65625rem;font-weight:850}
html body.hp-embedded :is(.hpStockMainLink,.stockListRow){min-width:0;border-color:rgba(255,255,255,.065)}
html body.hp-embedded :is(.hpStockName strong,.stockListName strong){color:var(--hp-text);font-size:.8125rem;font-weight:850;line-height:1.35}
html body.hp-embedded :is(.hpStockName small,.stockListCode){color:var(--hp-subtle);font-size:.65625rem;line-height:1.4}
html body.hp-embedded :is(.hpStockClose,.hpStockChange,.stockListGrade,.stockListPrice){font-size:.71875rem;line-height:1.35}
html body.hp-embedded :is(.hpDetailAction,.stockListActions button){min-height:var(--hp-action-height);border-radius:.5rem;font-size:.65625rem;font-weight:850;line-height:1}

/* App Shell에서 사이드바와 중복되는 도입부는 숨기고 첫 실제 콘텐츠 위치를 통일한다. */
html body.hp-embedded.hp-page-dictionary .dictionary-title-copy,
html body.hp-embedded.hp-page-search>.wrap>.hero,
html body.hp-embedded.hp-page-rank .header,
html body.hp-embedded.hp-page-calendar .calendar-page-head,
html body.hp-embedded.hp-page-diagnosis .diagnosis-head,
html body.hp-embedded.hp-page-market .hero{display:none!important}
html body.hp-embedded.hp-page-dictionary>.hero{min-height:0!important;padding-bottom:1.125rem!important}
html body.hp-embedded.hp-page-rank .filterHead .topNote{margin:0 auto 0 0!important;align-self:center!important}
html body.hp-embedded.hp-page-search>.wrap,
html body.hp-embedded.hp-page-rank>.wrap,
html body.hp-embedded.hp-page-market .shell,
html body.hp-embedded.hp-page-calendar .calendar-shell,
html body.hp-embedded.hp-page-diagnosis .diagnosis-main,
html body.hp-embedded.hp-page-dictionary>.hero,
html body.hp-embedded.hp-page-home>.wrap{padding-top:var(--hp-content-top)!important}
html body.hp-embedded.hp-page-home>.wrap>.dashboardTabs,
html body.hp-embedded.hp-page-dictionary>.hero>.tabs,
html body.hp-embedded.hp-page-diagnosis .diagnosis-main>.diagnosis-grid{margin-top:0!important}
html body.hp-embedded.hp-page-dictionary>.hero>.tabs{padding-top:0!important}
html body.hp-embedded.hp-page-search>.wrap>.panel:first-of-type,
html body.hp-embedded.hp-page-rank>.wrap>.filterPanel:first-of-type,
html body.hp-embedded.hp-page-market .marketSummarySection:first-of-type,
html body.hp-embedded.hp-page-calendar .calendar-page{margin-top:0!important}

/* 읽어보기 3개 페이지는 동일한 실제 컴포넌트 클래스를 공유한다. */
html body.hp-embedded.hp-series-page .hp-series-container{
  box-sizing:border-box!important;width:min(var(--hp-content-max),calc(100% - var(--hp-content-gutter)))!important;max-width:var(--hp-content-max)!important;margin-right:auto!important;margin-left:auto!important;padding-right:0!important;padding-left:0!important
}
html body.hp-embedded.hp-series-page .hp-series-first-content{padding-top:0!important}

html body.hp-embedded.hp-series-page .hp-series-hero{
  display:block!important;
  padding-top:var(--hp-content-top)!important;
  padding-bottom:1.5rem!important;
  text-align:left!important;
}
html body.hp-embedded.hp-series-page .hp-series-hero .hp-page-kicker{
  justify-content:flex-start!important;
  margin-right:0!important;
  margin-left:0!important;
}
html body.hp-embedded.hp-series-page .hp-series-hero .hp-page-title{
  max-width:56.25rem!important;
  margin:0 0 .75rem!important;
  font-size:var(--hp-font-section-title)!important;
  font-weight:850!important;
  line-height:1.3!important;
  letter-spacing:-.035em!important;
  text-align:left!important;
}
html body.hp-embedded.hp-series-page .hp-series-hero .hp-page-lead{
  max-width:56.25rem!important;
  margin-right:0!important;
  margin-left:0!important;
  text-align:left!important;
}
html body.hp-embedded.hp-series-page :is(.pre-section-head,.money-section-head,.flow-block-head,.panel-top,.why-panel-feature,.finish-card,.money-finish-card,.why-panel-bridge){
  margin-left:0!important;
  text-align:left!important;
}
html body.hp-embedded.hp-series-page :is(.pre-kicker,.money-kicker,.panel-kicker){
  display:block!important;
  min-height:0!important;
  margin:0 0 .625rem!important;
  color:var(--hp-accent)!important;
  font-size:.6875rem!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.14em!important;
  text-align:left!important;
  text-transform:uppercase!important;
}
html body.hp-embedded.hp-series-page :is(.pre-kicker,.money-kicker,.panel-kicker)::before,
html body.hp-embedded.hp-series-page :is(.pre-kicker,.money-kicker,.panel-kicker)::after{
  display:none!important;
  content:none!important;
}
html body.hp-embedded.hp-series-page :is(.pre-section-head,.money-section-head,.flow-block-head,.panel-top,.why-panel-feature,.finish-card,.money-finish-card,.why-panel-bridge) h2{
  max-width:56.25rem!important;
  margin:0 0 .75rem!important;
  font-size:var(--hp-font-section-title)!important;
  font-weight:850!important;
  line-height:1.3!important;
  letter-spacing:-.035em!important;
  text-align:left!important;
}
html body.hp-embedded.hp-series-page :is(.pre-section-head,.money-section-head,.flow-block-head,.panel-top,.why-panel-feature,.finish-card,.money-finish-card,.why-panel-bridge)>p{
  max-width:56.25rem!important;
  margin-right:0!important;
  margin-left:0!important;
  font-size:var(--hp-font-body)!important;
  line-height:var(--hp-line-body)!important;
  text-align:left!important;
}
@media(min-width:901px){
  html body.hp-embedded.hp-page-home>.wrap,
  html body.hp-embedded.dashboard-embed>.wrap,
  html body.hp-embedded.hp-page-start .flow-wrap,
  html body.hp-embedded.prestart-page .pre-wrap,
  html body.hp-embedded.money-page .money-wrap,
  html body.hp-embedded.hp-page-diagnosis .diagnosis-main,
  html body.hp-embedded.hp-page-mypage .mypage-main>.wrap,
  html body.hp-embedded.hp-page-dictionary>.hero,
  html body.hp-embedded.hp-page-dictionary>.main,
  html body.hp-embedded.hp-page-search>.wrap,
  html body.hp-embedded.hp-page-rank>.wrap,
  html body.hp-embedded.hp-page-market .shell,
  html body.hp-embedded.hp-page-calendar .calendar-shell,
  html body.hp-embedded .analysisToolWrap,
  html body.hp-embedded.hp-series-page .hp-series-container,
  html body.hp-embedded.hp-series-page .hp-content-tabs-inner{
    margin-right:auto!important;
    margin-left:var(--hp-content-edge)!important;
  }
}

@media(max-width:900px){
  :root{--hp-content-gutter:1.5rem;--hp-content-top:1.5rem;--hp-card-padding:1rem;--hp-section-gap:1.375rem}
  .hp-app-sidebar{width:min(17.875rem,88vw);flex-basis:auto}
  html body.hp-embedded :is(h1,h2,h3,h4,p,strong,a,button,label){word-break:keep-all;overflow-wrap:break-word}
  html body.hp-embedded :is(.dashboardTabs,.dict-tabs,.dict-quick,.calendar-filters,.historyStrip){max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  html body.hp-embedded :is(.dashboardTabs,.dict-tabs,.dict-quick,.calendar-filters,.historyStrip)::-webkit-scrollbar{display:none}
  html body.hp-embedded :is(.dashboardTabs,.dict-tabs,.dict-quick,.calendar-filters){flex-wrap:nowrap!important}
  html body.hp-embedded :is(.dashboardTab,.dict-tabs button,.dict-quick button,.calendar-filters button){flex:0 0 auto;white-space:nowrap}
  html body.hp-embedded.hp-page-market .sectionHead{align-items:flex-start!important;flex-direction:column!important;gap:.625rem!important}
  html body.hp-embedded.hp-page-market .sectionMeta{width:100%!important;max-width:none!important;text-align:left!important}
  html body.hp-embedded.hp-page-market :is(.marketSummaryHeadTools,.heroDateControl){width:100%!important;justify-content:flex-start!important}
}
@media(max-width:700px){
  :root{--hp-font-page-title:2rem;--hp-font-section-title:1.25rem;--hp-font-body:.84375rem;--hp-control-height:2.75rem;--hp-card-radius:.875rem;--hp-page-header-top:2.25rem;--hp-page-header-bottom:1.625rem}
  html body.hp-embedded :is(.hpStockMainLink,.stockListRow){min-height:5.25rem;padding:.6875rem .75rem}
  html body.hp-embedded :is(.hpStockName strong,.stockListName strong){font-size:.84375rem}
  html body.hp-embedded.hp-series-page :is(.pre-section,.money-section,.start-dashboard){padding-top:var(--hp-section-gap)!important;padding-bottom:var(--hp-section-gap)!important}
  html body.hp-embedded.hp-series-page .why-invest-shell{padding-bottom:var(--hp-section-gap)!important}
  html body.hp-embedded.hp-series-page :is(.pre-section-head,.money-section-head,.flow-block-head){margin-bottom:1rem!important}
}