/* ==========================================================================
   KOMSA �뭾�뼢쨌�뭾�냽 紐⑤땲�꽣留� �떆�뒪�뀥 �� 媛쒖꽑�맂 �뒪���씪�떆�듃
   媛쒖꽑 �궗�빆:
   1. 怨좎젙 �뵿�� �룿�듃 �겕湲� �넂 clamp() 湲곕컲 �쑀�룞 �룿�듃濡� �쟾�솚
   2. 怨좎젙 �넂�씠(px/%) �넂 min-height + auto 湲곕컲�쑝濡� 蹂�寃�
   3. CSS 以묐났 釉붾줉 �젣嫄� (.gauge �씠以� �젙�쓽)
   4. 硫붾돱 媛�濡� �뒪�겕濡� UX 媛쒖꽑 (�뒪�겕濡ㅻ컮 �뒪���씪留�, �꽣移� 移쒗솕�쟻)
   5. �듅蹂� �쁺�뿭 媛��룆�꽦 媛쒖꽑 (�룿�듃, �젅�씠�븘�썐)
   6. 濡쒕뵫 �뒪�뵾�꼫 �뒪���씪 異붽�
   7. 諛섏쓳�삎 釉뚮젅�씠�겕�룷�씤�듃 �꽭遺꾪솕 (1440 / 1200 / 1024 / 768 / 480 / 360)
   8. �젒洹쇱꽦 媛쒖꽑 (focus �뒪���씪, aria 愿��젴)
   ========================================================================== */

/* --------------------------------------------------------------------------
   �룿�듃 �젙�쓽
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   CSS 蹂��닔 (�뵒�옄�씤 �넗�겙)
   -------------------------------------------------------------------------- */
:root {
  --header-h: 160px;
  /* v35: 移대뱶 媛꾧꺽 */
  --gap: 12px;
  --border-radius: 12px;
  --border-white: 2px solid rgba(200, 220, 240, 0.75);
  --bg-card: linear-gradient(to top, #0a1f38, #264059);
  --bg-dark: #121619;
  --bg-menu: #253344;
  --color-text: #ffffff;
  --color-accent: #ebd228;
  --color-accent-dim: rgba(235, 210, 40, 0.75);
  --color-green: #2ecc71;
  --color-yellow: #f1c40f;
  --color-red: #e74c3c;
  --color-border-green: #29a144;
  --color-border-yellow: #efcc1a;
  --color-border-red: #a33131;
  --transition-fast: 0.2s ease;
  --transition-med: 0.4s ease;
  /* v35: 移대뱶 怨듯넻 洹몃┝�옄 */
  --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  /* v35: �닔�떊�떆媛�/�뾽�뜲�씠�듃 媛뺤“ �깋 */
  --color-time-accent: #5ba8c8;
}

/* --------------------------------------------------------------------------
   由ъ뀑 諛� 湲곕낯 �꽕�젙
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 媛쒖꽑: html�뿉�룄 overflow-y 紐낆떆 �� body�쓽 auto媛� �젣��濡� �룞�옉�븯�룄濡� */
  overflow-y: auto;
  overflow-x: hidden;
}

img, svg {
  max-width: 100%;
  height: auto;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  font-family: 'Pretendard', 'Pretendard-Regular', sans-serif;
  font-weight: 400;
  min-height: 100vh;
  overflow-x: hidden;
  /* 媛쒖꽑: 肄섑뀗痢좉� 酉고룷�듃瑜� 珥덇낵�븷 �븣 �꽭濡� �뒪�겕濡� �뿀�슜 */
  overflow-y: auto;
  background-color: #0b233d;
}

/* --------------------------------------------------------------------------
   �뿤�뜑
   -------------------------------------------------------------------------- */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;          /* v35: 留덉뒪肄뷀듃媛� �뿤�뜑 �븯�떒�뿉 遺숇룄濡� */
  width: 100%;
  height: var(--header-h);
  padding: 0 24px 0;              /* v35: �븯�떒 �뙣�뵫 �젣嫄� �� 留덉뒪肄뷀듃媛� 諛붾떏�뿉 �떯�룄濡� */
  background: linear-gradient(180deg, #1e3048 0%, #14202e 100%);
  border-bottom: 2px solid rgba(91, 168, 200, 0.6);
  gap: 12px;
  flex-shrink: 0;
  overflow: visible;              /* v35: 留덉뒪肄뷀듃 �삤踰꾪뵆濡쒖슦 �뿀�슜 */
  position: relative;
}

.mascot {
  flex: 0 0 auto;
  align-self: flex-end;           /* v35: �뿤�뜑 �븯�떒 �젙�젹 */
}

.mascot .img_mascot {
  position: relative;
  left: 20px;
  /* v37: 留덉뒪肄뷀듃媛� �뿤�뜑 �쐞濡� �옄�뿰�뒪�읇寃� �삱�씪�삤�룄濡� �쓬�닔 bottom �쟻�슜 */
  bottom: -8px;
  height: clamp(140px, 15vh, 210px);
  z-index: 10;
  /* v37: 洹몃┝�옄 媛뺥솕濡� �엯泥닿컧 �뼢�긽 */
  filter: drop-shadow(0 -4px 12px rgba(0,0,0,0.4)) drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}

.title {
  min-width: 0;
  color: var(--color-text);
  font-size: clamp(1.3rem, 2vw + 0.8rem, 3rem);
  text-align: center;
  flex: 1;
  font-weight: 700;
  line-height: 1.35;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  /* v35: �뿤�뜑 以묒븰 �닔吏� �젙�젹 */
  align-self: center;
  padding: 16px 0;
}

.logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: 40px;
  /* v35: �뿤�뜑 以묒븰 �닔吏� �젙�젹 */
  align-self: center;
  padding: 16px 0;
}

