/* ON.15 typography — one local Korean font, a smaller type scale, clearer hierarchy */
@font-face {
  font-family: "Pretendard ON";
  src: url("./fonts/PretendardVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --jdl-font: "Pretendard ON", Pretendard, "SamsungOne", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --jdl-content-weight: 450;
  --jdl-ui-weight: 600;
  --jdl-label-weight: 560;
  --jdl-strong-weight: 700;
  --jdl-content-size: 1rem;
  --jdl-content-line: 1.54;
  --jdl-content-letter: -0.008em;
  --jdl-ui-letter: -0.012em;
  --jdl-title-letter: -0.024em;
  --type-page-title: 1.28rem;
  --type-section: 1.10rem;
  --type-key: 1.02rem;
  --type-body: 1rem;
  --type-support: .90rem;
  --type-caption: .80rem;
}

html[data-font-weight="regular"] {
  --jdl-content-weight: 450;
  --jdl-ui-weight: 600;
  --jdl-label-weight: 560;
  --jdl-strong-weight: 700;
}

html[data-font-weight="medium"] {
  --jdl-content-weight: 510;
  --jdl-ui-weight: 630;
  --jdl-label-weight: 620;
  --jdl-strong-weight: 720;
}

html[data-font-weight="bold"] {
  --jdl-content-weight: 570;
  --jdl-ui-weight: 680;
  --jdl-label-weight: 660;
  --jdl-strong-weight: 760;
}

html {
  font-size: 16px;
  font-kerning: normal;
  font-optical-sizing: auto;
}

html[data-app-size="compact"] { font-size: 15px; }
html[data-app-size="normal"] { font-size: 16px; }
html[data-app-size="large"] { font-size: 17.2px; }

body,
button,
input,
textarea,
select {
  font-family: var(--jdl-font) !important;
  font-synthesis: none;
}

body {
  font-weight: var(--jdl-content-weight);
  line-height: var(--jdl-content-line);
  letter-spacing: var(--jdl-content-letter);
  text-rendering: optimizeLegibility;
}

button {
  font-weight: var(--jdl-ui-weight) !important;
  line-height: 1.25;
}

input,
textarea,
select {
  caret-color: var(--blue);
  line-height: 1.48;
}

input::placeholder,
textarea::placeholder {
  font-weight: 430;
  letter-spacing: -0.006em;
}

/* Home: the pasted order and primary actions must read first. */
#orderInput {
  font-size: 1.04rem;
  font-weight: 500 !important;
  line-height: 1.62;
  letter-spacing: -0.006em !important;
}

#orderInput::placeholder {
  font-size: .95rem;
  font-weight: 450;
  line-height: 1.55;
}

.soft-btn,
.quick-actions button {
  font-size: 1rem;
  font-weight: 600 !important;
}

.primary-btn,
.memo-primary-btn {
  font-size: 1.06rem;
  font-weight: 720 !important;
}

.paste-help,
.required-help,
.settings-note,
.month-help,
.source-note,
.modal-desc,
.dialog-desc,
.help-text {
  color: var(--muted);
  font-size: var(--type-support) !important;
  font-weight: 450 !important;
  line-height: 1.58;
}

.today-date {
  font-size: .90rem;
  font-weight: 520;
  font-variant-numeric: tabular-nums;
}

/* Persistent navigation: short labels stay clearly visible while driving. */
.bottom-nav-btn {
  font-size: .82rem;
  font-weight: 600 !important;
  letter-spacing: -0.006em !important;
}

.bottom-nav-btn > span:last-child {
  line-height: 1.18;
}

/* Full-page dialogs and forms. */
dialog.jdl-page-dialog .jdl-page-head .jdl-unified-title,
dialog.jdl-page-dialog .jdl-page-head .journal-detail-title {
  font-size: var(--type-page-title) !important;
  font-weight: 720 !important;
  letter-spacing: var(--jdl-title-letter) !important;
}

