/* ===== NowViewOn 공통 스타일 (v4) — 언어 전환 · 페이지 높이 통일 · 계산기 컴팩트 ===== */

/* ---- 로고 옆 언어 전환 (KR / EN 국기) ---- */
.brand-wrap{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.lang-sw{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--bd);border-radius:999px;background:var(--card)}
.lang-sw button{display:inline-flex;align-items:center;gap:5px;padding:4px 9px 4px 6px;border:0;border-radius:999px;background:transparent;color:var(--mut);font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.2px;line-height:1;cursor:pointer;white-space:nowrap}
.lang-sw button:hover{color:var(--tx)}
.lang-sw button[aria-pressed="true"]{background:var(--ac);color:var(--acx)}
.lang-sw .flag,.fl .flag{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(128,128,128,.4);flex:none}
.fl{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
@media(max-width:560px){.brand-wrap{gap:8px}.lang-sw button{padding:4px 7px 4px 5px}}

/* ---- 홈·계산기·시장 시간·캘린더 본문 높이 통일: 홈의 히트맵 하단 기준 ---- */
.view{--vp:100vh;--chrome:317px;--strip-h:80px;--hm-h:clamp(393px,calc(var(--vp) - var(--chrome) - var(--strip-h) - 121px),549px)}
@supports (height:100dvh){.view{--vp:100dvh}}
@supports (width:1cqw){.page{container-type:inline-size}.view{--hm-h:clamp(393px,min(calc((100cqw - 30px)/2),calc(var(--vp) - var(--chrome) - var(--strip-h) - 121px)),640px)}}
@media(max-width:1239px){.view{--strip-h:171px}}
#hmMap{height:var(--hm-h)}
@media(max-width:559px){#hmMap{height:calc(var(--hm-h) * 2)}}
@media(min-width:700px){
  .view{--vh:calc(var(--hm-h) + var(--strip-h) + 121px)}
  body:not(.v-home) .view{min-height:var(--vh);display:flex;flex-direction:column}
  body.v-market #market,body.v-calendar #calendar{flex:1 1 auto;margin-bottom:0}
  body.v-market #market{display:flex;flex-direction:column}
  body.v-market #market .mrow{flex:1 1 auto;align-items:center}
}

/* ---- 계산기: 높이를 홈에 맞추기 위한 컴팩트 배치 (데스크톱) ---- */
@media(min-width:861px){
  body.v-calc .grid{flex:1 1 auto;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr auto;align-items:stretch}
  body.v-calc .grid>.c1{grid-column:1;grid-row:1;display:flex;flex-direction:column}
  body.v-calc .c1>.sum{margin-bottom:auto}
  body.v-calc .grid>.c3{grid-column:2;grid-row:1;display:flex;flex-direction:column}
  body.v-calc .grid>.c4{grid-column:1/-1;grid-row:2}
  body.v-calc .card>.hd{min-height:49px}
  body.v-calc .card{padding:12px 16px}
  body.v-calc .hd{margin-bottom:8px;gap:6px}
  body.v-calc .hd h2{font-size:15px;margin:0}
  body.v-calc label{font-size:12px;margin:6px 0 2px}
  body.v-calc input[type=text],body.v-calc input[type=date],body.v-calc select{min-height:36px;padding:6px 10px;font-size:14px;border-radius:8px}
  body.v-calc input[type=date],body.v-calc input[type=date]::-webkit-datetime-edit,body.v-calc input[type=date]::-webkit-datetime-edit-fields-wrapper,body.v-calc input[type=date]::-webkit-datetime-edit-text,body.v-calc input[type=date]::-webkit-datetime-edit-month-field,body.v-calc input[type=date]::-webkit-datetime-edit-day-field,body.v-calc input[type=date]::-webkit-datetime-edit-year-field{font-size:14px}
  body.v-calc .fxbox{font-size:13px}
  body.v-calc .fxbox input[type=text]{width:84px;min-height:30px;padding:3px 8px;font-size:14px}
  body.v-calc .fxbox .hint{margin-top:2px}
  body.v-calc .seg{margin-bottom:8px}
  body.v-calc .seg button{padding:7px;font-size:13px;border-radius:8px}
  body.v-calc .entry-head{font-size:12px;margin:2px 0 3px}
  body.v-calc .ent{margin-bottom:6px}
  body.v-calc .ent input[type=text]{min-height:34px}
  body.v-calc .ent button,body.v-calc .add{font-size:14px;border-radius:8px}
  body.v-calc .add{padding:6px}
  body.v-calc .sum{margin:8px 0 2px;font-size:13px}
  body.v-calc .hint{font-size:11px;margin-top:4px}
  body.v-calc .intro{margin:10px 0 0;font-size:13px}
  body.v-calc .res{gap:6px}
  body.v-calc .c3 .res span,body.v-calc .c3 .res b,body.v-calc .c4 .res span,body.v-calc .c4 .res b,body.v-calc .c3 #rPct{font-size:14px}
  body.v-calc .c3 .res>div:not(.pair){padding-bottom:5px}
  body.v-calc .c3 .res b,body.v-calc .c4 .res b{margin-top:2px}
  body.v-calc .res .pair.box>div{padding:6px 10px;border-radius:10px}
  body.v-calc .res .pair{gap:10px}
  body.v-calc .c4 .res{grid-template-columns:1.6fr repeat(5,minmax(0,1fr));margin-top:12px!important}
  body.v-calc .c4top{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  body.v-calc .c4b label{margin-top:0}
  body.v-calc .c4 .res>.pair{display:contents}
  body.v-calc .c4 .res>div{padding:6px 10px;border-radius:10px}
}

/* ---- 경제 캘린더: 국기(SVG) · 발표치 상회/하회 색 ---- */
.cal-table td.cn .fl{gap:7px}
.cal-table td.num.act.up{color:var(--up);font-weight:800}
.cal-table td.num.act.dn{color:var(--dn);font-weight:800}
.cal-table td.nm small{display:block;margin-top:2px;font-size:11px;font-weight:400;color:var(--mut)}
.cal-src+.cal-src:empty{display:none}
.cal-src+.cal-src{opacity:.75}

/* ---- 영어 모드: 메뉴가 길어져도 한 줄 유지 ---- */
html[lang="en"] .site-header nav{flex-wrap:nowrap;gap:6px}
html[lang="en"] .site-header nav a{padding:7px 11px;font-size:13px}
@media(max-width:1000px){html[lang="en"] .site-header nav{flex-wrap:wrap}}

/* ---- 계산기: 평균 진입가·총 랏수(오른쪽 정렬) · 자산정보 한 줄 · 목표달성 ---- */
body.v-calc .sum{margin:8px 0 4px;color:var(--tx)}
body.v-calc .sumrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:3px 0}
body.v-calc .sumrow span{font-size:13px;color:var(--mut)}
body.v-calc .sumrow b{font-size:15px;font-weight:700;color:var(--tx);text-align:right;font-variant-numeric:tabular-nums}
body.v-calc .assets{margin-top:auto;padding-top:12px;border-top:1px solid var(--bd)}
body.v-calc .arow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end}
body.v-calc .arow>div{display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
body.v-calc .arow label{margin:0 0 3px;font-size:12px;line-height:1.25}
@media(max-width:860px){body.v-calc .arow{grid-template-columns:1fr 1fr}body.v-calc .assets{margin-top:14px}body.v-calc .c4top{display:block}}

/* ---- 테마 전환 버튼: 글자 없이 아이콘만 ---- */
.theme-toggle #themeLabel{display:none}
.theme-toggle{padding:11px 12px;gap:0}
body.v-calc .arow select{padding-left:8px;padding-right:20px;font-size:13px}

/* ===== 3차 수정 ===== */
/* 언어 전환: 헤더 우측 맨 위(런던 시계 위), 작게 */
.lang-row{display:flex;justify-content:flex-end;margin:0 0 6px}
.lang-row .lang-sw{padding:2px;gap:1px}
.lang-row .lang-sw button{padding:3px 8px 3px 5px;font-size:10px;gap:4px}
.lang-row .lang-sw .flag{width:16px;height:11px}
/* 상단 메뉴: 선택된 버튼 = 흰색 배경(라이트 테마에서는 반대로 어두운 배경) */
.site-header nav a.on{background:var(--tx);color:var(--bg);border-color:var(--tx)}
:root[data-theme="dark"] .site-header nav a.on{background:#fff;color:#111827;border-color:#fff}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .site-header nav a.on{background:#fff;color:#111827;border-color:#fff}}
/* 계산기 */
body.v-calc .grid>.c3{border-color:var(--bd);box-shadow:none}
.c4 .res b small.gmsg,.gmsg{display:block;font-size:11px;font-weight:400;font-style:normal;color:var(--mut);text-align:right}
/* 시장 시간: 범례를 박스 오른쪽 위로 */
#market .hd .legend{margin:0;display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;font-size:11px}
#market .hd .legend i:first-child{margin-left:0}
/* 경제 캘린더: 가운데 정렬 · 흰 글씨 · 박스 크기 고정 */
.cal-table th,.cal-table td,.cal-table th.num,.cal-table td.num,.cal-table tr.dh td{text-align:center}
.cal-table th{color:var(--tx);font-size:13px}
.cal-range{color:var(--tx);font-size:13px}
.cal-table td.cn .fl{justify-content:center}
.cal-wrap{display:flex;flex-direction:column;max-height:none;overflow:hidden}
.cal-scroll{flex:1 1 auto;min-height:0;overflow:auto}
.cal-foot{flex:none;display:flex;justify-content:flex-end;align-items:center;gap:12px;padding:8px 12px;border-top:1px solid var(--bd)}
.cal-foot .cal-src{margin:0;font-size:12px}
.cal-foot .cal-src:empty{display:none}
@media(min-width:700px){
  body.v-calendar .view{height:var(--vh);min-height:0}
  body.v-calendar #calendar{min-height:0;overflow:hidden;display:flex;flex-direction:column}
  body.v-calendar .cal-wrap{flex:1 1 0;min-height:0}
}

/* ===== 4차 수정 ===== */
/* ---- 시세 띠: 6칸(DXY 추가) ---- */
.market-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
.market-strip .quote-card:last-child{grid-column:auto}
.quote-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:6px;align-items:center}
.quote-meta b{grid-column:1/-1}
.quote-meta strong.q-price{grid-column:1;grid-row:2;min-width:0;overflow:hidden;text-overflow:ellipsis}
.quote-meta .q-badge{grid-column:2;grid-row:2}
.mk-dxy{font-size:9px;font-weight:800;letter-spacing:-.3px}
@media(max-width:700px){.market-strip{grid-template-columns:1fr 1fr}}
@media(min-width:1240px){
  .market-strip{grid-template-columns:repeat(6,minmax(0,1fr))}
  .market-strip .quote-card{position:relative;grid-template-columns:auto minmax(0,1fr);column-gap:7px;padding:10px;min-height:78px}
  .market-strip .quote-mark{width:26px;height:26px;font-size:12px}
  .market-strip .quote-side{position:absolute;top:10px;right:10px;display:block}
  .market-strip .quote-side .mini-line{display:none}
  .market-strip .quote-meta b{padding-right:48px}
  .market-strip .quote-meta strong.q-price{font-size:15px;letter-spacing:-.4px;margin-top:5px}
}

/* ---- 경제 캘린더: 첨부 이미지 스타일(글자 크기·색) ---- */
.cal-wrap{--cal-bg:var(--card);background:var(--cal-bg)}
:root[data-theme="dark"] .cal-wrap{--cal-bg:#121212}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .cal-wrap{--cal-bg:#121212}}
body.v-calendar .cal-table thead th{position:sticky;top:0;z-index:3;background:var(--cal-bg);font-size:12px;padding:9px 8px}
body.v-calendar .cal-table td{padding:7px 8px;font-size:13px;line-height:1.35;color:var(--tx);border-bottom:1px solid rgba(128,128,128,.10)}
body.v-calendar .cal-table td.tm{color:var(--tx);font-weight:400;font-variant-numeric:tabular-nums}
body.v-calendar .cal-table td.cn .fl{gap:6px}
body.v-calendar .cal-table td.cn .cc{font-size:13px;font-weight:500;color:var(--tx)}
body.v-calendar .cal-table td.nm{font-size:13px;color:var(--tx)}
body.v-calendar .cal-table td.nm .per{color:var(--tx)}
body.v-calendar .cal-table .stg{font-family:Georgia,"Times New Roman",serif;font-size:12px;color:#8b8f99;margin-left:3px;cursor:help}
body.v-calendar .cal-table td.num{font-size:13px;color:var(--tx);font-weight:400}
body.v-calendar .cal-table td.num.act{font-weight:700}
body.v-calendar .cal-table td.num.act.up{color:var(--up)}
body.v-calendar .cal-table td.num.act.dn{color:var(--dn)}
body.v-calendar .cal-table tr.past td{opacity:1}
body.v-calendar .cal-table tr.dh td{padding:9px 8px 3px;font-size:12px;font-weight:600;color:var(--mut);border-bottom:0}
body.v-calendar .cal-table tr.now td{position:relative;padding:0;height:22px;border:0}
body.v-calendar .cal-table tr.now td:before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid #3d62ab}
.nowbadge{position:absolute;left:10px;top:50%;transform:translateY(-50%);z-index:1;padding:1px 7px;font-size:12px;line-height:1.4;font-variant-numeric:tabular-nums;color:#5b8def;background:var(--cal-bg);border:1px solid #3d62ab;border-radius:3px}

/* ---- 한 화면에 맞추기: 계산기·시장 시간 압축 ---- */
@media(min-width:861px){
  body.v-calc .grid{gap:12px}
  body.v-calc .card{padding:10px 14px}
  body.v-calc .card>.hd{margin-bottom:6px}
  body.v-calc input[type=text],body.v-calc input[type=date],body.v-calc select{min-height:32px;padding:4px 9px;font-size:13px}
  body.v-calc input[type=date],body.v-calc input[type=date]::-webkit-datetime-edit,body.v-calc input[type=date]::-webkit-datetime-edit-fields-wrapper,body.v-calc input[type=date]::-webkit-datetime-edit-text,body.v-calc input[type=date]::-webkit-datetime-edit-month-field,body.v-calc input[type=date]::-webkit-datetime-edit-day-field,body.v-calc input[type=date]::-webkit-datetime-edit-year-field{font-size:13px}
  body.v-calc .seg button{padding:6px;font-size:13px}
  body.v-calc .ent input[type=text]{min-height:32px}
  body.v-calc .add{padding:5px}
  body.v-calc label{margin:5px 0 2px}
  body.v-calc .c3 .res{gap:3px}
  body.v-calc .c3 .res span,body.v-calc .c3 .res b,body.v-calc .c4 .res span,body.v-calc .c4 .res b,body.v-calc .c3 #rPct{font-size:13px}
  body.v-calc .c3 .res>div:not(.pair){padding-bottom:3px}
  body.v-calc .c3 .res b,body.v-calc .c4 .res b{margin-top:1px}
  body.v-calc .res .pair.box>div{padding:5px 10px}
  body.v-calc .c4 .res{margin-top:8px!important}
  body.v-calc .c4 .res>div{padding:5px 10px}
  body.v-calc .assets{padding-top:8px}
  body.v-calc .hint{margin-top:3px}
}
@media(min-width:700px){
  #market{padding:14px 18px}
  body.v-market #market .hd{margin-bottom:8px}
  body.v-market #market .mk-sub{margin:0 0 8px}
  body.v-market #market .mrow{padding:7px 0;min-height:0}
  body.v-market #market .mrow .tl-track{margin-top:6px}
  body.v-market #market .note{font-size:11px;line-height:1.45;margin-top:4px}
  body.v-market #market .tl-axis{margin-bottom:0}
}
@media(min-width:861px){
  body.v-calc .c3 .res span,body.v-calc .c3 .res b,body.v-calc .c4 .res span,body.v-calc .c4 .res b{line-height:1.25}
}

body.v-calendar .cal-table td.nm{font-weight:400}