/* layout.css */

/* Theme Tokens */
:root{
  --bg:#f1f1f1;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#0ea5e9;
  --accent-2:#0ea5e9;
  --border:rgba(17,24,39,.08);
  --shadow:0 4px 4px rgba(0,0,0,.02);
  --sidebar-w:280px;
  --header-h:120px;
  --radius-12:12px;
  --radius-16:16px;
}

/* Font size scale */
html{ font-size:16px; }
@media (max-width:480px){ html{ font-size:15px; } }
@media (min-width:768px){ html{ font-size:16px; } }
@media (min-width:1200px){ html{ font-size:15px; } }

/* Typography */
body{
  font-size:1rem;
  line-height:1.6;
  color:var(--text);
}
h1,h2,h3,h4,h5,h6{
  font-weight:700;
  line-height:1.3;
  color:var(--text);
}
h1{ font-size:clamp(1.8rem,2.2vw,2.4rem); }
h2{ font-size:clamp(1.6rem,2vw,2rem); }
h3{ font-size:clamp(1.3rem,1.8vw,1.6rem); }
h4{ font-size:1.2rem; }
h5{ font-size:1.1rem; }
h6{ font-size:1rem; }
p,li{
  font-size:1rem;
  color:var(--muted);
}
.small-text{
  font-size:0.875rem;
  color:#9ca3af;
}

/* Reset/Basics */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background:rgba(0,0,0,0.01);
  color:var(--text);
  font-family:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Josefin Sans", "Segoe UI",
              Roboto, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrapper{ width:100%; margin-inline:auto; }


/* Header */
header.header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.03);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 26px;
  height: 90px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brand a:first-child{
  font-weight:800;
  letter-spacing:.2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.brand a:last-child{
  padding:0px 10px;
  border-left:1px solid var(--border);
  color:#000;
}
.header-title{
  font-weight:700;
  margin:0;
  font-size:clamp(16px,1.8vw,18px);
  color:#374151;
}
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.header-actions .lang{
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  color:#374151;
  background:#fff;
}
#menuButton{
  appearance:none;
  border:0px solid var(--border);
  background:#fff;
  color:#374151;
  border-radius:var(--radius-12);
  padding:10px 0px 10px 14px;
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  position: relative;
}

.lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 4px 26px 4px 8px;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  color: #111827;
  background-image: url('data:image/svg+xml;utf8,<svg fill="none" stroke="%23999" stroke-width="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 16px;
  transition: border-color 0.2s ease;
}
.lang-select:hover {
  border-color: #999;
}
.lang-select:focus {
  outline: none;
  border-color: #3b82f6;
}

@media (max-width:480px) {
  .lang-select {
    font-size: 13px;
    padding: 3px 24px 3px 6px;
  }
}

/* Overlay & Side Menu */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  transition:.22s ease;
  z-index:40;
}
.overlay.show{
  opacity:1;
  visibility:visible;
}
aside#sideMenu{
  position:fixed;
  inset:0 auto 0 0;
  width:var(--sidebar-w);
  max-width:85%;
  transform:translateX(-101%);
  transition:transform .28s cubic-bezier(.2,.6,.2,1);
  background:#fff;
  border-right:1px solid var(--border);
  box-shadow:var(--shadow);
  z-index:60;
  display:flex;
  flex-direction:column;
}
aside#sideMenu.open{ transform:translateX(0); }
#closeBtn{
  align-self:flex-end;
  margin:14px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  color:#6b7280;
  cursor:pointer;
  font-size: 16px;
}
aside#sideMenu ul{
  list-style:none;
  margin:0;
  padding:6px 14px 24px;
  overflow:auto;
  flex:1;
  background:#fff;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