dialog.jdl-page-dialog .required-grid label,
dialog.jdl-page-dialog .journal-edit-grid label,
dialog.jdl-page-dialog .fare-direct-grid label,
dialog.jdl-page-dialog #confirmEdit .required-grid label,
dialog.jdl-page-dialog #journalDetailEdit .journal-edit-grid label {
  color: var(--sub) !important;
  font-size: .94rem !important;
  font-weight: 600 !important;
}

dialog.jdl-page-dialog .jdl-unified-field,
dialog.jdl-page-dialog .required-grid input,
dialog.jdl-page-dialog .required-grid select,
dialog.jdl-page-dialog .journal-edit-grid input,
dialog.jdl-page-dialog .journal-edit-grid select,
dialog.jdl-page-dialog .fare-direct-grid input,
dialog.jdl-page-dialog .fare-direct-grid select {
  font-size: 1.02rem !important;
  font-weight: 500 !important;
  line-height: 1.45;
}

dialog.jdl-page-dialog .inline-choice-panel::before {
  font-size: var(--type-section);
  font-weight: 700;
}

dialog.jdl-page-dialog .inline-choice-item {
  font-size: 1.04rem !important;
  font-weight: 620 !important;
}

#confirmDialog #confirmView .result-list dt {
  color: var(--muted) !important;
  font-size: .92rem !important;
  font-weight: 600 !important;
}

#confirmDialog #confirmView .result-list dd {
  font-size: 1.06rem !important;
  font-weight: 520 !important;
  line-height: 1.52;
}

#rAmount,
#mFare,
#journalDetailAmount,
.result-list dd a,
.detail-info-value,
.entry-row .amount {
  font-variant-numeric: tabular-nums;
}

/* Settings: the setting name is primary; its current value is secondary. */
.settings-page-body .settings-accordion .settings-section-head {
  font-size: 1.04rem;
  font-weight: 650 !important;
}

.settings-page-body .settings-section-head > span {
  color: var(--muted);
  font-size: .91rem;
  font-weight: 520;
}

.settings-page-body .settings-panel button {
  font-size: .98rem;
  font-weight: 620 !important;
}

/* Journal and result screens: labels recede, values come forward. */
.result-list dt,
.detail-info-label,
.table-head,
.journal-raw-title,
.journal-settlement-head,
.label-title {
  font-size: .90rem;
  font-weight: 600 !important;
}

.result-list dd,
.detail-info-value,
.entry-row,
.month-item,
.month-row,
.journal-detail-summary,
.journal-detail-raw,
.journal-raw {
  font-size: 1rem;
  font-weight: 480;
  line-height: 1.52;
}

.money-line strong,
.total-line strong,
.journal-total-text strong,
.month-detail-total strong,
.entry-row .amount {
  font-weight: 720 !important;
}

/* Memo: user titles and note contents are the only strong elements. */
.memo-header h2 {
  font-size: 1.38rem;
  font-weight: 740 !important;
}

.memo-header p {
  font-size: .88rem;
  font-weight: 450;
}

.memo-card-title {
  font-size: 1.10rem;
  font-weight: 700;
  line-height: 1.35;
}

.memo-card-preview {
  color: var(--sub);
  font-size: .94rem;
  line-height: 1.55;
}

.memo-card-time,
.memo-save-status,
.memo-weekdays,
.memo-date-editor-head span {
  font-size: var(--type-caption);
}

#memoTitleInput {
  font-size: 1.16rem;
  font-weight: 700 !important;
}

#memoContentInput,
#memoDateInput {
  font-size: 1.04rem;
  font-weight: 470 !important;
  line-height: 1.72;
}

.memo-month-nav strong,
.memo-date-editor-head strong {
  font-size: 1.04rem;
  font-weight: 680;
}

.memo-day {
  font-size: .92rem;
  font-weight: 560 !important;
  font-variant-numeric: tabular-nums;
}

