:root {
  --ink: #1e2b36;
  --ink-soft: #64717c;
  --muted: #8d99a2;
  --line: #e8edf1;
  --paper: #ffffff;
  --canvas: #f6f8fb;
  --teal: #0e9f9b;
  --teal-dark: #087b7a;
  --teal-pale: #e7f7f4;
  --orange: #ef9a58;
  --orange-pale: #fff3e9;
  --navy: #1d3540;
  --shadow: 0 16px 45px rgba(40, 63, 76, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Noto Sans KR", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { cursor: pointer; }

.app-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }

.topbar {
  height: 82px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.09em;
  font: 700 13px "DM Sans", sans-serif;
}

.brand-dot { color: var(--teal); }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; color: var(--teal); background: var(--teal-pale); border-radius: 9px; }
.brand-mark svg { width: 19px; height: 19px; }
.topbar-actions { display: flex; align-items: center; gap: 19px; }
.storage-status { color: var(--muted); font-size: 11px; }
.status-dot, .footer-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #5cc4a0; vertical-align: 1px; }
.icon-button { width: 35px; height: 35px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: transparent; transition: 0.2s ease; }
.icon-button:hover { color: var(--ink); background: var(--paper); border-color: #d8e0e5; }
.icon-button svg { width: 17px; height: 17px; }

.hero-section { min-height: 291px; display: flex; justify-content: space-between; align-items: center; overflow: hidden; position: relative; padding: 49px 91px 46px 79px; border-radius: 24px; color: #fff; background: var(--navy); box-shadow: var(--shadow); }
.hero-section::before { content: ""; width: 370px; height: 370px; position: absolute; top: -230px; left: -100px; border: 1px solid rgba(255,255,255,0.08); border-radius: 50%; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow, .section-kicker { margin: 0 0 15px; font: 700 10px "DM Sans", sans-serif; letter-spacing: 0.2em; color: #82d8d1; }
.hero-copy h1 { margin: 0; font-size: clamp(31px, 4vw, 46px); font-weight: 700; letter-spacing: -0.065em; line-height: 1.18; }
.hero-copy h1 span { color: #a4e1dc; }
.hero-description { margin: 20px 0 0; color: #b5c5cb; font-size: 13px; line-height: 1.8; }

.hero-orbit { width: 270px; height: 205px; position: relative; margin-top: -3px; flex: 0 0 auto; }
.orbit { position: absolute; border: 1px solid rgba(139, 229, 221, 0.25); border-radius: 50%; transform: rotate(-20deg); }
.orbit-one { width: 190px; height: 72px; left: 39px; top: 65px; }
.orbit-two { width: 220px; height: 100px; left: 25px; top: 50px; transform: rotate(32deg); border-color: rgba(255,255,255,0.15); }
.orbit-three { width: 245px; height: 134px; left: 13px; top: 33px; transform: rotate(-52deg); border-color: rgba(239, 154, 88, 0.31); }
.orbit-core { width: 93px; height: 93px; position: absolute; top: 56px; left: 89px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid rgba(141, 230, 221, 0.55); border-radius: 50%; color: #9ae3dd; background: rgba(18, 55, 63, 0.8); box-shadow: 0 0 0 11px rgba(103, 198, 190, 0.05); }
.orbit-core span { font: 600 30px "DM Sans", sans-serif; line-height: 1; }
.orbit-core small { margin-top: 8px; font: 700 8px "DM Sans", sans-serif; letter-spacing: 0.18em; color: #80bbb9; }
.orbit-pill { position: absolute; padding: 6px 10px; border: 1px solid rgba(255,255,255,0.12); border-radius: 7px; color: #dce9eb; background: rgba(255,255,255,0.08); font: 500 10px "DM Sans", sans-serif; }
.orbit-pill-one { top: 27px; right: 26px; }
.orbit-pill-two { bottom: 18px; left: 38px; color: #b6ebe6; background: rgba(14,159,155,0.18); }
.orbit-pill-three { top: 84px; left: 1px; color: #ffc89e; background: rgba(239,154,88,0.13); }

.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 16px; }
.summary-card { min-height: 133px; padding: 22px 24px 18px; border: 1px solid var(--line); border-radius: 17px; background: var(--paper); box-shadow: 0 8px 23px rgba(40,63,76,0.025); }
.summary-card-primary { border-color: #b4e5df; background: var(--teal-pale); }
.summary-card-top { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 12px; }
.summary-card-primary .summary-card-top { color: #4e807d; }
.summary-card strong { display: block; margin-top: 8px; color: var(--ink); font: 700 29px "DM Sans", "Noto Sans KR", sans-serif; letter-spacing: -0.04em; }
.summary-card p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.summary-card-primary p { color: #59928f; }
.summary-icon { color: var(--teal); font-size: 18px; line-height: 1; }
.summary-icon-muted { color: #acbac1; }

.content-grid { display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.panel { border: 1px solid var(--line); border-radius: 17px; background: var(--paper); box-shadow: 0 8px 23px rgba(40,63,76,0.025); }
.add-panel { padding: 28px 27px 25px; }
.services-panel { min-height: 510px; padding: 28px 29px 18px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.panel-heading h2 { margin: 0; font-size: 19px; letter-spacing: -0.06em; }
.section-kicker { margin-bottom: 9px; color: var(--teal); font-size: 9px; letter-spacing: 0.17em; }
.section-kicker span { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; margin-left: 4px; padding: 0 4px; border-radius: 5px; color: #548a88; background: var(--teal-pale); font-size: 9px; letter-spacing: 0; }
.step-number { color: #ccd6da; font: 500 13px "DM Sans", sans-serif; }
.field-label { display: block; margin: 0 0 8px; color: #56656e; font-size: 11px; font-weight: 600; }
.name-input-wrap, .price-input-wrap { display: flex; align-items: center; height: 44px; border: 1px solid #dfe7eb; border-radius: 9px; background: #fbfcfd; transition: 0.2s ease; }
.name-input-wrap:focus-within, .price-input-wrap:focus-within, select:focus, input[type="date"]:focus { border-color: #89cec9; box-shadow: 0 0 0 3px rgba(14,159,155,0.09); outline: none; }
.input-leading-icon { width: 32px; height: 32px; display: grid; place-items: center; margin-left: 6px; border-radius: 7px; color: var(--teal); background: var(--teal-pale); font-size: 15px; }
input, select { width: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
input::placeholder { color: #b2bec5; }
.name-input-wrap input { padding: 0 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 17px; }
.price-input-wrap { padding-left: 13px; color: var(--teal); font: 600 14px "DM Sans", sans-serif; }
.price-input-wrap input { padding: 0 10px 0 7px; font-family: "DM Sans", sans-serif; font-size: 14px; }
select, input[type="date"] { height: 44px; padding: 0 12px; border: 1px solid #dfe7eb; border-radius: 9px; background: #fbfcfd; color: var(--ink); cursor: pointer; }
input[type="date"] { color: #50616b; font-size: 11px; }
.toggle-row { display: flex; justify-content: space-between; align-items: center; margin-top: 23px; padding-top: 18px; border-top: 1px solid #edf1f3; cursor: pointer; }
.toggle-row strong, .toggle-row small { display: block; }
.toggle-row strong { font-size: 11px; font-weight: 600; }
.toggle-row small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle-slider { width: 39px; height: 22px; display: block; position: relative; border-radius: 100px; background: #d6dfe3; transition: 0.2s ease; }
.toggle-slider::after { content: ""; width: 16px; height: 16px; position: absolute; top: 3px; left: 3px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,0.17); transition: 0.2s ease; }
.toggle input:checked + .toggle-slider { background: var(--teal); }
.toggle input:checked + .toggle-slider::after { left: 20px; }
.primary-button { width: 100%; height: 45px; display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding: 0 17px; border: 0; border-radius: 9px; color: white; background: var(--teal); font-size: 12px; font-weight: 700; transition: 0.2s ease; }
.primary-button:hover { background: var(--teal-dark); transform: translateY(-1px); box-shadow: 0 5px 12px rgba(14,159,155,0.2); }
.primary-button > span:last-child { font: 18px "DM Sans", sans-serif; }
.text-button { width: 100%; margin-top: 11px; padding: 3px; border: 0; color: var(--muted); background: transparent; font-size: 11px; }
.text-button:hover { color: var(--ink); }
.hidden { display: none !important; }

.services-heading { align-items: end; margin-bottom: 17px; }
.filter-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: #f4f7f8; }
.filter-tab { padding: 6px 11px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 10px; }
.filter-tab.active { color: var(--ink); background: white; box-shadow: 0 2px 5px rgba(40,63,76,0.08); font-weight: 700; }
.services-list { min-height: 330px; }
.service-item { display: grid; grid-template-columns: 40px minmax(105px, 1fr) 112px 104px 28px; gap: 14px; align-items: center; min-height: 72px; padding: 11px 0; border-bottom: 1px solid #edf1f3; animation: slide-in 0.25s ease both; }
@keyframes slide-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.service-item:last-child { border-bottom: 0; }
.service-avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: #fff; background: var(--navy); font: 700 14px "DM Sans", sans-serif; }
.service-avatar.music { background: #c8729b; }
.service-avatar.work { background: #6c92ce; }
.service-avatar.cloud { background: #6aaeb6; }
.service-avatar.education { background: #d8955d; }
.service-avatar.other { background: #8d99a2; }
.service-main strong { display: block; overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.service-main span, .service-amount small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.service-amount strong { display: block; font: 600 13px "DM Sans", sans-serif; white-space: nowrap; }
.service-amount small { margin-top: 3px; }
.service-renewal { align-self: center; }
.service-renewal span { display: block; color: var(--muted); font-size: 10px; }
.renewal-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 3px 6px; border-radius: 5px; color: #4d8f88; background: var(--teal-pale); font-size: 9px; }
.renewal-badge.soon { color: #c3773a; background: var(--orange-pale); }
.renewal-badge.expired { color: #a96767; background: #fff0f0; }
.service-actions { display: flex; flex-direction: column; gap: 3px; }
.service-actions button { width: 25px; height: 22px; border: 0; border-radius: 5px; color: #a4b0b7; background: transparent; font-size: 12px; }
.service-actions button:hover { color: var(--teal); background: var(--teal-pale); }
.service-actions .delete-service:hover { color: #d56a6a; background: #fff0f0; }
.empty-state { min-height: 330px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.empty-illustration { width: 55px; height: 55px; display: grid; place-items: center; margin-bottom: 14px; border: 1px dashed #a5d8d4; border-radius: 17px; color: var(--teal); background: var(--teal-pale); font: 600 25px "DM Sans", sans-serif; }
.empty-state h3 { margin: 0; font-size: 13px; }
.empty-state p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.panel-footer { display: flex; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid #edf1f3; color: #a4b0b7; font-size: 10px; }
.panel-footer strong { color: #6b7c85; font-weight: 500; }
.site-footer { display: flex; justify-content: space-between; padding: 23px 3px 30px; color: #a8b4ba; font: 10px "DM Sans", "Noto Sans KR", sans-serif; }
.site-footer span:first-child { text-transform: uppercase; letter-spacing: 0.15em; }
.toast { position: fixed; z-index: 10; bottom: 22px; left: 50%; padding: 11px 17px; border-radius: 9px; color: white; background: var(--navy); box-shadow: 0 8px 25px rgba(29,53,64,0.22); font-size: 11px; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: 0.25s ease; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

.info-section, .calculation-section { margin-top: 16px; padding: 33px 30px; border-radius: 19px; color: #eef7f7; background: #142632; box-shadow: var(--shadow); }
.info-section { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: 43px; }
.info-kicker { margin: 0 0 10px; color: #79cec8; font: 700 9px "DM Sans", sans-serif; letter-spacing: 0.2em; }
.info-section h2, .calculation-section h2 { margin: 0; color: #f4fbfb; font-size: 21px; letter-spacing: -0.06em; }
.info-intro > p:not(.info-kicker) { margin: 12px 0 0; color: #a9c1c7; font-size: 12px; line-height: 1.75; }
.info-updated { display: block; margin-top: 21px; color: #718c96; font-size: 10px; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border: 1px solid #36505e; border-radius: 14px; background: rgba(24, 43, 55, 0.68); transition: border-color 0.2s ease, background 0.2s ease; }
.faq-list details[open] { border-color: #4f9795; background: rgba(26, 57, 65, 0.72); }
.faq-list summary { display: flex; align-items: center; min-height: 49px; padding: 0 16px; color: #f1f9f8; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "▸"; margin-right: 9px; color: #8ddad4; font-size: 14px; transition: transform 0.2s ease; }
.faq-list details[open] summary::before { transform: rotate(90deg); }
.faq-list details p { margin: -2px 18px 16px 40px; color: #a8c1c5; font-size: 11px; line-height: 1.75; }
.calculation-section { padding: 32px 30px 27px; background: #10222d; }
.calculation-lead { margin: 12px 0 0; color: #a9c1c7; font-size: 12px; line-height: 1.7; }
.calculation-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 30px 0 25px; padding: 0; list-style: none; }
.calculation-steps li { display: flex; gap: 13px; }
.calculation-steps li > span { flex: 0 0 auto; color: #70c9c2; font: 700 11px "DM Sans", sans-serif; letter-spacing: 0.06em; }
.calculation-steps strong { display: block; color: #e9f6f5; font-size: 12px; }
.calculation-steps p { margin: 7px 0 0; color: #94afb6; font-size: 10px; line-height: 1.7; }
.calculation-note { margin: 0; padding-top: 15px; border-top: 1px solid #29434f; color: #718c96; font-size: 10px; }

@media (max-width: 850px) {
  .hero-section { padding: 42px 42px; }
  .hero-orbit { transform: scale(0.8); margin-right: -25px; }
  .content-grid { grid-template-columns: 1fr; }
  .add-panel { order: 1; }
  .services-panel { order: 0; }
}

@media (max-width: 600px) {
  .app-shell { width: min(100% - 28px, 500px); }
  .topbar { height: 67px; }
  .storage-status { display: none; }
  .hero-section { min-height: auto; padding: 35px 28px 31px; }
  .hero-copy h1 { font-size: 32px; }
  .hero-description { font-size: 12px; }
  .desktop-break { display: none; }
  .hero-orbit { display: none; }
  .summary-grid { grid-template-columns: 1fr; gap: 9px; }
  .summary-card { min-height: 106px; padding: 17px 20px; }
  .summary-card strong { font-size: 26px; }
  .content-grid { margin-top: 9px; }
  .add-panel, .services-panel { padding: 23px 19px 18px; }
  .service-item { grid-template-columns: 38px minmax(85px, 1fr) 82px 26px; gap: 9px; }
  .service-renewal { display: none; }
  .service-amount strong { font-size: 12px; }
  .panel-footer { align-items: flex-start; flex-direction: column; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 7px; }
  .info-section, .calculation-section { padding: 25px 19px; }
  .info-section { grid-template-columns: 1fr; gap: 22px; }
  .info-updated { margin-top: 14px; }
  .faq-list summary { min-height: 55px; padding: 0 13px; font-size: 11px; }
  .faq-list details p { margin-left: 34px; margin-right: 14px; }
  .calculation-steps { grid-template-columns: 1fr; gap: 19px; margin-top: 24px; }
}

/* Primer alignment layer: one surface, one border, one accent system. */
:root {
  --ink: var(--fgColor-default, #1f2328);
  --ink-soft: var(--fgColor-muted, #57606a);
  --muted: var(--fgColor-muted, #8c959f);
  --line: var(--borderColor-default, #d0d7de);
  --paper: var(--bgColor-default, #ffffff);
  --canvas: var(--bgColor-muted, #f6f8fa);
  --teal: var(--fgColor-accent, #0969da);
  --teal-dark: var(--fgColor-accent-emphasis, #0550ae);
  --teal-pale: var(--bgColor-accent-muted, #ddf4ff);
  --orange: #bc4c00;
  --orange-pale: #fff1e5;
  --navy: #1f2328;
  --shadow: 0 8px 24px rgba(31, 35, 40, 0.06);
}

body { background: var(--canvas); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif; }
button, input, select { font-family: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid #0969da; outline-offset: 2px; }
.app-shell { width: min(1120px, calc(100% - 48px)); }
.topbar { border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); }
.brand-mark { color: var(--teal); background: var(--teal-pale); }
.storage-status { color: var(--ink-soft); }
.icon-button { border-color: var(--line); border-radius: 6px; }
.icon-button:hover { border-color: #8c959f; background: var(--paper); }

.hero-section { min-height: 275px; padding: 46px 68px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--paper); box-shadow: none; }
.hero-section::before { border-color: rgba(9, 105, 218, 0.12); }
.eyebrow { color: var(--teal); }
.hero-copy h1 { color: var(--ink); }
.hero-copy h1 span { color: var(--teal); }
.hero-description { color: var(--ink-soft); }
.orbit { border-color: rgba(9, 105, 218, 0.22); }
.orbit-two { border-color: rgba(87, 96, 106, 0.2); }
.orbit-three { border-color: rgba(188, 76, 0, 0.3); }
.orbit-core { border-color: rgba(9, 105, 218, 0.45); color: var(--teal); background: #f6f8fa; box-shadow: 0 0 0 11px rgba(9, 105, 218, 0.05); }
.orbit-core small { color: var(--ink-soft); }
.orbit-pill { border-color: var(--line); color: var(--ink-soft); background: var(--paper); }
.orbit-pill-two { color: var(--teal); background: var(--teal-pale); }
.orbit-pill-three { color: var(--orange); background: var(--orange-pale); }

.summary-grid { gap: 12px; }
.summary-card, .panel { border-color: var(--line); border-radius: 12px; box-shadow: none; }
.summary-card-primary { border-color: #54aeff; background: var(--teal-pale); }
.summary-card-top, .summary-card p { color: var(--ink-soft); }
.summary-card-primary .summary-card-top, .summary-card-primary p { color: #0969da; }
.summary-card strong { color: var(--ink); }
.summary-icon { color: var(--teal); }

.add-panel, .services-panel { padding: 26px; }
.section-kicker { color: var(--teal); }
.section-kicker span { color: #0969da; background: var(--teal-pale); }
.field-label { color: var(--ink-soft); }
.name-input-wrap, .price-input-wrap, select, input[type="date"] { border-color: var(--line); border-radius: 6px; background: var(--paper); }
.name-input-wrap:focus-within, .price-input-wrap:focus-within, select:focus, input[type="date"]:focus { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12); }
.input-leading-icon { color: var(--teal); background: var(--teal-pale); }
.toggle-row { border-top-color: var(--line); }
.toggle-slider { background: #afb8c1; }
.toggle input:checked + .toggle-slider { background: var(--teal); }
.primary-button { border-radius: 6px; background: var(--teal); }
.primary-button:hover { background: var(--teal-dark); box-shadow: 0 5px 12px rgba(9, 105, 218, 0.2); }
.filter-tabs { background: #f6f8fa; }
.filter-tab.active { color: var(--ink); }
.service-item { border-bottom-color: var(--line); }
.service-avatar, .service-avatar.music, .service-avatar.work, .service-avatar.cloud, .service-avatar.education, .service-avatar.other { background: var(--teal); }
.service-main strong { color: var(--ink); }
.service-main span, .service-amount small, .service-renewal span { color: var(--ink-soft); }
.renewal-badge { color: #0969da; background: var(--teal-pale); }
.renewal-badge.soon { color: var(--orange); background: var(--orange-pale); }
.service-actions button:hover { color: var(--teal); background: var(--teal-pale); }
.service-actions .delete-service:hover { color: #cf222e; background: #ffebe9; }
.empty-illustration { border-color: #54aeff; color: var(--teal); background: var(--teal-pale); }
.panel-footer { border-top-color: var(--line); color: var(--ink-soft); }
.panel-footer strong { color: var(--ink); }

.info-section, .calculation-section { margin-top: 12px; padding: 30px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--paper); box-shadow: none; }
.info-section { grid-template-columns: 235px minmax(0, 1fr); }
.info-kicker { color: var(--teal); }
.info-section h2, .calculation-section h2 { color: var(--ink); }
.info-intro > p:not(.info-kicker), .calculation-lead { color: var(--ink-soft); }
.info-updated { color: var(--muted); }
.faq-list details { border-color: var(--line); background: #f6f8fa; }
.faq-list details[open] { border-color: #54aeff; background: var(--teal-pale); }
.faq-list summary { color: var(--ink); }
.faq-list summary::before { color: var(--teal); }
.faq-list details p { color: var(--ink-soft); }
.calculation-section { background: var(--paper); }
.calculation-steps li > span { color: var(--teal); }
.calculation-steps strong { color: var(--ink); }
.calculation-steps p { color: var(--ink-soft); }
.calculation-note { border-top-color: var(--line); color: var(--muted); }
.site-footer { color: var(--muted); }
.toast { border-radius: 6px; background: var(--navy); }

@media (max-width: 850px) {
  .hero-section { padding: 42px; }
}

@media (max-width: 600px) {
  .app-shell { width: min(100% - 28px, 500px); }
  .hero-section { padding: 35px 28px 31px; }
  .add-panel, .services-panel { padding: 22px 19px 18px; }
  .info-section, .calculation-section { padding: 25px 19px; }
}

.savings-panel { margin-top: 12px; padding: 26px; }
.savings-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 21px; }
.savings-heading h2 { margin: 0; color: var(--ink); font-size: 19px; letter-spacing: -0.06em; }
.savings-description { margin: 8px 0 0; color: var(--ink-soft); font-size: 11px; }
.savings-count { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: var(--teal); background: var(--teal-pale); font-size: 10px; font-weight: 700; }
.savings-layout { display: grid; grid-template-columns: minmax(225px, 0.78fr) minmax(0, 1.22fr); gap: 15px; }
.savings-total-card { display: flex; flex-direction: column; justify-content: center; min-height: 245px; padding: 23px; border: 1px solid #54aeff; border-radius: 9px; background: var(--teal-pale); }
.savings-total-label { color: #0969da; font-size: 11px; }
.savings-total-card > strong { display: block; margin-top: 9px; color: var(--ink); font: 700 31px "DM Sans", "Noto Sans KR", sans-serif; letter-spacing: -0.05em; }
.savings-total-caption { margin-top: 3px; color: var(--ink-soft); font-size: 11px; }
.savings-breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; padding-top: 15px; border-top: 1px solid rgba(9, 105, 218, 0.18); }
.savings-breakdown span { color: var(--ink-soft); font-size: 10px; }
.savings-breakdown strong { display: block; margin-top: 5px; color: var(--ink); font: 700 14px "DM Sans", "Noto Sans KR", sans-serif; }
.savings-total-card p { margin: 20px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.savings-picker { min-height: 245px; padding: 18px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); }
.savings-picker-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.savings-picker-heading > strong { color: var(--ink); font-size: 12px; }
.savings-presets { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.savings-preset-button, .savings-clear-button { padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-soft); background: var(--paper); font-size: 9px; }
.savings-preset-button:hover, .savings-clear-button:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-pale); }
.savings-list { max-height: 220px; overflow-y: auto; padding-right: 3px; }
.savings-option { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 54px; padding: 8px 5px; border-bottom: 1px solid #eaeef1; cursor: pointer; }
.savings-option:last-child { border-bottom: 0; }
.savings-option:hover, .savings-option.selected { border-radius: 6px; background: #f6f8fa; }
.savings-checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; }
.savings-checkmark { width: 17px; height: 17px; display: grid; place-items: center; border: 1px solid #afb8c1; border-radius: 4px; color: transparent; background: var(--paper); font-size: 11px; font-weight: 700; }
.savings-checkbox:checked + .savings-checkmark { border-color: var(--teal); color: white; background: var(--teal); }
.savings-checkbox:focus-visible + .savings-checkmark { outline: 2px solid #0969da; outline-offset: 2px; }
.savings-option-main { min-width: 0; }
.savings-option-main strong, .savings-option-main small, .savings-option-amount strong, .savings-option-amount small { display: block; }
.savings-option-main strong { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.savings-option-main small, .savings-option-amount small { margin-top: 3px; color: var(--ink-soft); font-size: 9px; }
.savings-option-amount { text-align: right; }
.savings-option-amount strong { color: var(--ink); font: 700 12px "DM Sans", "Noto Sans KR", sans-serif; }
.savings-empty { display: grid; min-height: 170px; place-items: center; color: var(--ink-soft); font-size: 10px; text-align: center; }
.savings-clear-button { display: block; margin: 9px 0 0 auto; border: 0; color: var(--ink-soft); background: transparent; }
.savings-clear-button:hover { background: transparent; }
.savings-footer { margin-top: 17px; }
.result-actions { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 17px; }
.result-action-button { min-height: 32px; display: inline-flex; justify-content: center; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid #8c959f; border-radius: 6px; color: var(--ink); background: var(--paper); font-size: 10px; font-weight: 700; transition: 0.2s ease; }
.result-action-button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.result-action-button:hover { border-color: var(--teal); color: var(--teal); background: var(--paper); transform: translateY(-1px); }

@media (max-width: 850px) {
  .savings-layout { grid-template-columns: 1fr; }
  .savings-total-card { min-height: auto; }
}

@media (max-width: 600px) {
  .savings-panel { padding: 22px 19px 18px; }
  .savings-heading { align-items: flex-start; }
  .savings-picker-heading { align-items: flex-start; flex-direction: column; }
  .savings-presets { justify-content: flex-start; }
  .savings-total-card { padding: 20px; }
  .savings-total-card > strong { font-size: 28px; }
}

/* Larger touch targets across the site. */
.icon-button { width: 40px; height: 40px; }
.filter-tab { min-height: 34px; padding: 0 14px; font-size: 11px; }
.primary-button { height: 50px; padding: 0 19px; font-size: 13px; }
.text-button { min-height: 34px; font-size: 12px; }
.service-item { grid-template-columns: 40px minmax(105px, 1fr) 112px 104px 34px; }
.service-actions button { width: 30px; height: 30px; font-size: 14px; }
.savings-preset-button, .savings-clear-button { min-height: 32px; padding: 0 10px; font-size: 10px; }
.savings-clear-button { padding: 0 9px; }
.result-action-button { min-height: 40px; padding: 0 10px; font-size: 11px; }

@media (max-width: 600px) {
  .icon-button { width: 38px; height: 38px; }
  .filter-tab { min-height: 32px; padding: 0 11px; font-size: 10px; }
  .primary-button { height: 50px; }
  .service-item { grid-template-columns: 38px minmax(85px, 1fr) 82px 32px; gap: 8px; }
  .service-actions button { width: 29px; height: 29px; }
  .savings-preset-button, .savings-clear-button { min-height: 34px; }
  .result-action-button { min-height: 40px; }
}

/* FAQ readability scale */
.info-section h2 { font-size: 24px; }
.info-section .info-kicker { font-size: 10px; }
.info-intro > p:not(.info-kicker) { font-size: 13px; line-height: 1.85; }
.info-updated { font-size: 11px; }
.faq-list { gap: 11px; }
.faq-list summary { min-height: 58px; padding: 0 18px; font-size: 14px; }
.faq-list summary::before { font-size: 15px; }
.faq-list details p { margin-left: 42px; margin-right: 20px; font-size: 12px; line-height: 1.85; }

@media (max-width: 600px) {
  .info-section h2 { font-size: 22px; }
  .info-intro > p:not(.info-kicker) { font-size: 12px; }
  .info-updated { font-size: 10px; }
  .faq-list summary { min-height: 58px; padding: 0 14px; font-size: 12px; }
  .faq-list details p { margin-left: 34px; margin-right: 14px; font-size: 11px; line-height: 1.8; }
}

.field-optional { color: var(--muted); font-size: 9px; font-weight: 400; }
.field-full { margin-top: 17px; }
.field-note { margin-top: 13px; }
.text-input { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.text-input:focus { border-color: #0969da; box-shadow: 0 0 0 3px rgba(9, 105, 218, 0.12); outline: none; }
.quick-price-reference { margin-top: 16px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; background: #f6f8fa; }
.quick-price-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.quick-price-heading strong { color: var(--ink); font-size: 11px; }
.quick-price-heading span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.quick-price-reference p { margin: 6px 0 10px; color: var(--ink-soft); font-size: 10px; line-height: 1.55; }
.quick-price-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.quick-price-button { min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); background: var(--paper); font-size: 10px; text-align: left; }
.quick-price-button strong { color: var(--ink); font: 700 10px "DM Sans", "Noto Sans KR", sans-serif; white-space: nowrap; }
.quick-price-button:hover { border-color: var(--teal); color: var(--teal); background: var(--teal-pale); }
.coach-form-hint { margin: 12px 0 0; color: var(--ink-soft); font-size: 10px; line-height: 1.6; }
.service-main .service-health-badge { display: inline-flex; width: max-content; align-items: center; margin-top: 5px; padding: 3px 6px; border-radius: 999px; color: var(--ink-soft); background: #eef1f4; font-size: 9px; line-height: 1.2; }
.service-main .service-health-badge.review { color: var(--orange); background: var(--orange-pale); }
.service-main .service-health-badge.candidate { color: #cf222e; background: #ffebe9; }
.service-main .service-health-badge.needs-input { color: var(--ink-soft); background: #f1f3f5; }

.coach-panel { margin-top: 12px; padding: 26px; }
.coach-heading { margin-bottom: 20px; }
.coach-description { margin: 8px 0 0; color: var(--ink-soft); font-size: 11px; }
.coach-summary-badge { flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: var(--teal); background: var(--teal-pale); font-size: 10px; font-weight: 700; }
.coach-dashboard { display: grid; grid-template-columns: minmax(245px, 0.85fr) minmax(0, 1.15fr); gap: 15px; }
.coach-highlight { min-height: 225px; display: flex; flex-direction: column; padding: 21px; border: 1px solid #54aeff; border-radius: 9px; background: var(--teal-pale); }
.coach-highlight-top { display: flex; justify-content: space-between; gap: 10px; color: var(--teal); font-size: 10px; }
.coach-score { color: var(--ink-soft); font-weight: 700; text-align: right; }
.coach-highlight > strong { margin-top: 14px; color: var(--ink); font-size: 20px; letter-spacing: -0.05em; }
.coach-highlight > p { min-height: 32px; margin: 7px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.6; }
.coach-reasons { display: grid; gap: 3px; margin: 9px 0 0; padding: 0; list-style: none; }
.coach-reasons li { color: var(--ink-soft); font-size: 10px; line-height: 1.45; }
.coach-reasons li::before { content: "•"; margin-right: 6px; color: var(--teal); font-weight: 700; }
.coach-cancel-link { display: inline-flex; width: max-content; margin-top: 9px; color: var(--teal); font-size: 10px; font-weight: 700; text-decoration: none; }
.coach-cancel-link:hover { text-decoration: underline; }
.coach-highlight-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; padding-top: 15px; border-top: 1px solid rgba(9, 105, 218, 0.18); }
.coach-highlight-metrics span { color: var(--ink-soft); font-size: 10px; }
.coach-highlight-metrics strong { display: block; margin-top: 4px; color: var(--ink); font: 700 14px "DM Sans", "Noto Sans KR", sans-serif; }
.coach-edit-button { min-height: 36px; margin-top: 15px; border: 1px solid #0969da; border-radius: 6px; color: #0969da; background: rgba(255, 255, 255, 0.56); font-size: 11px; font-weight: 700; }
.coach-edit-button:hover:not(:disabled) { color: white; background: var(--teal); }
.coach-edit-button:disabled { cursor: not-allowed; opacity: 0.55; }
.coach-action-column { min-width: 0; padding: 4px 0; }
.coach-action-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.coach-action-heading strong { color: var(--ink); font-size: 12px; }
.coach-action-heading span { color: var(--muted); font-size: 10px; }
.coach-actions { display: grid; gap: 7px; }
.coach-action-item { width: 100%; min-height: 51px; display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; gap: 9px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--ink); background: var(--paper); text-align: left; transition: 0.2s ease; }
.coach-action-item:hover { border-color: #54aeff; background: var(--teal-pale); transform: translateY(-1px); }
.coach-action-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--teal); background: var(--teal-pale); font-size: 13px; font-weight: 700; }
.coach-action-copy { min-width: 0; }
.coach-action-copy strong, .coach-action-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coach-action-copy strong { font-size: 11px; }
.coach-action-copy small { margin-top: 3px; color: var(--ink-soft); font-size: 9px; }
.coach-action-arrow { color: var(--muted); font-size: 16px; }
.coach-empty { min-height: 185px; display: grid; place-content: center; color: var(--ink-soft); font-size: 11px; line-height: 1.7; text-align: center; }
.coach-empty span { color: var(--muted); font-size: 10px; }
.coach-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 10px; }
.coach-stats strong { margin-right: 3px; color: var(--ink); font: 700 13px "DM Sans", "Noto Sans KR", sans-serif; }

.goal-controls { margin: 14px 0 8px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #f6f8fa; }
.goal-controls > label { display: block; margin-bottom: 7px; color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.goal-control-row { display: flex; gap: 7px; }
.goal-control-row select { flex: 1; min-width: 0; height: 38px; }
.goal-apply-button { min-width: 84px; height: 38px; padding: 0 11px; border: 1px solid var(--teal); border-radius: 6px; color: var(--teal); background: var(--paper); font-size: 10px; font-weight: 700; }
.goal-apply-button:hover { color: white; background: var(--teal); }
.goal-controls p { margin: 7px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }

@media (max-width: 850px) {
  .coach-dashboard { grid-template-columns: 1fr; }
  .coach-highlight { min-height: auto; }
}

@media (max-width: 600px) {
  .coach-panel { padding: 22px 19px 18px; }
  .coach-heading { gap: 10px; }
  .coach-heading h2 { font-size: 18px; }
  .coach-description { font-size: 10px; }
  .coach-summary-badge { font-size: 9px; }
  .goal-control-row { align-items: stretch; flex-direction: column; }
  .goal-control-row select, .goal-apply-button { width: 100%; height: 42px; }
  .coach-stats { gap: 9px 18px; }
}

/* Mobile layout polish: prevent hidden controls from widening the page and improve scanability. */
html, body { max-width: 100%; overflow-x: hidden; }
.toggle { position: relative; display: inline-flex; flex: 0 0 auto; }
.toggle input { width: 1px; height: 1px; margin: 0; }

@media (max-width: 600px) {
  .app-shell { width: calc(100% - 28px); max-width: 500px; }
  .hero-section { padding: 32px 24px 29px; }
  .hero-copy h1 { font-size: 31px; line-height: 1.25; }
  .hero-description { font-size: 13px; line-height: 1.85; }
  .summary-card-top { font-size: 13px; }
  .summary-card strong { font-size: 28px; }
  .summary-card p { font-size: 12px; }
  .content-grid > .panel { min-width: 0; }
  .info-section { grid-template-columns: 1fr; gap: 22px; }
  .panel-heading h2 { font-size: 20px; }
  .field-label { margin-bottom: 9px; font-size: 12px; }
  .quick-price-reference { padding: 12px; }
  .quick-price-heading strong { font-size: 12px; }
  .quick-price-reference p { font-size: 11px; }
  .quick-price-list { grid-template-columns: 1fr; }
  .quick-price-button { min-height: 40px; padding: 8px 10px; font-size: 11px; }
  .quick-price-button strong { font-size: 11px; }
  input, select { font-size: 13px; }
  input[type="date"] { font-size: 12px; }
  .coach-form-hint { font-size: 11px; line-height: 1.7; }
  .service-main strong { font-size: 13px; }
  .service-main span, .service-amount small, .service-renewal span { font-size: 11px; }
  .service-amount strong { font-size: 14px; }
  .renewal-badge { font-size: 10px; }
  .empty-state p { font-size: 12px; }
  .panel-footer { font-size: 11px; line-height: 1.6; }
  .coach-description { font-size: 11px; line-height: 1.7; }
  .coach-highlight > p { font-size: 12px; line-height: 1.7; }
  .coach-reasons li { font-size: 11px; line-height: 1.6; }
  .coach-action-heading strong { font-size: 13px; }
  .coach-action-heading span { font-size: 11px; }
  .coach-action-copy strong { font-size: 12px; }
  .coach-action-copy small { font-size: 10px; }
  .coach-stats { font-size: 11px; line-height: 1.6; }
  .savings-description { font-size: 12px; line-height: 1.7; }
  .savings-total-label, .savings-total-caption { font-size: 11px; }
  .savings-total-card p { font-size: 11px; line-height: 1.7; }
  .savings-option-main strong { font-size: 12px; }
  .savings-option-main small, .savings-option-amount small { font-size: 10px; }
  .savings-option-amount strong { font-size: 13px; }
  .info-intro > p:not(.info-kicker) { font-size: 13px; line-height: 1.85; }
  .info-updated { font-size: 11px; }
  .faq-list summary { font-size: 13px; line-height: 1.5; }
  .faq-list details p { font-size: 12px; line-height: 1.85; }
  .calculation-lead { font-size: 13px; line-height: 1.8; }
  .calculation-steps strong { font-size: 13px; }
  .calculation-steps p { font-size: 11px; line-height: 1.8; }
  .calculation-note { font-size: 11px; line-height: 1.7; }
}