.logo img {
  height: clamp(60px, 7vw, 100px);
  width: auto;
  /* v35: 濡쒓퀬 洹몃┝�옄 */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* --------------------------------------------------------------------------
   諛곌꼍 而⑦뀒�씠�꼫
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  background-image: image-set(
    url('/images/sea_background_1920.webp') type('image/webp'),
    url('/images/sea_background_1920.jpg') type('image/jpeg')
  );
  background-color: #0b233d;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  flex: 1;
  display: flex;
  flex-direction: column;
  z-index: 2;
  min-height: min-content;
  /* v18: �븯�떒 �뿬諛� 利앷� */
  padding-bottom: 20px;
}

@media (min-width: 1600px) {
  .container {
    background-image: image-set(
      url('/images/sea_background_2560.webp') type('image/webp'),
      url('/images/sea_background_2560.jpg') type('image/jpeg')
    );
  }
}

/* --------------------------------------------------------------------------
   肄섑뀗痢� �옒�띁
   -------------------------------------------------------------------------- */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 94%;
  /* v36: 理쒕� �꼫鍮� �젣�븳 �� 1920px �씠�긽 �솕硫댁뿉�꽌 �꼫臾� �꼻寃� �띁吏��뒗 臾몄젣 �빐寃� */
  max-width: 1600px;
  /* v18: �긽�떒 �뿬諛� 利앷� */
  margin: 18px auto 0;
  min-height: auto;
  padding-bottom: 14px;
}

/* --------------------------------------------------------------------------
   �꺆 硫붾돱
   -------------------------------------------------------------------------- */
.content_menu {
  width: 100%;
  background: var(--bg-menu);
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: nowrap;
  order: 0; /* �꺆 硫붾돱: �젣�씪 癒쇱� */
  /* 媛쒖꽑: �옉�� �솕硫댁뿉�꽌 媛�濡� �뒪�겕濡� �뿀�슜 */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.3) transparent;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  flex-shrink: 0;
}

/* 媛쒖꽑: �뒪�겕濡ㅻ컮 �뒪���씪留� (Webkit) */
.content_menu::-webkit-scrollbar {
  height: 4px;
}
.content_menu::-webkit-scrollbar-track {
  background: transparent;
}
.content_menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.content_menu .menu {
  text-align: center;
  background: var(--bg-menu);
  /* v18: �솕硫� �꼫鍮꾩뿉 �뵲�씪 �옄�룞 議곗젙 */
  font-size: clamp(0.65rem, 0.6vw + 0.3rem, 1.1rem);
  padding: clamp(10px, 1.2vh, 16px) clamp(4px, 0.5vw, 12px);
  border-right: 1px solid #5d6470;
  border-left: 1px solid #5d6470;
  border-top: 2px solid var(--bg-menu);
  border-bottom: 2px solid var(--bg-menu);
  color: var(--color-text);
  /* 洹좊벑 遺꾪븷: 紐⑤뱺 �꺆�씠 硫붾돱 諛뺤뒪瑜� 鍮� 怨듦컙 �뾾�씠 苑� 梨꾩� */
  flex: 1 1 0;
  min-width: 0;
  /* v18: �꽣移� ��寃� 44px �씠�긽 �솗蹂� */
  min-height: 44px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: normal;
  word-break: keep-all;
  line-height: 1.3;
}

.content_menu .menu:hover {
  /* v19: hover �깋�긽 �씪移� */
  background: #2e4258;
}

/* 媛쒖꽑: focus �뒪���씪 (�젒洹쇱꽦) */
.content_menu .menu:focus-visible {
  outline: 2px solid #4e91ac;
  outline-offset: -2px;
}