/* Information: fewer sizes, stronger phone/time hierarchy, readable carrier grids. */
.info-notice strong,
.info-warning strong {
  font-size: 1.08rem;
  font-weight: 700;
}

.info-notice span,
.info-warning span {
  color: var(--sub);
  font-size: .92rem;
  line-height: 1.58;
}

.info-notice small {
  font-size: var(--type-caption);
  line-height: 1.48;
}

.info-menu-btn {
  min-height: 78px;
}

.info-menu-btn strong {
  font-size: 1.10rem;
  font-weight: 700;
}

.info-menu-btn small {
  color: var(--sub);
  font-size: .89rem;
  line-height: 1.42;
}

.info-section-title {
  margin-top: 20px;
  font-size: var(--type-section);
  font-weight: 720;
  letter-spacing: -0.018em;
}

.info-fold {
  position: relative;
}

.info-fold::before {
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, var(--blue) 72%, transparent);
  content: "";
}

.info-view[data-info-view="empty"] .info-fold::before {
  background: color-mix(in srgb, var(--warn) 82%, transparent);
}

.info-view[data-info-view="release"] .info-fold::before {
  background: color-mix(in srgb, var(--green) 78%, transparent);
}

.info-fold > summary {
  min-height: 68px;
  padding-left: 17px;
}

.info-fold > summary strong {
  font-size: 1.08rem;
  font-weight: 700;
}

.info-fold > summary small {
  color: var(--muted);
  font-size: .87rem;
  line-height: 1.45;
}

.info-fold-body {
  padding-left: 17px;
}

.info-phone-row {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  padding: 11px 0;
}

.info-phone-row > span {
  color: var(--muted);
  font-size: .84rem;
  font-weight: 600;
}

.info-phone-row a,
.info-inspector-list a {
  min-height: 38px;
  padding: 7px 10px;
  font-size: .94rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.info-ops-list > div {
  grid-template-columns: 76px minmax(0, 1fr);
  padding: 11px 0;
}

.info-ops-list dt {
  font-size: .84rem;
  font-weight: 600;
}

.info-ops-list dd {
  color: var(--text);
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.55;
}

.info-mini-title {
  font-size: 1rem;
  font-weight: 700;
}

.info-carrier-groups > div {
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  padding: 11px;
}

.info-carrier-groups strong {
  font-size: .88rem;
  font-weight: 700;
}

.info-carrier-groups span {
  color: var(--text);
  font-size: .86rem;
  font-weight: 480;
  line-height: 1.62;
  word-spacing: .08em;
}

.info-time-groups > div {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 11px;
}

.info-time-groups > div > strong {
  grid-column: 1 / -1;
  padding-bottom: 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  color: var(--sub);
  font-size: .86rem;
  font-weight: 620;
  line-height: 1.55;
}

.info-time-groups > div > span {
  min-height: 48px;
  padding: 5px 2px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--card2) 78%, transparent);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.info-time-groups span b {
  color: var(--muted);
  font-size: .72rem;
  font-weight: 560;
}

.info-seal-location span,
.info-data-block > span {
  font-size: .80rem;
  font-weight: 650;
}

.info-seal-location strong {
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.55;
}

.info-data-block p,
.info-inline-note {
  font-size: .91rem;
  line-height: 1.62;
}

.info-inspector-list span {
  font-size: .86rem;
  font-weight: 560;
}

.info-inspector-list strong {
  font-size: .84rem;
  font-weight: 540;
  line-height: 1.45;
}

.info-link-list strong {
  font-size: 1.02rem;
  font-weight: 680;
}

.info-link-list small {
  font-size: .84rem;
  line-height: 1.42;
}

@media (max-width: 385px) {
  .info-phone-row {
    grid-template-columns: 78px minmax(0, 1fr);
  }

  .info-time-groups > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .info-time-groups > div > span {
    font-size: .77rem;
  }
}