* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  display: none;
}

body {
  color: #000000;
  margin: 0;
  padding: 0;
  width: 100vw;
  overflow-x: hidden; /* 가로 스크롤 방지 */
}

header {
  position: fixed; /* 화면에 고정 */
  top: 0; /* 화면 상단에 위치 */
  left: 0; /* 좌측 정렬 */
  width: 100vw; /* 전체 너비 사용 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  padding: 16px 32px;
  border-bottom: 1px solid #000000;
  box-sizing: border-box; /* 패딩 포함한 크기 계산 */
  z-index: 1000; /* 다른 요소 위에 표시되도록 설정 */
}

h1 {
  padding-left: 16px;
  border-left: 1px solid #000000;
  margin: 0;
  margin-bottom: 16px;
  font-size: 2em;
}
h1 span {
  margin-left:0.2em;
  font-size:0.5em !important;
}

.title {
  padding-left: 16px;
  border-left: 4px solid #000000;
}
.title:hover {
  border-left: 16px solid #000000;
}

nav button {
  width: 128px;
  height: 48px;
  padding: 8px 16px;
  border: none;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-bottom: 4px solid #000000;
  font-size: 1.2em;
  cursor: pointer;
  transition: background 0s;
}

nav button:hover {
  background-color: #000000;
  color: #ffffff;
}

nav #menu-button {
  width: 48px;
  height: 48px;
}

main {
  padding: 16px;
}

.section-container {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  gap: 16px;
  margin-bottom: 16px;
}

.left-section {
  width: 60%;
  overflow-y: auto;
  border: 1px solid #000000;
  border-bottom: 4px solid #000000;
  padding: 16px;
  box-sizing: border-box;
}

.right-section {
  width: 40%;
  overflow-y: auto;
  border: 1px solid #000000;
  border-bottom: 4px solid #000000;
  padding: 16px;
  background-color: #ffd000;
  box-sizing: border-box;
}

.week-meals-section {
  border: 1px solid #000000 !important;
  border-bottom: 4px solid #000000 !important;
  padding: 16px;
  margin-bottom: 16px;
}

.map-section {
  border: 1px solid #000000 !important;
  border-bottom: 4px solid #000000 !important;
  padding: 16px;
  margin-bottom: 16px;
}

.today-section {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  gap: 16px;
  margin-bottom: 16px;
}

.weather-section {
  box-sizing: border-box;
  height: 660px;
  border: 1px solid #000000 !important;
  border-bottom: 4px solid #000000 !important;
  padding: 16px;
  width: 100%;
  box-sizing: border-box;
}
.weather-form {
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.weather-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.weather-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.weather-divider{
    width:2px;
    height:80%;
    background:#000;
    border:none;
}
#precipitation-percent {
  font-weight: bold;
  font-size: 14em;
  margin: 0;
  margin-top: -64px;
}
#precipitation-value {
  text-decoration: underline #ffd000;
}
#precipitation-percent #percent {
  font-size: 0.5em;
}
#precipitation-percent #percent span {
  font-size: 50%;
  position: relative;
  top: -112px;
  left: -108px;
}
#precipitation {
  font-size: 1.4em;
  margin-top: -32px;
  color: #000000;
  margin-bottom: 4px;
}
#precipitation-shape {
  font-size: 2.2em;
  font-weight: 600;
  margin-top: -24px;
}
#top-celcius, #celcius, #bottom-celcius {
  font-size: 2em;
  margin: 4px 0;
  font-weight: 480;
  border-bottom: 2px solid #ffd000;
}
.marking-value {
  background-color: #ffd000;
}

.time-section {
  width: 80%;
  border: 1px solid #000000 !important;
  border-bottom: 4px solid #000000 !important;
  padding: 16px;
}
.time-form #date-text {
  font-size: 4em;
  line-height: 0;
  text-decoration: underline #ffd000;
}
.time-form #time-text {
  font-size: 4em;
  font-weight: bold;
  margin-top: -px;
  text-decoration: underline #ffd000;
}

