/* 탭 팝업 규칙 (2026-10-26). 소제목을 누르면 그 소제목이 속한 탭(제목·Score·카드 전체)이 한 팝업으로 열린다.
   1) 탭마다 크기를 따로 정한다(--dmt-w/--dmt-h). 같은 탭의 팝업(장)은 항상 같은 크기다.
   2) 확대·축소 없음. 카드를 원본 글자 크기로 복제하므로 홈페이지와 모든 팝업의 글자 크기가 같다.
   3) 내용은 위에서부터 홈페이지와 같은 순서(제목 → Score → 카드)로 쌓고, 남는 공간은 위아래 균등한 여백으로 둔다.
   4) 대제목(산업 Sector 등)을 누르면 열린다. 닫기 버튼 없음. ESC·바깥 클릭으로 닫고, 모바일은 아래에서 올라오는 시트이며 손잡이를 끌어내려 닫는다.
   5) 스크롤은 없다. 내용 높이 + 위아래 여백 22px이 들어가도록 크기를 정하고(화면 높이의 94% 상한), 그래도 넘치는 작은 화면에서만 팝업 안에서 비율을 줄여(최소 60%) 맞춘다.
   6) 산업의 '반도체' 표시와 해자의 점수는 소제목 바로 옆에 둔다(오른쪽 끝으로 밀지 않는다).
   7) 장이 여러 개인 탭(수익성)은 제목·Score를 고정하고 아래만 넘긴다. 버튼 없이 카드 오른쪽 가장자리 클릭=다음 장, 왼쪽=이전 장(←→ 키·옆으로 밀기도 됨).
   8) 폭 1200: 카드 안쪽 폭이 500px을 넘어야 비즈니스 카드의 평가(낮음·보통·높음)가 홈페이지처럼 막대 오른쪽에 놓인다. */
