* { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --gap: clamp(6px, 1.8vw, 10px);
  --btn-pad-y: clamp(7px, 1.9vw, 10px);
  --btn-pad-x: clamp(10px, 2.8vw, 18px);
  --btn-font: clamp(12px, 2.8vw, 14px);
  --radius: 999px;
  --stroke: 2px;
  --btn-h: 42px;

  --garmin: #76B6FF;
  --strava: #FC4C02;
  --nrc: #5CE45C;
  --manual: #9B7CFF;

  --pv-value-ls: 0px;
  --pv-label-ls: 0px;

  /* UI CONFIG 변수 (초기값) */
  --ui-col-gap: 24px;
  --ui-stack-gap: 18px;
  --ui-label-to-value-gap: 2px;
  --ui-label-size: 12px;
  --ui-value-size: 34px;
  --ui-distance-value-size: 34px;
  --ui-month-size: 14px;
  --ui-month-to-distance-gap: 8px;
  --ui-month-distance-size: 36px;
  --ui-distance-to-stats-gap: 14px;
  --ui-distance-to-row-gap: 14px;
  --ui-m-label-size: 10px;
  --ui-m-value-size: 24px;
}

/* 닫기 버튼 기본 스타일 (검정) */
.close-big,
.result-screen .screen-close,
.month-picker .screen-close {
    position: absolute !important;
    top: 24px !important;
    right: 24px !important;
    color: #000 !important;
    z-index: 99999 !important;
    background: transparent !important;
    border: none !important;
    font-size: 40px !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 결과 화면이 Black 배경일 때 닫기 버튼 White로 반전 */
.result-screen.bg-black .screen-close {
    color: #fff !important;
}

body{
  background:#fff;
  font-family: 'Inter', sans-serif;
  padding: 20px;
  padding-bottom: 110px;
  min-height: 100vh;
}
body.no-scroll{ overflow: hidden; }

.container{ width: min(360px, 100%); margin: 0 auto; position: relative; }

/* HEADER */
.header { margin-bottom: 22px; }
.title{ font-size: 44px; font-weight: 900; letter-spacing: -0.9px; line-height: 1.0; }
.version{ font-size: 26px; font-weight: 900; }
.author{ margin-top: 6px; font-size: 13px; color:#000; }
.title-link{ display: inline-flex; align-items: baseline; color: inherit; text-decoration: none; cursor: pointer; }
.title-link:hover, .title-link:visited, .title-link:active, .title-link:focus { color: inherit; text-decoration: none; }

/* SECTIONS */
.section{ margin-bottom: 18px; }
.section-label{ display:block; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px; }
.section-label.inline{ margin-bottom: 8px; }

/* BUTTONS & GROUPS */
.button-group{ display:flex; align-items:center; gap: var(--gap); flex-wrap: nowrap; width: 100%; }
.button-group.wide .flex1, .button-group.two .flex1{ flex: 1 1 0; min-width: 0; }
.two-col{ display:flex; gap: 18px; }
.two-col .col{ flex:1 1 0; min-width:0; }

.toggle-btn, .action-btn{
  border: var(--stroke) solid #000;
  border-radius: var(--radius);
  background:#fff;
  color:#000;
  cursor:pointer;
  font-family:'Inter', sans-serif;
  font-weight: 900;
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: var(--btn-font);
  line-height: 1;
  white-space: nowrap;
  min-width: 0;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.toggle-btn:hover, .action-btn:hover{ opacity: .85; }
.toggle-btn.active, .action-btn.active{ background:#000; color:#fff; }

/* Icon Buttons (Align) */
.icon-btn { padding: 0; }
.button-group.two.disabled { opacity: 0.2; pointer-events: none; filter: grayscale(100%); }

/* Rainbow Button */
.btn-rainbow {
    background: linear-gradient(90deg, #FF3B30, #FF9500, #FFCC00, #34C759, #00C7BE, #007AFF, #5856D6, #AF52DE);
    border: 2px solid #000;
    transition: transform 0.1s;
}
.btn-rainbow.active { border: 3px solid #000; transform: scale(0.95); }

/* FONT BUTTONS */
.font-group .font-btn{ flex: 1 1 0; min-width: 0; padding: 7px 8px; text-align:center; height: var(--btn-h); display:flex; align-items:center; justify-content:center; }
.font-anton{ font-family:'Anton', sans-serif; font-size: clamp(14px, 3.4vw, 18px); }
.font-dots{ font-family:'Bitcount Grid Single', monospace; font-size: clamp(13px, 3.2vw, 18px); }
.font-lcd{ font-family:'DS-Digital', monospace; font-size: clamp(15px, 3.6vw, 20px); }
.font-gothic{ font-family:'Special Gothic Expanded One', sans-serif; font-size: clamp(8px, 2.2vw, 10px); letter-spacing: 0.2px; }
.font-speed{ font-family:'Quantico', sans-serif; font-size: clamp(12px, 3.1vw, 15px); }
/* New Fonts Styles */
.font-opera{ font-family:'Opera', sans-serif; font-size: clamp(12px, 3.1vw, 15px); }
.font-marker{ font-family:'Marker', sans-serif; font-size: clamp(12px, 3.1vw, 15px); }
.font-sten{ font-family:'Sten', sans-serif; font-size: clamp(12px, 3.1vw, 15px); }
.font-writer{ font-family:'Writer', sans-serif; font-size: clamp(12px, 3.1vw, 15px); }
.font-flip{ font-family:'Flip', sans-serif; font-size: clamp(12px, 3.1vw, 15px); }


/* DATA PANEL */
.data-panel{ border: 1.5px solid #d9d9d9; border-radius: 18px; padding: 14px; background:#fff; }
.data-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.data-panel-title{ font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.4px; }

.data-tabs{ display:flex; gap: 10px; flex-wrap: nowrap; width:100%; }
.data-tab{ flex: 1 1 0; min-width:0; border: var(--stroke) solid #000; border-radius: 999px; height: var(--btn-h); padding: 0 10px; display:flex; align-items:center; justify-content:center; background:#fff; color:#000; font-weight: 900; font-size: 13px; white-space: nowrap; cursor:pointer; }
.data-tab.active{ color:#000; }
.data-tab.garmin.active{ background: var(--garmin); }
.data-tab.strava.active{ background: var(--strava); }
.data-tab.nrc.active{ background: var(--nrc); }
.data-tab.manual.active{ background: var(--manual); }

.data-tab.manual-hidden { display: none !important; }
.data-tab.manual-show { display: flex !important; }

.data-content{ display:none; margin-top: 12px; }

/* DATA CARDS & ITEMS */
.garmin-card, .workout-item{ width: 100%; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; border: 2px solid #000; border-radius: 14px; padding: 10px 12px; background:#fff; cursor:pointer; margin-bottom: 10px; }
.garmin-card-left, .w-left{ display:flex; flex-direction:column; gap: 6px; }
.garmin-stats, .w-stats{ display:flex; gap: 14px; align-items: baseline; }
.garmin-stat, .w-stats span{ font-size: 14px; font-weight: 900; }
.garmin-date, .w-date{ font-size: 12px; font-weight: 900; }
.upload-btn{ width:100%; border:none; border-radius: 999px; background:#000; color: var(--nrc); font-weight: 900; height: var(--btn-h); padding: 0 14px; display:flex; align-items:center; justify-content:center; cursor:pointer; margin-top:10px; }
.sub-title{ font-size: 12px; font-weight: 900; margin: 0 0 10px 0; }
.ocr-status{ margin-top: 8px; font-size: 11px; color:#333; display:none; }
.ocr-status.show{ display:block; }

/* LOGIN BUTTON WRAPS */
#garminConnectBtnWrap, #stravaConnectBtnWrap {
    width: 100%;
    padding: 20px 0 !important;
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 24px !important;
    text-align: center !important;
}
#garminConnectBtnWrap > *, #stravaConnectBtnWrap > * { margin: 0 auto !important; }

#garminConnectBtnWrap[style*="none"],
#stravaConnectBtnWrap[style*="none"] {
    display: none !important;
}

/* MONTH PICKER */
.month-block{ margin-top: 12px; display:flex; flex-direction:column; align-items: center; justify-content: center; margin-bottom: 24px; }
.month-label{ font-size: 12px; font-weight: 700; opacity: 0.6; margin-bottom: 8px; }
.month-btn{ width:100%; border: 2px solid #000; border-radius: 30px; height: 42px; display:flex; align-items:center; justify-content:center; background:#fff; color:#000; font-weight: 900; cursor:pointer; font-size:16px; }

/* PREVIEW CONTAINER */
.preview{ border: 2px solid #000; border-radius: 18px; padding: 18px 18px 16px 18px; width: min(240px, 100%); background:#fff; overflow: hidden; transition: color 0.1s; }

/* [수정] 컬러피커 적용을 위해 color 속성의 !important 제거 */
.preview.bg-white, .result-screen.bg-white { background:#fff !important; color:#000; }
.preview.bg-black, .result-screen.bg-black { background:#000 !important; color:#fff; }

.preview.type2 { width: 100% !important; max-width: 100% !important; }

.result-label, .data-label{ font-family: inherit; font-size: var(--ui-label-size); line-height: 1; opacity: 1; margin-bottom: var(--ui-label-to-value-gap); display:block; }
.result-value, .data-value{ font-family: inherit; font-size: var(--ui-value-size); line-height: 1; font-weight: 900; display:flex; align-items:flex-end; }
.result-value > span, .data-value > span { display:inline-block; transform-origin: left bottom; }

/* =========================================
   [통합 패치] PREVIEW & RESULT ALIGNMENT
   ========================================= */

/* --- Type 1 (Stack) --- */
.preview.type1 .preview-content, 
.result-wrap.type1 .result-block { 
    display: flex; flex-direction: column; gap: var(--ui-stack-gap); 
}

/* T1 Left Align */
.preview.align-left.type1 .result-item, 
.result-wrap.align-left.type1 .result-item { 
    align-items: flex-start; text-align: left; 
}
.preview.align-left.type1 .result-value, 
.result-wrap.align-left.type1 .result-value {
    justify-content: flex-start; 
}

/* T1 Center Align */
.preview.align-center.type1 .preview-content, 
.result-wrap.align-center.type1 .result-block { 
    align-items: center !important; 
    text-align: center !important;
}
.preview.align-center.type1 .result-item, 
.result-wrap.align-center.type1 .result-item { 
    align-items: center !important; 
    text-align: center !important; 
    width: 100% !important;
}
.preview.align-center.type1 .result-value, 
.result-wrap.align-center.type1 .result-value {
    justify-content: center !important; 
    width: 100% !important;
}
.preview.align-center.type1 .result-value > span, 
.result-wrap.align-center.type1 .result-value > span {
    transform-origin: center bottom !important; 
}

/* --- Type 2 (Row) --- */
.preview.type2 .preview-content, 
.result-wrap.type2 .result-block { 
    display: flex; flex-direction: row; gap: var(--ui-col-gap); 
}
.preview.type2 .result-item, 
.result-wrap.type2 .result-item { 
    display: flex; flex-direction: column; gap: 0; flex: 0 0 auto; 
}

/* T2 Left Align */
.preview.align-left.type2 .preview-content, 
.result-wrap.align-left.type2 .result-block { 
    justify-content: flex-start; 
}
.preview.align-left.type2 .result-item,
.result-wrap.align-left.type2 .result-item { 
    align-items: flex-start; text-align: left; 
}

/* T2 Center Align */
.preview.align-center.type2 .preview-content,
.result-wrap.align-center.type2 .result-block { 
    justify-content: center; 
}
.preview.align-center.type2 .result-item,
.result-wrap.align-center.type2 .result-item { 
    align-items: center; text-align: center; 
}
.preview.align-center.type2 .result-value > span,
.result-wrap.align-center.type2 .result-value > span {
    transform-origin: center bottom !important; 
}


/* --- Monthly Layouts --- */
.monthly-type1, .monthly-type2 { display: flex; flex-direction: column; width: 100%; align-items: flex-start; }
.m1-month, .m2-month-line { font-size: var(--ui-month-size); margin-bottom: var(--ui-month-to-dist-gap); font-weight: 700; }
.m1-distance .m1-distance-value, .m2-distance .m2-distance-value { font-size: var(--ui-distance-size); font-weight: 900; line-height: 0.9; }

.m1-stack { display: flex; flex-direction: column; gap: var(--ui-stack-gap); width: 100%; align-items: flex-start; }

/* [M1 중요] Monthly M1: 시각적 상단 정렬 (프리뷰/결과 동일 적용) */
.monthly-type1 .m1-item, 
.result-wrap.type1 .m1-item {
    display: flex !important; 
    align-items: flex-start !important; 
    justify-content: flex-start !important; 
    gap: 0 !important;
}
.monthly-type1 .m1-item .m-label, 
.result-wrap.type1 .m1-item .result-label {
    width: 60px !important; 
    min-width: 60px !important; 
    margin-right: var(--ui-label-to-value-gap) !important; 
    text-align: left !important; 
    display: block !important; 
    padding-top: 0px !important; 
    line-height: 1 !important;
    margin-bottom: 0 !important;
}
.monthly-type1 .m1-item .m-value, 
.result-wrap.type1 .m1-item .result-value {
    line-height: 0.8 !important; 
    align-items: flex-start !important;
}

/* [M1 싱크] Monthly 결과화면 불필요한 Gap 제거 */
.result-wrap.type1.monthly .result-block {
    gap: 0 !important;
}

/* [M2] M2 Layout */
.m2-row { display: flex; flex-direction: row; gap: var(--ui-col-gap); width: 100%; justify-content: flex-start; }

/* [M2 싱크] Monthly M2 여백/구조 동기화 */
.result-wrap.type2.monthly .result-block { 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    gap: 0 !important; 
}
.result-wrap.type2.monthly .m2-row { 
    display: flex !important; 
    flex-direction: row !important; 
    width: 100% !important; 
    margin-top: 0 !important; 
    gap: 24px !important; 
}

/* RUN Button */
.run-btn{ position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 5000; cursor: pointer; background: #ff9000; color: #000; width: min(360px, calc(100% - 40px)); padding: 16px; border:none; border-radius: 999px; font-size: 24px; font-weight: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.run-btn:active { transform: translateX(-50%) scale(0.98); }

/* MODALS & OVERLAYS */
.screen-overlay, .modal-overlay { position: fixed; inset: 0; background: #fff; z-index: 3000; display:none; }
.modal-overlay { background: rgba(0,0,0,0.5); align-items: center; justify-content: center; z-index: 6000; }
.screen-overlay.show { display:block; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius: 16px; border: 2px solid #000; overflow:hidden; width: min(420px, 90%); }
.modal-head { padding: 12px 14px; display:flex; align-items:center; justify-content:space-between; border-bottom: 2px solid #000; }
.modal-title { font-weight:900; font-size:14px; }
.modal-close, .screen-close { border:none; background:transparent; font-size:24px; cursor:pointer; }
.modal-body { padding: 14px; }

/* Color Modal */
.color-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.color-chip { width: 100%; aspect-ratio: 1; border-radius: 50%; border: none; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: transform 0.1s; }
.color-chip:active { transform: scale(0.9); }
.custom-color-row { border-top: 1px solid #eee; padding-top: 14px; display: flex; justify-content: center; }
.custom-color-btn { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; background: #f0f0f0; padding: 10px 16px; border-radius: 20px; }
#nativeColorInput { width: 30px; height: 30px; padding: 0; border: none; background: none; cursor: pointer; border-radius: 50%; overflow: hidden; }

/* =========================================================
   [MANUAL INPUT 수정] 
   작게 나오는 문제 해결을 위해 font-size 변수 적용 및 스타일 변경
   ========================================================= */
.manual-form{ display:none; }
.field-label{ display:block; font-weight:900; font-size:12px; margin-bottom: 8px; }

/* 기존 field-input 스타일을 대체 */
.field-input{ 
    width:100%; 
    /* 기존 박스형태 제거하고 밑줄 스타일로 변경 */
    border: none; 
    border-bottom: 2px solid #000; 
    border-radius: 0; 
    background: transparent;
    
    /* 폰트 및 크기 변수 적용 (여기가 핵심) */
    padding: 5px 0; 
    font-family: inherit; /* 현재 설정된 폰트 따라가기 */
    font-size: var(--ui-value-size); /* 설정된 폰트 크기 따라가기 */
    font-weight: 900; 
    outline:none; 
    color: #000;
    line-height: 1.2;
}
.field-input::placeholder {
    color: #ccc;
    font-weight: 400;
}

.field-save{ margin-top: 10px; width:100%; border:none; border-radius: 999px; padding: 12px 12px; background:#000; color:#fff; font-weight:900; cursor:pointer; }
.pace-grid{ display:grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items:center; }
.colon{ font-weight:900; font-size:16px; text-align:center; }

/* Login Screens */
.garmin-login{ background: var(--garmin); color:#000; }
#stravaLoginScreen.garmin-login{ background: var(--strava); color:#000; }
.garmin-login-wrap{ width:100%; height:100%; position:relative; padding: 42px 24px 24px 24px; }
.gc-big{ font-size: 40px; font-weight: 1000; letter-spacing: -1px; line-height: .95; }
.gc-sub{ margin-top: 10px; font-size: 34px; font-weight: 400; letter-spacing: -0.6px; }
.garmin-login-form{ margin-top: 60px; width: min(520px, 100%); }
.gc-input{ width:100%; border:none; border-bottom: 2px solid #000; padding: 10px 2px; font-size: 16px; font-weight: 700; outline:none; background:transparent; margin-bottom: 26px; }
.gc-input::placeholder { color: #000; opacity: 1; }
.gc-note{ display:flex; gap: 10px; align-items:flex-start; margin-top: 4px; }
.gc-smile{ font-size: 30px; line-height:1; font-weight: 900; }
.gc-note-text{ font-size: 12px; font-weight: 800; max-width: 360px; }
.gc-cta{ position:absolute; left: 24px; right: 24px; bottom: 22px; height: 56px; border-radius: 999px; border:none; background:#000; color:#fff; font-size: 20px; font-weight: 900; cursor:pointer; margin: 0; }

/* Select Workout & Month Picker */
.select-workout, .month-picker { background:#fff; color:#000; }
.select-wrap, .month-wrap { width:100%; height:100%; padding: 28px 20px 20px 20px; }
.select-title{ font-size: 40px; font-weight: 1000; letter-spacing: -1px; line-height: .95; margin-top: 12px; margin-bottom: 18px; }
.select-list{ height: calc(100% - 120px); overflow:auto; padding-right: 4px; }
.w-arrow-wrap { width: auto; height: auto; padding: 0 0 0 14px; background: transparent; border: none; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.w-arrow { display: block; font-size: 24px; font-weight: 900; color: #000; line-height: 1; }
.garmin-list-btn { width: 42px; height: 34px; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.hamburger { display: flex; flex-direction: column; gap: 3px; width: 18px; }
.hamburger span { display: block; width: 100%; height: 2px; background: #000; border-radius: 2px; }

.month-head{ display:flex; align-items:center; justify-content:center; gap: 12px; margin-top: 12px; margin-bottom: 16px; }
.month-year{ min-width: 96px; text-align:center; font-size: 32px; font-weight: 1000; letter-spacing: -0.8px; }
.month-nav{ width: 44px; height: 42px; border: 2px solid #000; border-radius: 999px; background:#fff; color:#000; appearance:none; font-size: 26px; font-weight: 900; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.month-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 6px; }
.month-cell{ color:#000; appearance:none; border: 2px solid #000; border-radius: 16px; padding: 14px 12px; background:#fff; font-weight: 900; cursor:pointer; }
.month-cell.active{ background:#000; color:#fff; }

/* Result Screen */
.result-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 99999; }
.result-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 26px; box-sizing: border-box; }
.result-block { width: 100%; }

/* =========================================================
   [수정] 폰트 강제 적용 로직 (Flip, Sten 추가)
   ========================================================= */

/* 1. ANTON Logic (Inter 라벨 적용 로직 포함) */
/* (1) 숫자(Value)는 무조건 폰트 따라감 */
.preview.font-anton .result-value,
.preview.font-anton .m1-distance-value,
.preview.font-anton .m2-distance-value,
.result-screen.font-anton .result-value,
.result-screen.font-anton .m1-distance-value,
.result-screen.font-anton .m2-distance-value {
    font-family: 'Anton', sans-serif !important;
}

/* (2) [수정] Daily 모드 라벨 -> Inter 강제 (Anton, Flip, Sten 포함) */
/* Anton */
.preview:not(.monthly).font-anton .result-label,
.result-screen.font-anton .result-wrap:not(.monthly) .result-label,
/* Flip (New) - Flip은 Daily만 존재하지만 안전하게 포함 */
.preview.font-flip .result-label,
.result-screen.font-flip .result-label,
/* Sten (New) */
.preview.font-sten .result-label,
.result-screen.font-sten .result-label {
    font-family: 'Inter', sans-serif !important;
    font-weight: 900 !important;
}

/* (3) Monthly 모드 라벨 -> Anton 강제 (기존 유지) */
.preview.monthly.font-anton .result-label,
.preview.monthly.font-anton .m-label,
.preview.monthly.font-anton .data-label,
.preview.monthly.font-anton .m1-month,
.preview.monthly.font-anton .m2-month-line,
.result-screen.font-anton .result-wrap.monthly .result-label,
.result-screen.font-anton .result-wrap.monthly .m-label,
.result-screen.font-anton .result-wrap.monthly .data-label,
.result-screen.font-anton .result-wrap.monthly .m1-month,
.result-screen.font-anton .result-wrap.monthly .m2-month-line {
    font-family: 'Anton', sans-serif !important;
}

/* 2. Other Fonts (Labels & Values match the font) */
/* Dots */
.preview.font-dots .result-value, .preview.font-dots .m1-distance-value, .preview.font-dots .m2-distance-value, .preview.font-dots .result-label, .preview.font-dots .m-label, .preview.font-dots .data-label, .preview.font-dots .m1-month, .preview.font-dots .m2-month-line,
.result-screen.font-dots .result-value, .result-screen.font-dots .m1-distance-value, .result-screen.font-dots .m2-distance-value, .result-screen.font-dots .result-label, .result-screen.font-dots .m-label, .result-screen.font-dots .data-label, .result-screen.font-dots .m1-month, .result-screen.font-dots .m2-month-line { font-family: 'Bitcount Grid Single', monospace !important; }

/* LCD */
.preview.font-lcd .result-value, .preview.font-lcd .m1-distance-value, .preview.font-lcd .m2-distance-value, .preview.font-lcd .result-label, .preview.font-lcd .m-label, .preview.font-lcd .data-label, .preview.font-lcd .m1-month, .preview.font-lcd .m2-month-line,
.result-screen.font-lcd .result-value, .result-screen.font-lcd .m1-distance-value, .result-screen.font-lcd .m2-distance-value, .result-screen.font-lcd .result-label, .result-screen.font-lcd .m-label, .result-screen.font-lcd .data-label, .result-screen.font-lcd .m1-month, .result-screen.font-lcd .m2-month-line { font-family: 'DS-Digital', monospace !important; }

/* Gothic */
.preview.font-gothic .result-value, .preview.font-gothic .m1-distance-value, .preview.font-gothic .m2-distance-value, .preview.font-gothic .result-label, .preview.font-gothic .m-label, .preview.font-gothic .data-label, .preview.font-gothic .m1-month, .preview.font-gothic .m2-month-line,
.result-screen.font-gothic .result-value, .result-screen.font-gothic .m1-distance-value, .result-screen.font-gothic .m2-distance-value, .result-screen.font-gothic .result-label, .result-screen.font-gothic .m-label, .result-screen.font-gothic .data-label, .result-screen.font-gothic .m1-month, .result-screen.font-gothic .m2-month-line { font-family: 'Special Gothic Expanded One', sans-serif !important; }

/* Speed */
.preview.font-speed .result-value, .preview.font-speed .m1-distance-value, .preview.font-speed .m2-distance-value, .preview.font-speed .result-label, .preview.font-speed .m-label, .preview.font-speed .data-label, .preview.font-speed .m1-month, .preview.font-speed .m2-month-line,
.result-screen.font-speed .result-value, .result-screen.font-speed .m1-distance-value, .result-screen.font-speed .m2-distance-value, .result-screen.font-speed .result-label, .result-screen.font-speed .m-label, .result-screen.font-speed .data-label, .result-screen.font-speed .m1-month, .result-screen.font-speed .m2-month-line { font-family: 'Quantico', sans-serif !important; }

/* New Fonts Logic */
/* Opera */
.preview.font-opera .result-value, .preview.font-opera .m1-distance-value, .preview.font-opera .m2-distance-value, .preview.font-opera .result-label, .preview.font-opera .m-label, .preview.font-opera .data-label, .preview.font-opera .m1-month, .preview.font-opera .m2-month-line,
.result-screen.font-opera .result-value, .result-screen.font-opera .m1-distance-value, .result-screen.font-opera .m2-distance-value, .result-screen.font-opera .result-label, .result-screen.font-opera .m-label, .result-screen.font-opera .data-label, .result-screen.font-opera .m1-month, .result-screen.font-opera .m2-month-line { font-family: 'Opera', sans-serif !important; }

/* Marker */
.preview.font-marker .result-value, .preview.font-marker .m1-distance-value, .preview.font-marker .m2-distance-value, .preview.font-marker .result-label, .preview.font-marker .m-label, .preview.font-marker .data-label, .preview.font-marker .m1-month, .preview.font-marker .m2-month-line,
.result-screen.font-marker .result-value, .result-screen.font-marker .m1-distance-value, .result-screen.font-marker .m2-distance-value, .result-screen.font-marker .result-label, .result-screen.font-marker .m-label, .result-screen.font-marker .data-label, .result-screen.font-marker .m1-month, .result-screen.font-marker .m2-month-line { font-family: 'Marker', sans-serif !important; }

/* [NEW] Sten (Labels are Inter via above rule, Values are Sten) */
.preview.font-sten .result-value, .preview.font-sten .m1-distance-value, .preview.font-sten .m2-distance-value, .preview.font-sten .m1-month, .preview.font-sten .m2-month-line,
.result-screen.font-sten .result-value, .result-screen.font-sten .m1-distance-value, .result-screen.font-sten .m2-distance-value, .result-screen.font-sten .m1-month, .result-screen.font-sten .m2-month-line { font-family: 'Sten', sans-serif !important; }

/* Writer */
.preview.font-writer .result-value, .preview.font-writer .m1-distance-value, .preview.font-writer .m2-distance-value, .preview.font-writer .result-label, .preview.font-writer .m-label, .preview.font-writer .data-label, .preview.font-writer .m1-month, .preview.font-writer .m2-month-line,
.result-screen.font-writer .result-value, .result-screen.font-writer .m1-distance-value, .result-screen.font-writer .m2-distance-value, .result-screen.font-writer .result-label, .result-screen.font-writer .m-label, .result-screen.font-writer .data-label, .result-screen.font-writer .m1-month, .result-screen.font-writer .m2-month-line { font-family: 'Writer', sans-serif !important; }

/* [NEW] Flip (Labels are Inter via above rule, Values are Flip) */
.preview.font-flip .result-value, .preview.font-flip .m1-distance-value, .preview.font-flip .m2-distance-value,
.result-screen.font-flip .result-value, .result-screen.font-flip .m1-distance-value, .result-screen.font-flip .m2-distance-value { font-family: 'Flip', sans-serif !important; }


/* Webfonts */
@font-face{ font-family:'Inter'; src:url('./fonts/Inter.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Anton'; src:url('./fonts/Anton.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Bitcount Grid Single'; src:url('./fonts/Dots.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'DS-Digital'; src:url('./fonts/LCD.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Special Gothic Expanded One'; src:url('./fonts/Gothic.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Quantico'; src:url('./fonts/Speed.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }
/* New Webfonts */
@font-face{ font-family:'Opera'; src:url('./fonts/Opera.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Marker'; src:url('./fonts/Marker.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sten'; src:url('./fonts/Sten.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Writer'; src:url('./fonts/Writer.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }
@font-face{ font-family:'Flip'; src:url('./fonts/Flip.woff2') format('woff2'); font-weight:400 900; font-style:normal; font-display:swap; }


/* [추가 패치] 라벨 투명도 제거 (숫자와 동일한 진한 컬러 적용) */
.result-label, 
.data-label, 
.m-label, 
.m1-item .m-label, 
.monthly-type1 .m1-item .m-label {
    opacity: 1 !important;
}

/* =========================================
   MANUAL INPUT UI (터치 최적화)
   ========================================= */
.manual-group { margin-top: 10px; }
.manual-row { display: flex; gap: 12px; margin-bottom: 16px; width: 100%; }
.manual-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.manual-label { font-size: 11px; font-weight: 800; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
.big-input { width: 100%; height: 52px; background: #f4f4f4; border: 2px solid transparent; border-radius: 12px; font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 800; color: #000; padding: 0 16px; outline: none; box-sizing: border-box; -webkit-appearance: none; transition: border 0.15s, background 0.15s; }
.big-input:focus { background: #fff; border-color: #000; }
.big-input::placeholder { color: #ccc; }
.pace-wrapper { display: flex; align-items: center; gap: 6px; }
.big-input.center-text { text-align: center; padding: 0; }
.pace-colon { font-size: 20px; font-weight: 900; color: #000; margin-top: -2px; }
.black-btn { width: 100%; height: 52px; background: #000; color: #fff; border: none; border-radius: 999px; font-size: 16px; font-weight: 800; margin-top: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.1s; }
.black-btn:active { transform: scale(0.98); }