.time-section .time-bars{ display:none; }
.weather-section,
.time-section{ height:auto; }   /* 기존 660 px 제거 */

/* === 시간 막대 공통 === */
.time-bars{margin-top:12px;display:flex;flex-direction:column;gap:8px}

/* 공통: 막대 본체 */
.bar{
  position:relative;
  height:48px;
  background:#fff;     /* 눈금 없는 흰 배경 */
  border:1px solid #000;
  border-left:2px solid #000;
  border-right:2px solid #000;
  border-bottom:8px solid #000;
  overflow:visible;    /* 라벨 안 잘리게 */
  margin-top: 32px;
}

/* 눈금은 ::after 레이어 */
.bar::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;           /* fill(1) 위, 라벨(10) 아래면 충분 */
  background-image:var(--ticks);  /* 막대마다 눈금 패턴 다르게 */
}

/* 각 막대별 눈금 패턴 지정 */
.hours-bar  { --ticks:repeating-linear-gradient(to right,#000 0 1px,transparent 1px calc(100%/24)); }
.minutes-bar,
.seconds-bar{ --ticks:repeating-linear-gradient(to right,#000 0 1px,transparent 1px calc(100%/60)); }

/* 노란색 채우기 레이어 */
.fill{
  position:absolute;
  inset:0 auto 0 0;   /* 왼쪽에서 오른쪽으로 */
  background:#ffd000;
  width:0%;           /* JS 로 갱신 */
  z-index:1;          /* 눈금보다 아래 */
}

/* 움직이는 숫자 라벨 */
.label{
  position:absolute;
  top:-28px;                      /* 막대 위로 */
  transform:translateX(-50%);
  font-size:1em;
  font-weight:bold;
  white-space:nowrap;
  color: #000 !important;
}
.hours-bar .label{font-size:1.1em}

/* ── 기존 indicator 스타일(.indicator{…}) 부분은 더 이상 쓰지 않으므로 삭제하거나 주석 처리해도 무방 */

.school-info {
  width: 100%;
  margin-bottom: 16px;
  border-collapse: collapse !important;
  border: 1px solid #000000 !important;
}

.school-info th {
  width: 160px;
  background-color: #000000 !important;
  color: #ffffff;
  padding: 16px !important;
  border: 1px solid #000000 !important;
  text-align: left !important;
  font-weight: bold !important;
  font-size: 1.2em;
}

.school-info td {
  padding: 16px !important;
  border: 1px solid #000000 !important;
  background-color: #ffffff !important;
  text-align: left !important;
  font-size: 1.2em;
}

.school-info td a {
  color: #000000 !important;
  text-decoration: underline 2px !important;
}

.meal-button {
  margin-bottom: 16px;
  width: 16%;
}

#meal-list {
  width: 100%;
  display: table;
  border-collapse: collapse;
}

#meal-list thead {
  display: table-header-group;
  color: #ffffff;
  background-color: #000000;
  text-align: center;
  font-weight: bold;
  border-bottom: 2px solid #000000;
}

#meal-list thead tr th {
  padding: 12px;
  font-size: 1.2em;
  border: 1px solid #000000;
  width: 20%;
}

#meal-list tbody {
  display: table-row-group;
}

#meal-list tbody tr {
  display: table-row;
  text-align: center;
  border-bottom: 1px solid #cccccc !important;
  border: 1px solid #000000;
}

#meal-list tbody tr:last-child {
  border-bottom: 1px solid #000000 !important;
  padding-bottom: 16px;
  border-bottom: 4px solid #000000 !important;
}

#meal-list tbody td {
  display: table-cell;
  padding: 16px;
  font-size: 1em;
  background-color: #ffffff;
  border: 1px solid #000000;
}

#meal ul, #next-meal ul {
  border: 1px solid #000000;
  border-collapse: collapse;
}