aside#sideMenu ul::-webkit-scrollbar{ display:none; }
aside#sideMenu li{ margin:0; }
aside#sideMenu li a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 12px;
  margin:0;
  border-bottom:0 solid var(--border);
  background:#fff;
  transition:border-color .2s ease, transform .08s ease;
  font-weight:500;
  color:#1f2937;
}
aside#sideMenu li a:hover{
  background:#f5f7fa;
  border-color:rgba(17,24,39,.15);
}
aside#sideMenu li.f a::after{
  content:"→";
  color:var(--accent);
  opacity:.9;
}
aside#sideMenu li.side-label{
  padding:18px 12px 6px;
  font-size:0.78rem;
  color:#9ca3af;
  text-align: left;
}

/* Main */
main{
  padding:32px 20px 64px;
}
section h1{
  margin:18px 0 8px;
  font-size:clamp(22px,2.3vw,28px);
  color:#111827;
}
section p{
  color:#4b5563;
  margin:0 0 22px;
}

.h-t {background-image: url(../img/main-bg.png);max-width: 380px;
    background-position: right;background-repeat: no-repeat; background-size: 80px;}  
.h-t h2{ font-family: Vollkorn; font-size: 62px; font-weight: 200; margin: 0 0 30px;}
.h-t .dashboard-sub {font-size: 0.95rem; color: #6b7280; margin: 0px; padding-top: 40px;}

@media (max-width:480px) {
.h-t {background-image: url(../img/main-bg.png); max-width: 350px;}  
.h-t h2{ font-family: Vollkorn; font-size: 52px;}    
.h-t .dashboard-sub {font-size: 0.85rem;}
  }


/* Footer */
footer.site-footer{
  border-top:1px solid var(--border);
  background:#fff;
  color:#6b7280;
}
.site-footer-inner{
  max-width:1200px;
  margin:0 auto;
  padding:18px 26px;
  display:flex;
  /* align-items:center;
  justify-content:space-between; */
  gap:12px;
  font-size:14px;
  line-height:1.6;
  flex-direction: column;
}
.site-footer .copy{ color:#6b7280; }
.site-footer .foot-links{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.site-footer .foot-links a{ color:#6b7280; }
.site-footer .foot-links a:hover{ color:#111827; }

/* Desktop Sidebar */
@media (min-width:1200px){
  .layout{ display:block; }
  aside#sideMenu{
    position:fixed;
    top:var(--header-h);
    left:20px;
    width:var(--sidebar-w);
    max-width:var(--sidebar-w);
    height:calc(60dvh - var(--header-h));
    transform:none !important;
    border:1px solid var(--border);
    background:#fff;
    z-index:60;
    padding:30px 20px;
    border-radius:16px;
  }
  aside#sideMenu li.side-label{
    padding:30px 12px 6px;
    text-transform:uppercase;
    letter-spacing:-.03em;
    font-weight:600;
    text-align: left;
  }
  main{
    margin-left:var(--sidebar-w);
    padding:32px 100px 64px;
  }
  #menuButton,.overlay{ display:none !important; }
  #closeBtn{ display:none; }
}

/* Dashboard */
.dashboard-header{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-bottom:18px;
}
@media (min-width:768px){
  .dashboard-header{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
  }
}
.dashboard-title{
  font-size:1.6rem;
  font-weight:800;
  letter-spacing:-0.01em;
  color:#111827;
}
.dashboard-sub{
  font-size:0.95rem;
  color:#6b7280;
}

/* Summary cards */
.dashboard-grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:12px;
}
@media (min-width:960px){
  .dashboard-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}
.dashboard-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:30px;
  box-shadow:var(--shadow);
}
.dashboard-card h3{
  font-size:0.78rem;
  font-weight:600;
  color:#6b7280;
  margin:0;
  display:flex;
  align-items:center;
  gap:4px;
}
.dashboard-card .value{
  margin-top:4px;
  font-size:1.25rem;
  font-weight:700;
  color:#111827;
}
.dashboard-card .note{
  margin-top:4px;
  font-size:0.8rem;
  color:#6b7280;
}

/* Chips */
.chip-up,
.chip-dn{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:0.7rem;
  font-weight:500;
}
.chip-up{ background:#ecfdf5; color:#059669; }
.chip-dn{ background:#fef2f2; color:#dc2626; }

/* Sparkline */
.sparkline{
  margin-top:6px;
  width:100%;
  height:50px;
  padding:0 25px;
}
.sparkline path{
  fill:none;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.sparkline-labels{
  display:flex;
  justify-content:space-between;
  margin:0 0 30px;
  font-size:0.75rem;
  color:#9ca3af;
}
.sparkline-labels span{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  background:#f9fafb;
  border-radius:999px;
  border:1px solid #e5e7eb;
  font-size:0.7rem;
  color:#4b5563;
  white-space:nowrap;
}

/* Section head */
.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:26px 0 10px;
}
.section-head h2{
  margin:0;
  font-size:1.25rem;
  display:flex;
  align-items:center;
  gap:4px;
  font-weight: 600;
}
.section-head a{
  font-size:0.8rem;
  color:#6b7280;
}

/* Card grid */
.card-grid{
  display:grid;
  grid-template-columns:repeat(1,minmax(0,1fr));
  gap:12px;
}
@media (min-width:720px){
  .card-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1080px){
  .card-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:30px;
  box-shadow:var(--shadow);
}
.card h3{
  margin:0;
  font-size:1.25rem;
  font-weight:600;
  color:#111827;
  padding:5px 0 10px;
  display:flex;
  align-items:center;
  gap:6px;
}
.card p{
  margin:2px 0;
  font-size:0.8rem;
}
@media (max-width:480px) {
.card{padding:20px;}
  }


/* Tabs */
.tab-btn{
  padding:6px 10px;
  font-size:0.78rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  cursor:pointer;
}
.tab-btn[aria-selected="true"]{
  background:#0ea5e9;
  color:#fff;
  border-color:#0ea5e9;
}
.tab-pane.hidden{ display:none; }
.tab-pane{ margin-top:10px; }

/* Table */
.table-wrap{
  margin-top:8px;
  overflow-x:auto;
}
.table-wrap table{
  width:100%;
  border-collapse:collapse;
  font-size:0.78rem;
}
.table-wrap th,
.table-wrap td{
  padding:6px 8px;
  border-bottom:1px solid var(--border);
  text-align:left;
  white-space:nowrap;
}

/* Links */
.link{
  color:#0ea5e9;
}
.link:hover{
  text-decoration:underline;
}

/* Fav toggle */
.fav-toggle{
  width:18px;
  height:18px;
  padding:0;
  margin-left:2px;
  border:none;
  outline:none;
  background:transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.fav-toggle::before{
  content:"☆";
  font-size:16px;
  color:#d1d5db;
  transition:color .15s ease, transform .15s ease;
}
.fav-toggle:hover::before{
  color:#9ca3af;
}
.fav-toggle.active::before{
  content:"★";
  color:#facc15;
  transform:scale(1.05);
}
.section-head .fav-toggle{
  margin-left:6px;
  transform:translateY(-1px);
}



/* ===== Asset Detail (BTC 등) ===== */

.asset-header-line{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin:24px 0 8px;
}
.asset-title{
  font-size:2rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
  margin: 0 0 10px;
}
.asset-updated{
  font-size:0.8rem;
  color:#9ca3af;
}
.asset-tabs{
  display:flex;
  gap:8px;
  margin-bottom:14px;
}
.asset-body{
  display:grid;
  grid-template-columns:550px minmax(0,1.8fr);
  gap:16px;
  align-items:flex-start;
}
/* 그리드 자식이 내용 때문에 부모 깨먹지 않도록 */
.asset-panel,
.asset-main,
.asset-side{
  min-width:0;
}


@media (max-width:1200px){
  .asset-body{
    grid-template-columns:1fr;
  }
}

@media (max-width:640px){
  .asset-header-line{
  display:flex;
  align-items:inherit;
  justify-content:inherit;
  margin:24px 0 8px;
  flex-direction: column;
}
.asset-title{
  font-size:1.6rem;
}
.asset-updated{
  padding-bottom: 20px;
}
}


/* 좌측 패널 */
.asset-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.asset-subtitle{
  font-size:0.9rem;
  font-weight:600;
}
.primary-btn{
  margin-top:8px;
  padding:8px 10px;
  border-radius:10px;
  border:none;
  background:#0ea5e9;
  color:#fff;
  font-size:1rem;
  cursor:pointer;
  font-weight: 600;
}
.primary-btn:hover{
  opacity:.9;
}

/* 중앙 */
.asset-main{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.asset-metrics{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
@media (max-width:960px){
  .asset-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:600px){
  .asset-metrics{
    grid-template-columns:1fr 1fr;
  }
}
.metric-card{
  padding:10px 12px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--border);
}
.metric-label{
  font-size:0.75rem;
  color:#9ca3af;
}
.metric-value{
  margin-top:2px;
  font-size:1rem;
  font-weight:700;
  color:#111827;
}
.metric-value.up{ color:#059669; }
.metric-value.strong{ color:#2563eb; }

.asset-chart{
  padding:30px;
}
.asset-chart-title{
  font-size:1.25rem;
  margin-bottom:6px;
}
.asset-chart-box{
  border-radius:12px;
  padding:10px;
  background:#f9fafb;
}
.asset-chart-bg{
  position:relative;
  height:120px;
  border-radius:10px;
  background:linear-gradient(to top,#eff6ff,#ffffff);
  overflow:hidden;
}
.asset-chart-line{
  position:absolute;
  inset:auto 4%;
  height:2px;
  border-radius:999px;
  opacity:.9;
}
.asset-chart-line.bull{
  bottom:50%;
  background:#22c55e;
}
.asset-chart-line.base{
  bottom:35%;
  background:#3b82f6;
}
.asset-chart-line.bear{
  bottom:22%;
  background:#f97316;
}
.asset-chart-axis{
  display:flex;
  justify-content:space-between;
  margin-top:4px;
  font-size:0.7rem;
  color:#9ca3af;
}
.asset-scenario-legend{
  display:flex;
  gap:10px;
  margin-top:4px;
  font-size:0.7rem;
}
.asset-scenario-legend .bull{ color:#22c55e; }
.asset-scenario-legend .base{ color:#3b82f6; }
.asset-scenario-legend .bear{ color:#f97316; }

.asset-scenarios{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
@media (max-width:960px){
  .asset-scenarios{
    grid-template-columns:1fr;
  }
}
.scenario-card{
  padding:30px;
  border-radius:12px;
  font-size:0.78rem;
}
.scenario-card .label{
  font-weight:600;
  margin-bottom:2px;
}
.scenario-card.bull{
  background:#ecfdf5;
  color:#065f46;
}
.scenario-card.base{
  background:#eff6ff;
  color:#1d4ed8;
}
.scenario-card.bear{
  background:#fef2f2;
  color:#b91c1c;
}
.scenario-card .desc {margin-top: 2px;
    font-size: 1rem;
    font-weight: 700;
    }
.asset-outlook p{
  font-size:0.8rem;
  margin-top:4px;
}
@media (max-width:640px){
.asset-chart{padding:20px;}  
.scenario-card{padding:20px;}
}


/* 우측 사이드 */
.asset-side{
  font-size:0.85rem;
}
.asset-side h3{
  font-size:1.25rem;
  margin:0 0 6px;
}
.adder {padding: 20px 0;}
.asset-side .add-tit {font-size: 1.125rem;text-align: center; font-weight: 600; margin-bottom: 20px; color: #000;}
.asset-converter{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:4px;
}
.asset-converter label{
  font-size:0.75rem;
  color:#6b7280;
}
.asset-converter select,
.asset-converter input{
  padding:10px;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:0.8rem;
}
.asset-converter-result{
  margin-top:4px;
  padding:10px;
  border-radius:8px;
  background:#f9fafb;
  font-size:0.78rem;
}