:root{--dmt-pad:22px}
.dm-box.dm-tab{width:min(var(--dmt-w),96vw);height:min(var(--dmt-h),94vh)}
.dm-tab-S{--dmt-w:1200px;--dmt-h:600px}
.dmt-vc{flex:none;height:440px;max-height:440px;box-sizing:border-box;overflow:hidden}
.dm-tab-M{--dmt-w:1200px;--dmt-h:800px}
.dm-tab-E{--dmt-w:1200px;--dmt-h:860px}
.dm-tab-L{--dmt-w:1200px;--dmt-h:780px}
.dm-tab-T{--dmt-w:1200px;--dmt-h:870px}
.dm-tab .dm-head,.dm-tab .dmt-grab{display:none}
.dm-tab .dm-body{overflow:hidden}
.dmt-stage{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:var(--dmt-pad)}
.dmt-page{margin:auto 0;width:100%;min-width:0}
.dmt-page>.smelt-head{margin:0 0 10px!important;opacity:1!important;transform:none!important}
.dmt-page>.smelt-score,.dmt-page>.smelt-pair,.dmt-page>.smelt-moat{opacity:1!important;transform:none!important}
.dmt-page>.smelt-pair,.dmt-page>.smelt-moat{margin-bottom:0}
.dmt-page *{overflow-wrap:anywhere}
.dm-tab .smelt-pair>.smelt-card>h3,.dm-tab .smelt-moat-top{justify-content:flex-start!important;gap:14px}
.smelt-head#smelt-s h2,.smelt-head#smelt-m h2{cursor:pointer}
.dm-tab .smelt-head h2{cursor:default}
html[data-theme=dark] .dm-tab .dm-body{background:transparent}
@media(max-width:760px){
 :root{--dmt-pad:18px}
 .dm-box.dm-tab{width:100vw;height:auto;max-height:92vh;min-height:40vh}
 .dm-tab .dmt-grab{display:block;flex:none;width:100%;padding:10px 0 2px;touch-action:none}
 .dm-tab .dmt-grab::after{content:"";display:block;width:40px;height:4px;border-radius:2px;margin:0 auto;background:var(--line,#d9d6cc)}
}

/* 여러 장(수익성): 제목·Score 고정, 아래 장만 바뀐다. 장 높이는 가장 큰 장 하나로 맞춘다. */
.dmt-view{display:grid;overflow:hidden;margin-top:0}
.dmt-pg{grid-area:1/1;align-self:center;min-width:0;transition:opacity .25s,transform .25s}
.dmt-pg[data-s=on]{opacity:1;transform:none}
.dmt-pg[data-s=prev]{opacity:0;visibility:hidden;transform:translateX(-36px)}
.dmt-pg[data-s=next]{opacity:0;visibility:hidden;transform:translateX(36px)}
.dmt-pg>*{margin-top:0!important;margin-bottom:0!important}
/* 장 넘기기: 카드 오른쪽 가장자리를 누르면 다음 장, 왼쪽 가장자리를 누르면 이전 장. 버튼은 없고 가장자리에 마우스를 올리면 화살표만 살짝 보인다 */
.dmt-view{position:relative}
.dmt-zone{position:absolute;top:0;bottom:0;width:14%;z-index:2;cursor:pointer;display:flex;align-items:center;opacity:0;transition:opacity .2s;font-size:42px;color:var(--muted,#85887e);user-select:none}
.dmt-zone-l{left:0;justify-content:flex-start;padding-left:6px}.dmt-zone-r{right:0;justify-content:flex-end;padding-right:6px}
.dmt-zone-l::after{content:"‹"}.dmt-zone-r::after{content:"›"}
.dmt-zone:hover{opacity:.55}
.dmt-zone.off{pointer-events:none}
.smelt-head#smelt-e h2,.smelt-head#smelt-l h2,.smelt-head#smelt-t h2{cursor:pointer}
/* 수익성 1장: 도넛·지도 높이를 줄여 탭 팝업 높이(94vh)에 들어가게 한다. 지도 칸은 도넛 칸과 같은 만큼 줄여 표 시작 높이를 맞춘다 */
.dm-tab .revenue-composition{height:236px!important;margin:0!important}.dm-tab .revenue-ring{width:196px!important;height:196px!important}
.dm-tab #map-box{height:236px!important}
/* 홈페이지와 같은 도넛 두께: 안쪽 흰 원 지름 = 바깥 지름의 53.2% */
.dm-tab .revenue-ring .revenue-hole{width:104px!important;height:104px!important}.dm-tab .revenue-hole img{width:62%!important;height:62%!important}
/* 매출 구성·지역별 매출 비중: 제목 줄(높이·글자 위치·밑선)과 표 시작선을 같은 높이로 */
.dm-tab :is(#segments>.heading,#geography>h3){box-sizing:border-box;height:44px;min-height:44px;margin:0!important;padding:0 0 8px!important;display:flex;align-items:flex-end;border-bottom:1px solid var(--line,#e4e1d8)}
.dm-tab #segments>.heading h3,.dm-tab #geography>h3{line-height:1.3;margin:0}
.dm-tab #segments>.heading h3{padding:0;border:0}
.dm-tab :is(#segments .revenue-table-scroll,#geography .smelt-geo-table){margin-top:14px!important}
/* 수익성 장끼리 카드의 위·아래 선을 맞춘다: 모든 장을 가장 큰 장 높이로 늘리고, 라이프사이클도 다른 장과 같은 폭(좌우 여백 제거)을 쓴다 */
.dmt-pg{align-self:stretch;display:flex;flex-direction:column}
.dmt-pg>*{flex:1;min-width:0}
.dmt-pg>#phase{display:flex;flex-direction:column}
.dmt-pg>#phase>.phase-frame{margin-top:auto!important}.dmt-pg>#phase>.legend{margin-bottom:auto!important}
html body.analysis-compact .dmt-pg #phase.lifecycle-fit>:is(.phase-frame,.phase-mobile-events,.legend){margin-left:0!important;margin-right:0!important}
/* 밸류에이션 2장: 짧은 월가 카드는 늘어난 높이 안에서 내용을 세로 가운데에 둔다 */
.dmt-pg .wallstreet-pair>.section-group{display:flex;flex-direction:column}
.dmt-pg .wallstreet-pair>.section-group>section{flex:1;display:flex;flex-direction:column}
.dmt-pg .wallstreet-pair #analyst-consensus,.dmt-pg .wallstreet-pair #analyst-targets{margin:auto 0;display:flex;justify-content:center}

/* 밸류에이션 2장 월가 카드: 큰 도넛 + 비율 막대 / 현재가→목표가, 목표 범위 차트, 최고·평균·최저 칸으로 카드를 채운다 */
.dmt-pg .smelt-val-grid button{cursor:pointer}
.wp-cons{display:flex;flex-direction:column;align-items:center;gap:26px;width:100%}
.wp-donut{position:relative;width:250px;height:250px;flex:none}.wp-donut svg{width:100%;height:100%;display:block}
.wp-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-align:center;pointer-events:none}
.wp-center small{font-size:13px;color:var(--muted,#85887e)}.wp-center strong{font-size:26px;font-weight:800;line-height:1.1}.wp-center span{font-size:13px;color:var(--muted,#85887e)}
.wp-rows{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:12px}
.wp-rows li{display:grid;grid-template-columns:12px 64px 1fr 44px 40px;align-items:center;gap:10px;font-size:15px}
.wp-rows i{width:10px;height:10px;border-radius:50%}.wp-rows em{height:9px;border-radius:5px;background:var(--chip,#eceee8);overflow:hidden;font-style:normal}.wp-rows u{display:block;height:100%;border-radius:5px}
.wp-rows b{text-align:right;font-weight:800}.wp-rows small{text-align:right;color:var(--muted,#85887e);font-size:13px}
.wp-tg{display:flex;flex-direction:column;gap:22px;width:100%}
.wp-tg .ws-price-comparison{order:-1}.wp-tg .ws-price-comparison strong{font-size:38px}
.wp-tg .ws-target-chart svg{width:100%;height:auto}
.wp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wp-stats>div{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 8px;border-radius:12px;background:var(--chip,#f4f5ef)}
.wp-stats small{font-size:13px;color:var(--muted,#85887e)}.wp-stats strong{font-size:26px;font-weight:800}.wp-stats em{font-style:normal;font-size:13px;font-weight:600}

/* 팝업(수익성 등)의 7 Stage Lifecycle: 범례를 차트 아래로 조금 내림 */
.dmt-pg>#phase>.legend{margin-top:22px!important}

.dmt-view{touch-action:none}