#meal li, #next-meal li {
  list-style: none;
  padding: 16px;
  border-bottom: 1px solid #000000;
  font-size: 1.2em;
  border-right: 16px solid #000000;
}

#meal li:last-child, #next-meal li:last-child {
  border-bottom: none;
}

.main-gold-meal {
  background-color: #000000;
  color: #ffffff;
}
.gold-meal .highlight {
  background-color: #ffd000 !important;
}

/* 학사 일정 테이블 스타일 */
.schedule-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #000;
}

.schedule-table thead {
  background-color: #eeeeee;
  text-align: center;
}

.schedule-table th, .schedule-table td {
  padding: 12px;
  border: 1px solid #000;
  text-align: center;
}

.schedule-table tbody tr:nth-child(even) {
  background-color: #f8f8f8;
}

footer {
  color: #000000;
  text-align: center;
  padding: 48px 0;
  font-size: 1em;
}

#grade-buttons button {
  margin-right: 8px;
  margin-top: 16px;
  width: 160px;
  height: 48px;
  font-size: 1.2em;
  border: 1px solid #000000;
  background-color: #ffffff;
  border-bottom: 4px solid #000000;
  margin-bottom: 8px;
  cursor: pointer;
}
#class-buttons button {
  margin-right: 8px;
  width: 64px;
  height: 48px;
  font-size: 1em;
  border: 1px solid #000000;
  border-bottom: 4px solid #000000;
  background-color: #ffffff;
  margin-bottom: 8px;
  cursor: pointer;
}
#grade-buttons button:hover, #class-buttons button:hover {
  background-color: #000000;
  color: #ffffff;
}

.timetable {
  width:100%;
  text-align: center;
  border-collapse: collapse;
  margin-bottom: 16px;
}
.timetable thead th {
  background-color: #000000;
  color: #ffffff;
  height: 48px;
  font-weight: bold;
  border: 1px solid #000000;
}
.timetable tbody tr td {
  background-color: #ffffff;
  color: #000000;
  height: 48px;
  border: 1px solid #000000;
  max-width: 80px;
}
.timetable tbody tr:last-child {
  border-bottom: 4px solid #000000;
}

#school-schedule {
  margin-top: 16px;
}
.scheduletable {
  width: 100%;
  width:100%;
  text-align: center;
  border-collapse: collapse;
}
.scheduletable thead th {
  background-color: #000000;
  color: #ffffff;
  height: 48px;
  border: 1px solid #000000;
}
.scheduletable tbody tr td {
  background-color: #ffffff;
  color: #000000;
  height: 60px;
  border: 1px solid #000000;
  max-width: 0px;
}
.scheduletable tbody tr:last-child {
  border-bottom: 4px solid #000000;
}
.event-title-text {
  font-size: 1em;
}
.event-content {
  background-color:#ffd000;
  font-weight: normal !important;
}
.day-text {
  color: #000000 !important;
  font-weight: bold !important;
}
.no-day-text {
  background-color: #ffffff !important;
  color: #000000 !important;
  font-weight: normal !important;
}
.scheduletable td.saturday, .scheduletable td.sunday {
  background: repeating-linear-gradient(
    45deg,
    #ffcccc,
    #ffccdd 5px,
    #ffffff 5px,
    #ffffff 10px
  );
}
.scheduletable td.other-month {
  color: #00000050;
}
#schedule-today-text {
  background-color: #00ffaa50;
}

.train-hr {
  width: 100%;
  height: 1px;
  background-color: #000000;
}

/* 역 정보 + 버스 정보를 포함하는 전체 레이아웃 */
.station-section .station-layout {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

/* 왼쪽 지하철 정보 */
.station-section .train-info-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  padding: 16px;
  border: 1px solid #000 !important;
  border-bottom: 4px solid #000 !important;
}