.content_menu .menu.active {
  /* v35: �꺆 �솢�꽦 �긽�깭 媛뺥솕 */
  background: linear-gradient(to bottom, #1e4a70, #1a3a5c);
  color: #ffffff;
  border-top: 4px solid var(--color-time-accent);
  border-bottom: 2px solid #1a3a5c;
  border-left: 1px solid rgba(91, 168, 200, 0.4);
  border-right: 1px solid rgba(91, 168, 200, 0.4);
  font-weight: 700;
  box-shadow: inset 0 4px 0 rgba(91, 168, 200, 0.8),
              0 2px 8px rgba(0, 0, 0, 0.3);
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* --------------------------------------------------------------------------
   硫붿씤 肄섑뀗痢� �쁺�뿭
   -------------------------------------------------------------------------- */
.content_main {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: var(--gap);
  /* v18: �긽�떒 �뿬諛� 利앷� */
  margin-top: 22px;
  min-height: auto;
  order: 2;
}

/* 醫뚯륫: �뭾�뼢쨌�뭾�냽 */
.content_main .wind_contents {
  width: 62%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* �슦痢�: �듅蹂는룹��닔 */
.content_main .etc {
  width: 38%;
  display: flex;
  flex-direction: column;
  color: var(--color-text);
  min-width: 0;
}

/* --------------------------------------------------------------------------
   �닔�떊 �떆媛� / �떎�떆媛� �뾽�뜲�씠�듃 怨듯넻 �뿤�뜑 移대뱶
   -------------------------------------------------------------------------- */

/* 1024px �씠�븯: �몢 諛뺤뒪瑜� �굹���엳 臾띕뒗 �옒�띁 */
.time-row {
  display: none; /* 湲곕낯: �닲源� (�뜲�뒪�겕�깙�뿉�꽌�뒗 媛� 而⑤읆�뿉 遺꾨━ 諛곗튂) */
  gap: var(--gap);
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 0;
  align-items: stretch;
  /* content �궡 �쐞移�: content_menu �떎�쓬, content_main �븵 */
  order: 1;
}
  .time-row .wind_update,
  .time-row .update_time {
    flex: 1;
    min-width: 0;              /* v36: flex �옄�떇�씠 異뺤냼�맆 �닔 �엳�룄濡� */
    margin-bottom: 0;
    width: auto;
    font-size: clamp(0.7rem, 1.2vw + 0.3rem, 1.4rem);
    /* v18: 醫뚯륫 媛뺤“ 諛� �깋�긽 �씪移� */
    border-left: 4px solid rgba(78, 145, 172, 0.8);
    padding: clamp(7px, 1vh, 12px) 12px;
    /* v36: �뀓�뒪�듃 留먯쨪�엫 諛⑹� �� nowrap �젣嫄�, �옄�룞 以꾨컮轅� */
    white-space: normal;
    word-break: keep-all;
    overflow: visible;
  }

.content_main .wind_contents .wind_update,
.content_main .etc .update_time {
  width: 100%;
  border: 1px solid rgba(91, 168, 200, 0.5);
  border-left: 4px solid var(--color-time-accent);
  padding: clamp(10px, 1.4vh, 16px) 16px clamp(10px, 1.4vh, 16px) 20px;
  border-radius: var(--border-radius);
  /* v37: 諛곌꼍 �뜑 諛앷쾶 媛쒖꽑 �� 媛��룆�꽦 �뼢�긽 */
  background: linear-gradient(135deg, rgba(30, 65, 105, 0.98) 0%, rgba(42, 78, 118, 0.95) 60%, rgba(55, 92, 130, 0.9) 100%);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  text-align: center;
  font-size: clamp(0.9rem, 1.05vw + 0.52rem, 1.7rem);
  color: #e8f4ff;
  flex-shrink: 0;
  line-height: 1.4;
  letter-spacing: 0.3px;
  font-weight: 500;
  transition: background var(--transition-fast);
}

/* --------------------------------------------------------------------------
   �뭾�뼢쨌�뭾�냽 �젙蹂� �쁺�뿭
   -------------------------------------------------------------------------- */
.content_main .wind_contents .wind_info {
  flex: 1;
  /* v18: �긽�떒 �뿬諛� 利앷� */
  margin-top: 12px;
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: var(--gap);
  min-height: auto;
}

/* �굹移⑤컲 移대뱶 */
.content_main .wind_contents .wind_info .wind_direction {
	height:100%;
  background: var(--bg-card);
  width: 50%;
  border: var(--border-white);
  border-radius: var(--border-radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 10px 8px;
  min-width: 0;
  /* v35: 移대뱶 洹몃┝�옄 */
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--transition-fast);
}

.content_main .wind_contents .wind_info .wind_direction:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.content_main .wind_contents .wind_info .wind_direction .dirImg {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.content_main .wind_contents .wind_info .wind_direction .dirImg svg {
  /* v20: margin �젣嫄�, �겕湲� 理쒕��솕 */
  margin-top: 0;
  width: clamp(180px, 85%, 360px);
  height: auto;
  display: block;
  z-index: 4;
}

.content_main .wind_contents .wind_info .wind_direction .dirImg .needle {
  position: absolute;
  /* v20: SVG �뿀釉�(cx=180, cy=180) 以묒떖怨� �젙�솗�엳 �씪移� �� top/left 50% + margin �젣嫄� */
  top: 50%;
  left: 50%;
  margin-top: 0;
  width: clamp(90px, 43%, 200px);
  transform: translate(-50%, -50%) rotate(0deg);
  transform-origin: 50% 50%;
  z-index: 5;
  pointer-events: none;
}

.content_main .wind_contents .wind_info .wind_direction .dir_txt {
  height:30%;
  width: 100%;
  margin-top: 40px;
  text-align: center;
  color: var(--color-text);
  font-size: clamp(1rem, 1.1vw + 0.55rem, 1.7rem);
  line-height: 1.5;
  padding: 8px 10px 14px;
  letter-spacing: 0.3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
.content_main .wind_contents .wind_info .wind_direction .dir_txt .dir_span {
	font-size: clamp(2rem, 2.4vw + 0.4rem, 3.5rem);
	color: var(--color-accent);
	font-weight:bold;
}
 
/* v35: DIR/GUST 媛� 媛뺤“ �깋�긽 */
.content_main .wind_contents .wind_info .wind_direction .dir_txt .dir-value {
  color: var(--color-accent);
  font-weight: 600;
}
.content_main .wind_contents .wind_info .wind_direction .dir_txt .dir-label {
  color: rgba(200, 220, 240, 0.8);
  font-size: 0.88em;
}

/* �뭾�냽 寃뚯씠吏� 移대뱶 */
.content_main .wind_contents .wind_info .wind_speed {
  background: var(--bg-card);
  width: 50%;
  border: var(--border-white);
  border-radius: var(--border-radius);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 10px 8px;
  min-width: 0;
  --ws-cx: 50%;
  --ws-cy: 55%;
  /* v35: 移대뱶 洹몃┝�옄 */
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--transition-fast);
}

.content_main .wind_contents .wind_info .wind_speed:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* �뭾�냽 寃뚯씠吏� �씠誘몄� �옒�띁 */
.wind_gauge {
  position: relative;
  /* v20: �겕湲� 理쒕��솕 */
  width: min(420px, 95%);
  margin: 0 auto;
  flex-shrink: 0;
}

.wind_gauge .warn_img {
  width: 100%;
  display: block;
  margin: 0;
}

/* �뭾�냽 諛붾뒛 */
.wind_gauge .wind_needle {
  position: absolute;
  left: var(--ws-cx);
  top: var(--ws-cy);
  width: 44%;
  max-width: 190px;
  min-width: 90px;
  height: 5px;
  background: #E53935;
  border-radius: 999px;
  transform-origin: 0% 50%;
  transform: translate3d(0, -50%, 0) rotate(-225deg);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* �뭾�냽 諛붾뒛 �뿀釉� */
.wind_gauge .wind_hub {
  position: absolute;
  left: var(--ws-cx);
  top: var(--ws-cy);
  width: 16px;
  height: 16px;
  background: #C9B79E;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* �뭾�냽 �닔移� �쁺�뿭 */
.wind_readouts {
  height:30%;

  /* v20: flex-shrink 0�쑝濡� 怨좎젙, 以묒븰 諛곗튂 */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px 14px;
  width: 100%;
}

.content_main .wind_contents .wind_info .wind_speed .current_speed {
  text-align: center;
  color: var(--color-text);
  /* v19: �떒�쐞 m/s �룿�듃 �겕湲� �긽�뼢�븯�뿬 �닔移섏� 洹좏삎 */
  font-size: clamp(1.1rem, 1.2vw + 0.6rem, 1.9rem);
  line-height: 1.2;
  /* v19: �닔吏� 以묒븰 �젙�젹 */
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.content_main .wind_contents .wind_info .wind_speed .current_speed span {
  color: var(--color-accent);
  /* v18: �룿�듃 �겕湲� �긽�뼢 */
  font-size: clamp(2rem, 2.4vw + 0.9rem, 3.8rem);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.content_main .wind_contents .wind_info .wind_speed .max_info {
  text-align: center;
  color: var(--color-text);
  font-size: clamp(0.85rem, 0.9vw + 0.45rem, 1.5rem);
  line-height: 1.7;
  opacity: 0.95;
  padding-top: 8px;
  width: 100%;
}

/* v35: MAX 媛� 媛뺤“ */
.content_main .wind_contents .wind_info .wind_speed .max_info .max-value {
  color: var(--color-accent);
  font-weight: 600;
}
.content_main .wind_contents .wind_info .wind_speed .max_info .gust-value {
  color: rgba(200, 220, 240, 0.9);
}

/* --------------------------------------------------------------------------
   �슦痢� �쁺�뿭: �떎�떆媛� �뾽�뜲�씠�듃 + �듅蹂� + 吏��닔
   -------------------------------------------------------------------------- */

/* �듅蹂� 移대뱶 */
.content_main .etc .advisory {
  background: var(--bg-card);
  width: 100%;
  margin-top: 12px;
  flex: 0 0 auto;
  min-height: clamp(110px, 16vh, 200px);
  border: var(--border-white);
  border-radius: var(--border-radius);
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
  transition: border-color var(--transition-med), box-shadow var(--transition-med);
  background: linear-gradient(135deg, rgba(11, 35, 61, 0.95) 0%, rgba(28, 50, 75, 0.9) 100%);
  /* v35: 移대뱶 洹몃┝�옄 */
  box-shadow: var(--card-shadow);
}

.content_main .etc .advisory.red    { box-shadow: 0 4px 16px rgba(163, 49, 49, 0.4); }
.content_main .etc .advisory.yellow { box-shadow: 0 4px 16px rgba(201, 169, 0, 0.35); }

.content_main .etc .advisory.red    { border-color: var(--color-border-red); }
.content_main .etc .advisory.green  { border-color: var(--color-border-green); }
.content_main .etc .advisory.yellow { border-color: var(--color-border-yellow); }

/* �듅蹂� �씠誘몄� �쁺�뿭 */
.content_main .etc .advisory .advisory_img {
  background: transparent;
  width: 38%;
  /* v19: 援щ텇�꽑 �깋�긽 媛쒖꽑 */
  border-right: 2px solid rgba(200, 220, 240, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color var(--transition-med);
}

.content_main .etc .advisory.red    .advisory_img { border-right-color: rgba(220, 68, 65, 0.5); }
.content_main .etc .advisory.yellow .advisory_img { border-right-color: rgba(201, 169, 0, 0.5); }

.content_main .etc .advisory .advisory_img.red    { border-right-color: var(--color-border-red); }
.content_main .etc .advisory .advisory_img.green  { border-right-color: var(--color-border-green); }
.content_main .etc .advisory .advisory_img.yellow { border-right-color: var(--color-border-yellow); }

.content_main .etc .advisory .advisory_img .alarm {
  /* v20: �븘�씠肄� �겕湲� �솗�� */
  width: 88%;
  max-width: 180px;
  height: auto;
  object-fit: contain;
}

/* �듅蹂� �뀓�뒪�듃 �쁺�뿭 */
.content_main .etc .advisory .advisory_contents {
  background: transparent;
  /* v18: �븘�씠肄� �쁺�뿭 38% ���쓳�븯�뿬 62%濡� �솗�� */
  width: 62%;
  display: flex;
  flex-direction: column;
}

.content_main .etc .advisory .advisory_contents .advisory_title {
  background: linear-gradient(to top, #BDBDBD, #E0E0E0);
  width: 100%;
  padding: clamp(8px, 1.2vh, 14px) 10px;
  /* v18: �룿�듃 �겕湲� �긽�뼢 */
  font-size: clamp(0.9rem, 1.1vw + 0.45rem, 1.6rem);
  text-align: center;
  color: #1a1a1a;
  font-weight: 700;
  flex-shrink: 0;
  transition: background var(--transition-med);
  /* v18: �옄媛� �젅�꽣 �뒪�럹�씠�떛 */
  letter-spacing: 0.5px;
}

.content_main .etc .advisory .advisory_contents .advisory_title.red    { background: linear-gradient(to top, #b2110e, #dc4441); color: white; }
.content_main .etc .advisory .advisory_contents .advisory_title.green  { background: linear-gradient(to top, #177A2F, #3EBE66); color: white; }
.content_main .etc .advisory .advisory_contents .advisory_title.yellow { background: linear-gradient(to top, #9e8200, #c9a900); color: #ffffff; }

.content_main .etc .advisory .advisory_contents .advisory_txt {
  flex: 1;
  width: 100%;
  text-align: center;
  /* v18: �룿�듃 �겕湲� �긽�뼢 */
  font-size: clamp(0.85rem, 1.05vw + 0.42rem, 1.55rem);
  padding: clamp(8px, 1.5vh, 20px) 10px;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  word-break: keep-all;
  /* v18: �옄媛� �젅�꽣 �뒪�럹�씠�떛 */
  letter-spacing: 0.2px;
}

/* --------------------------------------------------------------------------
   �꽑諛� �슫�빆 吏��닔 / 諛곕�誘� 吏��닔
   -------------------------------------------------------------------------- */
.content_main .etc .ship_index {
  width: 100%;
  /* v18: �긽�떒 �뿬諛� 利앷� */
  margin-top: 12px;
  flex: 1;
  display: flex;
  justify-content: center;
  flex-direction: row;
  gap: var(--gap);
  min-height: auto;
}

.content_main .etc .ship_index .operation,
.content_main .etc .ship_index .seasick {
  background: var(--bg-card);
  width: 50%;
  border: var(--border-white);
  border-radius: var(--border-radius);
  font-size: clamp(0.8rem, 0.95vw + 0.38rem, 1.5rem);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 20px;
  min-width: 0;
  overflow: hidden;
  /* v35: 移대뱶 洹몃┝�옄 */
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--transition-fast);
}

.content_main .etc .ship_index .operation:hover,
.content_main .etc .ship_index .seasick:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

/* 移대뱶 �젣紐� */
.content_main .etc .ship_index .operation > span,
.content_main .etc .ship_index .seasick > span,
.content_main .etc .ship_index .operation > :first-child,
.content_main .etc .ship_index .seasick > :first-child {
  padding-top: clamp(6px, 1vh, 12px);
}

/* 踰붾� �긽�떒 */
.content_main .etc .ship_index .operation .info,
.content_main .etc .ship_index .seasick .info {
  width: 100%;
  display: flex;
  /* v18: �긽�떒 �뿬諛� 利앷� */
  margin-top: 6px;
  justify-content: space-evenly;
  align-items: center;
  padding: 0 8px;
  font-size: clamp(0.65rem, 0.7vw + 0.3rem, 1.1rem);
  flex-shrink: 0;
}

.content_main .etc .ship_index .operation .info > div,
.content_main .etc .ship_index .seasick .info > div {
  display: flex;
  align-items: center;
  gap: 4px;
}

.content_main .etc .ship_index .operation .info > div::before,
.content_main .etc .ship_index .seasick .info > div::before {
  content: '';
  display: inline-block;
  width: clamp(10px, 1.2vw, 18px);
  height: clamp(10px, 1.2vw, 18px);
  border-radius: 2px;
  flex-shrink: 0;
}

.content_main .etc .ship_index .operation .info .green::before,
.content_main .etc .ship_index .seasick .info .green::before  { background-color: var(--color-green); }
.content_main .etc .ship_index .operation .info .yellow::before,
.content_main .etc .ship_index .seasick .info .yellow::before { background-color: var(--color-yellow); }
.content_main .etc .ship_index .operation .info .red::before,
.content_main .etc .ship_index .seasick .info .red::before    { background-color: var(--color-red); }

/* --------------------------------------------------------------------------
   寃뚯씠吏� �삤踰꾨젅�씠 (�슫�빆/諛곕�誘�) �� 以묐났 �젣嫄� �썑 �떒�씪 �젙�쓽
   -------------------------------------------------------------------------- */
.gauge {
  position: relative;
  width: 100%;
  /* 媛쒖꽑: 寃뚯씠吏� SVG viewBox(320횞170) 鍮꾩쑉 怨좎젙 �넂 �씛 �썝�씠 �빆�긽 �썝�삎 �쑀吏� */
  aspect-ratio: 320 / 170;
  flex-shrink: 0;
  min-height: 0;
  /* �뿀釉� �쐞移�: 寃뚯씠吏� �샇 以묒떖 (160/320=50%, 150/170�뎵88.24%) */
  --hub-x: 50%;
  --hub-y: 88.24%;
}

.gauge svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* SVG 諛붾뒛 �젅�씠�뼱 */
.gauge .needle_svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  /* 媛쒖꽑: transform-box + transform-origin�쑝濡� �뿀釉� 湲곗� �쉶�쟾 */
  transform-box: fill-box;
  overflow: visible;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 媛쒖꽑: 諛붾뒛 SVG �궡遺� g �슂�냼�뿉 transform-origin �쟻�슜 */
.gauge .needle_svg .needle-group {
  transform-origin: 160px 150px;
  transform: rotate(var(--rot, -90deg));
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gauge .needle_svg line {
  /* v18: 諛붾뒛 �깋�긽 �뿰�쉶�깋 �넂 �씛�깋+�쉶�깋 議고빀�쑝濡� 媛��떆�꽦 �뼢�긽 */
  stroke: #d0d4dc;
  stroke-width: 7;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}

.gauge .needle_svg circle {
  fill: #f2f4f7;
  stroke: #c9ced6;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.gauge-oper { --hub-y: 88.24%; }
.gauge-sea  { --hub-y: 88.24%; }

/* 踰붾� �븯�떒 */
.content_main .etc .ship_index .operation .info2,
.content_main .etc .ship_index .seasick .info2 {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* v18: �긽�븯 �뙣�뵫 異붽��븯�뿬 紐⑥꽌由ъ뿉 �떎�씪類숈� �븡寃� */
  padding: 4px 14px 8px;
  font-size: clamp(0.65rem, 0.7vw + 0.3rem, 1.1rem);
  flex-shrink: 0;
}

.content_main .etc .ship_index .operation .info2 .green,
.content_main .etc .ship_index .seasick .info2 .green { color: var(--color-green); font-weight: 700; }
.content_main .etc .ship_index .operation .info2 .red,
.content_main .etc .ship_index .seasick .info2 .red   { color: var(--color-red); font-weight: 700; }

/* 異쒖쿂 �씠誘몄� */
.content_main .etc .ship_index .operation .sources,
.content_main .etc .ship_index .seasick .sources {
  position: absolute;
  right: 6px;
  bottom: 6px;
  height: clamp(14px, 1.5vw, 22px);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  padding: 1px 2px;
}

/* --------------------------------------------------------------------------
   怨듭� / �빐�긽�듅蹂� �븣由� 諛뺤뒪
   �� �궡�슜�씠 諛뺤뒪 �넂�씠瑜� 珥덇낵�븷 �븣留� JS媛� �옄�룞 �쉶�쟾 �븷�땲硫붿씠�뀡 �쟻�슜
   �� 珥덇낵�븯吏� �븡�쑝硫� 紐⑤뱺 �빆紐� �젙�쟻 �몴�떆
   -------------------------------------------------------------------------- */
.notice {
  padding-left:30px;
  margin: 14px 4px 8px;
  /* v37: 諛곌꼍 �깋�긽 媛쒖꽑 �� �뜑 �꽑紐낇븯寃� */
  background: linear-gradient(135deg, rgba(10, 25, 50, 0.97) 0%, rgba(18, 40, 72, 0.95) 100%);
  border: 1px solid rgba(91, 168, 200, 0.4);
  border-left: 4px solid var(--color-time-accent);
  border-radius: 8px;
  /* v37: �룿�듃 �겕湲� �빟媛� �솗�� */
  font-size: clamp(0.88rem, 1.0vw + 0.5rem, 1.3rem);
  color: rgba(220, 235, 255, 0.95);
  letter-spacing: 0.2px;
  flex-shrink: 0;
  overflow: hidden;
  height: clamp(60px, 9vh, 110px);
  order: 3;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: var(--card-shadow);
}

/* v34: belt �� track + clone�쓣 媛먯떥�뒗 �븷�땲硫붿씠�뀡 而⑦뀒�씠�꼫 */
.notice-belt {
  display: flex;                 /* track + clone 媛�濡� �굹�뿴 */
  align-items: center;
  flex-shrink: 0;
  will-change: transform;        /* GPU 媛��냽 */
}

/* �븣由� 諛뺤뒪 而댄뀒�씠�꼫 �뒪���씪�� �쐞 .notice 釉붾줉�뿉 �넻�빀�맖 (v37) */

/* 媛�濡� 留덊궎 �듃�옓: �빆紐⑸뱾�쓣 �븳 以꾨줈 �뒛�뼱�넃�쓬 */
.notice-track {
  display: inline-flex;          /* �빆紐⑸뱾�쓣 媛�濡쒕줈 �굹�뿴 */
  align-items: center;
  white-space: nowrap;           /* 以� 諛붽옘 湲덉� */
  padding: 0 60px 0 0;           /* �걹�뿉 �뿬諛�: �겢濡좉낵 �옄�뿰�뒪�읇寃� �뿰寃� */
  flex-shrink: 0;
  gap: 0;
}

/* �빆紐�: inline �슂�냼濡� 媛�濡� �굹�뿴 */
.notice-item {
  display: inline-flex;
  align-items: center;
  padding: 0 20px 0 0;           /* �빆紐� �삤瑜몄そ �뿬諛� */
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

/* �빆紐� �궗�씠 援щ텇�젏 (�뿈) */
.notice-sep {
  display: inline-block;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.6em;
  padding: 0 20px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* �깭洹� (�듅蹂� �쑀�삎 �젅�씠釉�) */
.notice-item > span {
  font-weight: 700;
  display: inline-block;
  border-radius: 4px;
  padding: 2px 10px;
  margin-right: 10px;
  font-size: 0.88em;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--color-accent);
  /* v37: �뜑 �꽑紐낇븳 諛곌꼍 �깋�긽 */
  background: rgba(235, 210, 40, 0.22);
  border: 1px solid rgba(235, 210, 40, 0.55);
  flex-shrink: 0;
  letter-spacing: 0.3px;
}

/* 二쇱쓽蹂� �깭洹� �� �끂���깋 */
.notice-item > span.tag-warn {
  color: var(--color-accent);
  background: rgba(235, 210, 40, 0.15);
  border: 1px solid rgba(235, 210, 40, 0.5);
}

/* 寃쎈낫 �깭洹� �� 鍮④컙�깋 */
.notice-item > span.tag-alert {
  color: var(--color-red);
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.5);
}

/* �듅蹂댁뾾�쓬 �깭洹� �� �쉶�깋 */
.notice-item > span.tag-none {
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 400;
}

/* --------------------------------------------------------------------------
   濡쒕뵫 �삤踰꾨젅�씠 (媛쒖꽑: �떊洹� 異붽�)
   -------------------------------------------------------------------------- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 35, 61, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.loading-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 5px solid rgba(255, 255, 255, 0.2);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   �뜲�씠�꽣 媛깆떊 以� �몴�떆 (媛쒖꽑: �떊洹� 異붽�)
   -------------------------------------------------------------------------- */
.refreshing .wind_update::after,
.refreshing .update_time::after {
  /* v38: �듅�닔臾몄옄 吏곸젒 �궫�엯 ���떊 CSS �쑀�땲肄붾뱶 �씠�뒪耳��씠�봽 �궗�슜 (源⑥쭊 湲��옄 諛⑹�) */
  content: ' \21BB';
  animation: blink 1s step-end infinite;
  display: inline-block;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* --------------------------------------------------------------------------
   濡쒓퀬 �닲源� (JS �젣�뼱)
   -------------------------------------------------------------------------- */
.logo-hidden .logo { display: none !important; }

/* ==========================================================================
   諛섏쓳�삎 釉뚮젅�씠�겕�룷�씤�듃
   ========================================================================== */

/* ���� 1440px �씠�븯: �겙 �끂�듃遺� ���� */
@media (max-width: 1440px) {
  :root { --header-h: 150px; }
}

/* ���� 1200px �씠�븯: �씪諛� �끂�듃遺� ���� */
@media (max-width: 1200px) {
  :root { --header-h: 130px; }

  .mascot .img_mascot {
    height: clamp(110px, 12vh, 160px);
    left: 8px;
  }
  .content { width: 96%; max-width: 1400px; }
  .content_main { margin-top: 14px; }
  .content_main .wind_contents { width: 60%; }
  .content_main .etc { width: 40%; }
}

/* ���� 1024px �씠�븯: �깭釉붾┸ 媛�濡� / �냼�삎 �끂�듃遺� ���� */
@media (max-width: 1024px) {
  :root { --header-h: auto; }
  /* body overflow-y: auto�뒗 �쟾�뿭�뿉�꽌 �씠誘� �꽕�젙�맖 */

  .header-bar {
    height: auto;
    padding: 12px 16px;
  }

  .mascot { display: none; }

  .content {
    flex: none;
    height: auto;
    width: 96%;
    margin: 12px auto 0;
  }

  /* 硫붾돱: 1024px�뿉�꽌�뒗 苑� 梨꾩� �쑀吏� */
  .content_menu {
    justify-content: flex-start;
  }

  .content_menu .menu {
    flex: 1 1 0;
    min-width: 0;
    /* v18: �꽣移� ��寃� 44px �쑀吏� */
    padding: 10px 12px;
    min-height: 44px;
  }

  /* 硫붿씤 �젅�씠�븘�썐: �꽭濡� �뒪�깮 */
  .content_main {
    flex-direction: column;
    flex: none;
    height: auto;
    margin-top: 14px;
    gap: 0;
  }

  .content_main .wind_contents,
  .content_main .etc {
    width: 100%;
  }

  /* 1024px: �닔�떊�떆媛� + �뾽�뜲�씠�듃 諛뺤뒪 �굹���엳 諛곗튂 */
  .time-row {
    display: flex;
    margin-top: 12px;
  }
  /* �꽭濡� �뒪�깮 �떆 媛쒕퀎 諛뺤뒪 �닲源� (�옒�띁濡� ��泥�) */
  .content_main .wind_contents > .wind_update,
  .content_main .etc > .update_time {
    display: none;
  }
  /* time-row �엳�쓣 �븣 content_main �긽�떒 �뿬諛� 議곗젙 */
  .content_main {
    margin-top: 10px;
  }

  .content_main .wind_contents .wind_info {
    flex-direction: row;
    height: auto;
    flex: none;
  }

  .content_main .wind_contents .wind_info .wind_direction,
  .content_main .wind_contents .wind_info .wind_speed {
    width: 50%;
    height: auto;
    /* v36: 1024px�뿉�꽌 移대뱶 �넂�씠 理쒖냼媛� 利앷� */
    min-height: 260px;
  }

  /* v20: 1024px�뿉�꽌 �굹移⑤컲 SVG �겕湲� �솗�� */
  .content_main .wind_contents .wind_info .wind_direction .dirImg svg {
    width: min(260px, 78%);
  }

  .content_main .etc {
    margin-top: 14px;
  }

  .content_main .etc .advisory {
    min-height: 150px;
  }

  .content_main .etc .ship_index {
    flex: none;
    height: auto;
  }

  .content_main .etc .ship_index .operation,
  .content_main .etc .ship_index .seasick {
    min-height: 180px;
  }

  .notice { margin-top: 12px; }
}

/* ���� 768px �씠�븯: �깭釉붾┸ �꽭濡� / ���삎 �뒪留덊듃�룿 ���� */
@media (max-width: 768px) {
  /* 768px �씠�븯�뿉�꽌�룄 time-row �쑀吏� */
  .time-row {
    display: flex;
    margin-top: 10px;
  }
  .content_main .wind_contents > .wind_update,
  .content_main .etc > .update_time {
    display: none;
  }


  .header-bar {
    position: relative;
    flex-direction: column;
    height: auto;
    padding: 10px 14px;
    gap: 4px;
  }

  .mascot { display: none; }

  .logo {
    position: absolute;
    right: 10px;
    top: 8px;
    margin: 0;
  }

  .logo img { height: 42px; }

  .title {
    font-size: clamp(1.1rem, 3.5vw, 1.6rem);
    line-height: 1.25;
    padding: 4px 52px 4px 0;
    text-align: center;
  }

  .content {
    flex: none;
    height: auto;
    width: 94%;
    margin: 10px auto 0;
  }

  .content_menu {
    justify-content: flex-start;
    border-radius: 6px 6px 0 0;
  }

  .content_menu .menu {
    flex: 0 0 auto;
    min-width: max-content;
    font-size: 0.85rem;
    /* v18: 紐⑤컮�씪 �꽣移� ��寃� 44px �쑀吏� */
    padding: 10px 10px;
    min-height: 44px;
  }

  .content_main {
    flex-direction: column;
    flex: none;
    height: auto;
    margin-top: 12px;
    gap: 0;
  }

  .content_main .wind_contents,
  .content_main .etc {
    width: 100%;
  }

  /* 紐⑤컮�씪: �뭾�뼢/�뭾�냽 �꽭濡� �뒪�깮 */
  .content_main .wind_contents .wind_info {
    flex-direction: column;
    height: auto;
    flex: none;
  }

  .content_main .wind_contents .wind_info .wind_direction,
  .content_main .wind_contents .wind_info .wind_speed {
    width: 100%;
    margin: 0 0 10px 0;
    /* v20: min-height 利앷��븯�뿬 GUST �뀓�뒪�듃 �옒由� 諛⑹� */
    min-height: 320px;
    max-height: 520px;
  }

  .content_main .wind_contents .wind_info .wind_direction .dirImg svg {
    /* v20: �겕湲� �솗�� 諛� margin �젣嫄� */
    width: min(300px, 82%);
    margin-top: 0;
  }

  .content_main .etc {
    margin-top: 10px;
  }

  .content_main .etc .advisory {
    min-height: 130px;
  }

  .content_main .etc .advisory .advisory_img .alarm {
    max-width: min(130px, 28vw);
  }

  /* v37: 紐⑤컮�씪 吏��닔 移대뱶 �� 媛�濡� 諛곗튂 �쑀吏� (�꽭濡� �뒪�깮 �젣嫄�) */
  .content_main .etc .ship_index {
    flex-direction: row;
    flex: none;
    height: auto;
    gap: 8px;
  }

  .content_main .etc .ship_index .operation,
  .content_main .etc .ship_index .seasick {
    width: 50%;
    margin: 0;
    /* v37: 媛�濡� 諛곗튂 �떆 �쟻�젅�븳 �넂�씠 */
    min-height: 220px;
    max-height: 320px;
  }

  .notice {
    margin-top: 10px;
    /* v36: 紐⑤컮�씪 �븣由쇰컯�뒪 �넂�씠 媛쒖꽑 */
    height: clamp(52px, 7vh, 90px);
    font-size: clamp(0.75rem, 2.5vw, 1rem);
  }
}

/* ���� 480px �씠�븯: �씪諛� �뒪留덊듃�룿 ���� */
@media (max-width: 480px) {
  .header-bar { padding: 8px 10px; }

  /* v36: time-row �룿�듃 異뺤냼 諛� �뀓�뒪�듃 �옒由� 諛⑹� */
  .time-row .wind_update,
  .time-row .update_time {
    font-size: clamp(0.65rem, 2.2vw, 0.85rem);
    padding: 6px 8px;
    white-space: normal;
    word-break: keep-all;
    overflow: visible;
    text-overflow: unset;
  }

  .title {
    font-size: clamp(1rem, 4vw, 1.3rem);
    padding-right: 48px;
  }

  .logo img { height: 36px; }

  .content_menu .menu {
    flex: 0 0 auto;
    min-width: max-content;
    font-size: 0.8rem;
    /* v18: 紐⑤컮�씪 �꽣移� ��寃� 44px �쑀吏� */
    padding: 10px 8px;
    min-height: 44px;
  }

  .content_main .wind_contents .wind_info .wind_direction,
  .content_main .wind_contents .wind_info .wind_speed {
    /* v36: �뭾�냽 寃뚯씠吏� 移대뱶 理쒖냼 �넂�씠 利앷� �� 寃뚯씠吏� SVG �옒由� 諛⑹� */
    min-height: 280px;
  }

  /* v37: 480px�뿉�꽌�룄 吏��닔 移대뱶 媛�濡� 諛곗튂 �쑀吏� */
  .content_main .etc .ship_index {
    flex-direction: row;
    gap: 6px;
  }

  .content_main .etc .ship_index .operation,
  .content_main .etc .ship_index .seasick {
    width: 50%;
    min-height: 180px;
    max-height: 260px;
    padding: 8px 0 14px;
    font-size: clamp(0.7rem, 2.5vw, 0.9rem);
  }

  .wind_readouts { gap: 2px; padding: 6px 8px 10px; }

  .notice {
    font-size: 0.8rem;
    height: clamp(52px, 7.5vh, 90px);
  }

  /* v33: 紐⑤컮�씪 媛�濡� 留덊궎 �깭洹�/�빆紐� �룿�듃 �겕湲� */
  .notice-item > span {
    font-size: 0.78rem;
    padding: 2px 6px;
    margin-right: 6px;
  }

  .notice-item {
    font-size: 0.78rem;
    padding: 0 14px 0 0;
  }

  .notice-sep {
    padding: 0 12px;
  }
}

/* ���� 375px �씠�븯: �냼�삎 �뒪留덊듃�룿 (iPhone SE �벑) ���� */
@media (max-width: 375px) {
  /* v37: �떎�떆媛� �뾽�뜲�씠�듃 �떆媛� 1以� 泥섎━ */
  .time-row .wind_update,
  .time-row .update_time {
    font-size: clamp(0.6rem, 2.0vw, 0.75rem);
    padding: 5px 7px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ���� 360px �씠�븯: 珥덉냼�삎 �뒪留덊듃�룿 ���� */
@media (max-width: 360px) {
  .logo { display: none; }
  .title { padding-right: 0; font-size: 1rem; }

  .content_menu .menu {
    flex: 0 0 auto;
    min-width: max-content;
    font-size: 0.75rem;
    padding: 7px 6px;
  }

  .content_main .wind_contents .wind_info .wind_direction,
  .content_main .wind_contents .wind_info .wind_speed {
    /* v36: 珥덉냼�삎 紐⑤컮�씪 移대뱶 �넂�씠 利앷� */
    min-height: 240px;
  }

  /* v36: 珥덉냼�삎 �솕硫� �닔�떊�떆媛� �뀓�뒪�듃 理쒖쟻�솕 */
  .time-row .wind_update,
  .time-row .update_time {
    font-size: 0.6rem;
    padding: 5px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ==========================================================================
   媛�濡� 留덊궎 �븷�땲留ㅼ씠�뀡 (v34 �씠�긽)
   ========================================================================== */
@keyframes notice-marquee-h {
  0%   { transform: translateX(0); }
  100% { transform: translateX(var(--marquee-dist, -50%)); }
}





/* 260304 */
.nodata_oper{
 display : none;
}
.nodata_sick{
 display : none;
}