* {box-sizing: border-box;}

body {
  margin: 0;
  background: #eee;color: #111;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  /* Desktop / iPad：整頁不允許垂直捲動 */
  overflow-y: hidden;
  overflow-x: visible;
}

/* ============================================Layout（Desktop + iPad）========================================================= */

.layout {
  display: flex;height: 100vh;overflow: hidden;
}

/* 左側 Sidebar（固定，不可關閉） */
.sidebar {
  width: 66px;background: #fff;
  border-right: 1px solid #eee;display: flex;
  flex-direction: column;
  align-items: center;padding: 12px 0;
}

.side-nav {
  display: flex;flex-direction: column;
  align-items: center;gap: 10px;margin-top: 46px;
}

.side-nav a {
  width: 48px;height: 66px;display: flex;
  flex-direction: column;align-items: center;justify-content: center;
  color: #999;cursor: pointer;border-radius: 6px;
  text-decoration: none;}

.side-nav a:hover,
.side-nav a:active {background: #f2f2f2;}

.nav-label {
  font-size: 80%;line-height: 1;
  text-align: center;color: #888;margin-top: 2px;}

/* 右側內容區 */
.content {flex: 1;overflow: hidden;}

/* =========================================================Topbar（Desktop / iPad 也顯示）========================================================= */

.mobile-topbar {
  display: flex;height: 36px;align-items: center;padding: 12px 12px 0 12px;
  position: sticky;top: 0;z-index: 2000;}

/* Desktop / iPad 沒有 menu button */
.menu-btn {display: none;}

.mobile-logo {
  flex: 1;display: flex;justify-content: center;text-align: center;
  color: #333;font-size: 20px;}

.mobile-right {width: 28px;}

h1 {
  display: inline-flex;
  align-items: center;gap: 3px;color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,Arial, sans-serif;
  font-size: 20px;
}
h2 {margin: 0 0 16px 0;font-weight: 700;display: flex;align-items: center;gap: 4px;font-size: 115%;color: #333;}
h2 .material-symbols-rounded.trendup {
  color: #333;  background: #f5bf0f;
  font-size: 140%;margin-right: 5px;display: inline-flex;border-radius: 6px;padding: 2px;
  vertical-align: text-bottom;vertical-align: -0.2em;
  font-variation-settings: "FILL" 1, "wght" 400, "opsz" 20;}

h2 .material-symbols-rounded.trenddown {
  color: #fff;background: #BB6C43;
  font-size: 140%;margin-right: 5px;display: inline-flex;border-radius: 6px;padding: 2px;
  vertical-align: text-bottom;vertical-align: -0.2em;
  font-variation-settings: "FILL" 1, "wght" 400, "opsz" 20;}

h1 .material-symbols-rounded.water-icon {
  color: #333;font-variation-settings: "FILL" 1, "wght" 400, "opsz" 20;
}
.data-update-time {
  margin: 0 0 8px 12px;font-size: 0.7rem;color: #888;
  letter-spacing: 0px;text-align: left;}

/* ======================================Main / Columns（Desktop + iPad）====================================================== */
.main {padding: 12px 10px 0px 10px;
}
/* Columns：只允許左右滑 */
.columns {
  display: flex;gap: 14px;
  height: calc(100vh - 52px);
  overflow-x: scroll;
  overflow-y: hidden;scroll-snap-type: x mandatory;
}
/* 單一 Column */
.column {
  flex: 0 0 450px;max-width: 450px;background: #fff;
  border-radius: 16px;padding: 18px;
  scroll-snap-align: start;
  display: flex;flex-direction: column;
  overflow: hidden;
}

/* =========================================================Section 標題（金色圓點）
     ========================================================= */
.section-title {display: flex;align-items: center;gap: 4px;
}
/* =========================================================Stock Header
     ========================================================= */

.stock-header {display: grid;grid-template-columns: 32% 26% 25% 14%;padding: 8px 0;font-size: 80%;
  border-bottom: 1px solid #ccc;color: #888;text-align: right;user-select: none;
}
.stock-header > div:first-child {text-align: left;}
.stock-header div {cursor: pointer;}
.stock-header div:hover {color: #333;}

/* =========================================================Column 內股票清單（Desktop / iPad：唯一 scroll-y）
     ========================================================= */
.column > [id^="col-"],
.column > #stocks {flex: 1;overflow-y: auto;overflow-x: hidden;padding-right: 10px;margin-right: -10px;
}
/* =========================================================股票列 ========================================================= */
.stock {
  display: grid;
  grid-template-columns: 32% 26% 26% 12%;
  grid-template-areas:
    "name   name   name   name"
    "code   price  change rating";
  padding: 8px 0;
  border-bottom: 1px solid #eee;font-size: 95%;
}
.stock:last-child {border-bottom: none;}
.stock .name {grid-area: name;font-weight: 500;line-height: 1.5;}
.stock .code {grid-area: code;}
.stock .price {grid-area: price;text-align: right;}
.stock .change {grid-area: change;text-align: right;}
.stock .rating {grid-area: rating;text-align: right;font-weight: 400;}
.stock .code,
.stock .price,
.stock .change {color: #666;}
.stock .rating.hold {color: #666;}

/* ======================================================Scrollbar（column 內） ================================================= */
.column > [id^="col-"] {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
}
.column > [id^="col-"]::-webkit-scrollbar {width: 6px;}
.column > [id^="col-"]::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.1);border-radius: 6px;}

/* =============================================================== Mobile only ============================================================= */
@media (max-width: 767px) {
  body {overflow-y: auto;overflow-x: hidden;font-size: 90%;}

  /* =====================================================Mobile Menu Button（樣式與 sidebar icon 對齊）======================================== */
  .menu-btn {
    display: flex;align-items: flex-start;  position: fixed; background: #fff;
    justify-content: center;}
  .menu-btn,
  .menu-btn:hover,
  .menu-btn:active,
  .menu-btn:focus {
    background: none;border: none;cursor: pointer;}
  .menu-btn:focus {outline: none;}
  .menu-btn .material-symbols-rounded {
    font-size: 28px;color: #666;
    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" -25, "opsz" 24;}

  /* Layout 改為 block */
  .layout {display: block;height: auto;}

  /* Sidebar 抽屜 */
  .sidebar {
    width: 66px;background: #fff;
    padding: 16px 10px;position: fixed;
    left: 0;top: 0;height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.25s ease;z-index: 1200;}

  .sidebar.open {transform: translateX(0);}
  /* Columns：左右滑，不能上下滑 */
  .columns {height: auto;overflow-x: auto;overflow-y: visible;}
  /* Column：不再有內部 scroll */
  .column {flex: 0 0 90%;max-width: 90%;font-size: 90;}
  .column > [id^="col-"],
  .column > #stocks {overflow: visible;}
  .drag-handle {opacity: 0;}}

/* =========================================================Info Page（/info）========================================================= */
.info-card {max-width: 720px;margin: 0 auto;background: #fff;border-radius: 18px;}
.info-desc {margin: 20px 0 25px 0;font-size: 95%;line-height: 1.5;color: #666;}
.info-main {font-size: 95%;color: #666;padding-left: 12px;}
.info-main p {margin: 0 0 10px 0;padding-left: 10px;}
.info-remark {margin-top: 20px;padding-top: 20px;padding-left: 10px;border-top: 1px dashed #ddd;font-size: 0.8rem;color: #666;}

/* =========================Rating Horizontal Bar========================= */
.rating-summary {margin: 8px 0 16px 0;font-size:80%;}
.rating-row {display: grid;grid-template-columns: 18px 1fr 38px;align-items: center;gap: 6px;margin-bottom: 4px;}
.rating-label {text-align: center;color: #666;}
.rating-bar-bg {background: #f5f5f5;height: 8px;border-radius: 4px;overflow: hidden;}
.rating-bar {height: 100%;border-radius: 4px;}
.bar-A {background: #378AFF;}
.bar-B {background: #f5bf0f;}
.bar-C {background: #BB6C43;}
.bar-D {background: #F94315;}
.bar-E {background: #0D9857;}

.lettercolor {font-size: 90%;margin: 0 6px 0 0;display: inline-flex;font-weight: 600;
  border-radius: 6px; padding: 3px 10px;vertical-align: text-bottom; vertical-align: 0em;}
.lettercolor.wood {background: #0D9857;color: #fff; }
.lettercolor.fire {background: #F94315;color: #fff; }
.lettercolor.earth {background: #BB6C43;color: #fff; }
.lettercolor.gold {background: #f5bf0f;color: #333; }
.lettercolor.water {background: #378AFF;color: #fff; }

/* ============================= 52W column 專用高度控制 ============================= */
.column[data-col="col-52w-high"] > #col-52w-high,
.column[data-col="col-52w-low"] > #col-52w-low {min-height: 556px;max-height: 556px;overflow-y: auto;margin-bottom: 12px;}

/* ============================= 52W column 不撐滿高度 ============================= */
.column[data-col="col-52w-high"],
.column[data-col="col-52w-low"] {align-self: flex-start;height: auto;}

/* =============================52W 區塊（獨立橫向滑）============================= */
.columns-52w {display: flex;gap: 12px;overflow-x: auto;overflow-y: hidden;padding-bottom: 0;}




/* 52W column 不撐滿高度 */
.columns-52w .column {align-self: flex-start;}

/* =============================產業區塊============================= */
.columns-industry {display: flex;overflow-x: auto;overflow-y: hidden;}