/* 오른쪽 버스 정보 */
.station-section .bus-section {
  flex: 1;
  padding: 16px;
  border: 1px solid #000 !important;
  border-bottom: 4px solid #000 !important;
  background-color: #ffffff;
}
.station-section .train-info-panel .section {
  font-size: 1.2em;
  line-height: 1.6;
}
.station-section .train-info-panel span {
  font-size: 1.4em;
  color: #000000;
}
.station-section .train-info-panel .highlight {
  font-weight: bold;
  font-size: 2.2em;
  color: #000000;
}
.station-section .train-info-panel strong {
  font-weight: bold;
  font-size: 2.4em;
}
.station-section .train-info-panel .station-time {
  border-bottom: 8px solid #ffd000 !important;
}

.crowded {
  font-size: 0.6em;
  background-color: #ffd000;
  color: #000000;
}

.bus-section {
  border: 1px solid #000;
  border-bottom: 4px solid #000;
  background-color: #ffffff;
  padding: 20px;
}
.bus-table {
  display: flex;
  gap: 24px;
}
.bus-column {
  flex: 1;
}
.bus-column h2 {
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 16px;
  border-bottom: 2px solid #000000;
}
.bus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(6, auto);
  gap: 8px;
}
.bus-cell {
  border: 1px solid #000000;
  border-left: 4px solid #000000;
  padding: 16px;
  text-align: center;
  background-color: #fff;
  color: #000;
  font-size: 1.2em;
}
.urgent {
  background-color: #000000 !important;
  border: 1px solid #000000 !important;
  border-left: 4px solid #000000 !important;
  color: white !important;
  font-weight: bold;
}

.loading {
  grid-column: span 4;
  text-align: center;
  font-style: italic;
  color: gray;
}

/* ─────────────────────────────── */
/* 📄 common.css  혹은 <style> 태그  */
/* ─────────────────────────────── */

/* 토스트들을 붙이는 고정 컨테이너 */
.toast-container{
  position:fixed;
  top:32px;           /* ⬆️ 원하는 위치로 조정 */
  left:32px;
  display:flex;
  flex-direction:column;
  gap:16px;              /* 토스트끼리 간격 */
  z-index:9999;
}

/* 기본 토스트 틀 */
.toast{
  min-width:240px;
  max-width:320px;
  padding:16px 24px;
  font-size:1em;
  line-height:1.4;
  background:#ffffff;
  color:#000000;
  font-weight: bold;
  border:1px solid #000;
  border-left:1px solid #000;
  border-bottom:4px solid #000;
  box-shadow:2px 4px 8px rgba(0,0,0,.15);
  opacity:0;
  transform:translateY(-20px);
  transition:opacity .25s ease, transform .25s ease;
  cursor:pointer;          /* 클릭 시 즉시 닫힘 */
}

/* 나타난 뒤 상태 */
.toast.show{
  opacity:1;
  transform:translateY(0);
}

/* 토스트 타입 : info ‧ success ‧ error  */
.toast.info    { background-color:#ffffff;      }
.toast.success { background-color:#ffd000;   }
.toast.error   { background-color:#ff135a;   }

/* 사라질 때 페이드아웃용 */
.toast.hide{
  opacity:0;
  transform:translateY(-20px);
  transition:opacity .2s ease, transform .2s ease;
}

@media (max-width: 800px) {
  .title {
    font-size: 1.6em;
  }
  nav button {
    width: 80px;
    height: 48px;
  }
}

@media (max-width: 1748px) {
  .event-title-text {
    font-weight: bold;
    font-size: 0.8em !important;
  }
  .scheduletable thead tr th,
  .scheduletable tbody tr td div {
    font-size: 0.65em;
  }

  .time-form #date-text, .time-form #time-text {
    font-size: 2.5em;
  }
}

.draggable-section {
  border: 2px dashed transparent;
  transition: border 0.2s ease, background-color 0.2s ease;
  user-select: none;
}

.dragging {
  opacity: 0.7;
  background-color: #f0f8ff;
  cursor: grabbing;
}

.drag-over {
  border: 2px dashed #007bff;
  background-color: #e6f2ff;
}

.drag-placeholder {
  height: 20px;
  margin: 8px 0;
  border: 2px dashed #ccc;
  background: #fafafa;
}

.qrcode-section {
  position: relative;                          /* QR 정렬 기준점 */
  height: 208px;
  padding: 24px;
  margin-bottom: 16px;
  background-color: #ffd000;
  border: 1px solid #000 !important;
  border-bottom: 4px solid #000 !important;
}

.qrcode-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
}

.description {
  font-size: 1.2em;
  line-height: 1.6em;
  flex: 1;
}

.description-bold {
  color: #ffffff;
  background-color: #000000;
}

.description-link {
  border-bottom: 2px solid #000000;
}

/* ✅ QR코드 오른쪽 '정확히 수직 중앙' 위치 */
.code {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 208px;
  height: 208px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white; /* 배경 필요 시 */
}

.qrcode {
  width: 100%;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  border: 1px solid #000000 !important;
  border-bottom: 4px solid #000000 !important;
}

@media (max-width: 1600px) {
  main {
    padding: 8px;
  }

  .section-container, .qrcode-section, .week-meals-section, .map-section, .today-section, .station-section .station-layout {
    margin-bottom: 8px;
    gap: 8px;
  }

  .left-section, .right-section, .weather-section, .time-section, .week-meals-section, .train-info-panel, .bus-section, .map-section {
    padding: 8px !important;
  }

  h1 {
    padding-left: 8px;
    border-left: 1px solid #000000;
    margin: 0;
    margin-bottom: 8px;
    font-size: 1em;
  }
  h1 span {
    margin-left:1em;
    font-size:0.5rem !important;
  }

  .marking {
    font-size: 0.6em;
  }

  .description {
    font-size: 0.6em;
    line-height: 1.8em;
    flex: 1;
  }

  .qrcode-section {
    position: relative;                          /* QR 정렬 기준점 */
    height: 120px;
    padding: 8px;
    margin-bottom: 8px;
    background-color: #ffd000;
    border: 1px solid #000 !important;
    border-bottom: 4px solid #000 !important;
  }

  .code {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white; /* 배경 필요 시 */
  }

  #meal li, #next-meal li {
    list-style: none;
    padding: 6px;
    border-bottom: 1px solid #000000;
    font-size: 0.6em;
    border-right: 8px solid #000000;
  }

  .school-info {
    width: 100%;
    margin-bottom: 0px;
    border-collapse: collapse !important;
    border: 1px solid #000000 !important;
  }

  .school-info th {
    width: 160px;
    background-color: #000000 !important;
    color: #ffffff;
    padding: 8px !important;
    border: 1px solid #000000 !important;
    text-align: left !important;
    font-weight: bold !important;
    font-size: 0.6em;
  }

  .school-info td {
    padding: 8px !important;
    border: 1px solid #000000 !important;
    background-color: #ffffff !important;
    text-align: left !important;
    font-size: 0.6em;
  }

  .school-info td a {
    color: #000000 !important;
    text-decoration: underline 2px !important;
  }

  .time-section {
    width: 80%;
    border: 1px solid #000000 !important;
    border-bottom: 4px solid #000000 !important;
    padding: 8px;
  }
  .time-form #date-text {
    font-size: 1.2em;
    line-height: 0;
    text-decoration: underline #ffd000;
  }
  .time-form #time-text {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: -8px;
    text-decoration: underline #ffd000;
  }

  #precipitation-percent {
    font-weight: bold;
    font-size: 6em;
    margin: 0;
    margin-top: 32px;
    line-height: 0;
  }
  #precipitation-value {
    text-decoration: underline #ffd000;
  }
  #precipitation-percent #percent {
    font-size: 0.5em;
  }
  #precipitation-percent #percent span {
    font-size: 50%;
    position: relative;
    top: -48px;
    left: -46px;
  }
  #precipitation {
    font-size: 0.6em;
    margin-top: -16px;
    color: #000000;
    margin-bottom: 4px;
  }
  #precipitation-shape {
    font-size: 0.8em;
    font-weight: 600;
    margin-top: 8px;
  }
  #top-celcius, #celcius, #bottom-celcius {
    font-size: 1em;
    margin: 4px 0;
    font-weight: 480;
    border-bottom: 2px solid #ffd000;
  }

  #school-schedule {
    margin-top: 8px;
  }
  .scheduletable {
    width: 100%;
    width:100%;
    text-align: center;
    border-collapse: collapse;
  }
  .scheduletable thead th {
    background-color: #000000;
    color: #ffffff;
    height: 24px;
    border: 1px solid #000000;
  }
  .scheduletable tbody tr td {
    background-color: #ffffff;
    color: #000000;
    height: 30px;
    border: 1px solid #000000;
    max-width: 0px;
  }
  .scheduletable tbody tr:last-child {
    border-bottom: 4px solid #000000;
  }
  .event-title-text {
    font-size: 0.4rem !important;
    margin-bottom: -4px;
  }
  .event-content {
    font-size: 0.4rem !important;
  }
  .other-month {
    font-size: 0.4rem !important;
  }

  .bus-column {
    flex: 1;
  }
  .bus-column h2 {
    font-size: 1em;
    text-align: center;
    margin-bottom: 8px;
    border-bottom: 2px solid #000000;
  }
  .bus-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, auto);
    gap: 4px;
  }
  .bus-cell {
    border: 1px solid #000000;
    border-left: 4px solid #000000;
    padding: 2px;
    text-align: center;
    background-color: #fff;
    color: #000;
    font-size: 0.6em;
  }
  .bus-table {
    display: flex;
    gap: 8px;
  }
  .urgent {
    background-color: #000000 !important;
    border: 1px solid #000000 !important;
    border-left: 4px solid #000000 !important;
    color: white !important;
    font-weight: bold;
  }
  .crowded {
    font-size: 0.5rem !important;
    background-color: #ffd000;
    color: #000000;
  }

  /* 왼쪽 지하철 정보 */
  .station-section .train-info-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 8px;
    border: 1px solid #000 !important;
    border-bottom: 4px solid #000 !important;
  }
  .station-section .train-info-panel .section {
    font-size: 0.8em;
    line-height: 1.6;
  }
  .station-section .train-info-panel span {
    font-size: 1em;
    color: #000000;
  }
  .station-section .train-info-panel .highlight {
    font-weight: bold;
    font-size: 1.2em;
    color: #000000;
  }
  .station-section .train-info-panel strong {
    font-weight: bold;
    font-size: 1.2em;
  }
  .station-section .train-info-panel .station-time {
    border-bottom: 4px solid #ffd000 !important;
  }

  #meal ul, #next-meal ul {
    border: 1px solid #000000;
    border-collapse: collapse;
    margin: 8px 0 !important;
    padding: 0 0 0 8px !important;
  }

  #meal-list {
    width: 100%;
    display: table;
    border-collapse: collapse;
  }

  #meal-list thead {
    display: table-header-group;
    color: #ffffff;
    background-color: #000000;
    text-align: center;
    font-weight: bold;
    border-bottom: 2px solid #000000;
  }

  #meal-list thead tr th {
    padding: 6px;
    font-size: 0.6em;
    border: 1px solid #000000;
    width: 20%;
  }

  #meal-list tbody {
    display: table-row-group;
  }

  #meal-list tbody tr {
    display: table-row;
    text-align: center;
    border-bottom: 1px solid #cccccc !important;
    border: 1px solid #000000;
  }

  #meal-list tbody tr:last-child {
    border-bottom: 1px solid #000000 !important;
    padding-bottom: 8px;
    border-bottom: 4px solid #000000 !important;
  }

  #meal-list tbody td {
    display: table-cell;
    padding: 8px;
    font-size: 0.6em;
    background-color: #ffffff;
    border: 1px solid #000000;
  }
}