:root {
  --bg: #eef2f6;
  --header-bg: #f4f6f9;
  --surface: #ffffff;
  --line: #e3e8ef;
  --text: #202532;
  --panel: #eaf3fd;
}

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

html,
body {
  font-family: "Noto Sans KR", sans-serif;
  background:
    radial-gradient(circle at bottom center, rgba(57, 92, 255, 0.25), transparent 22%),
    radial-gradient(circle at top left, rgba(98, 51, 170, 0.22), transparent 18%),
    #14172c;
  color: var(--text);
}

body {
  max-width: 430px;
  margin: 0 auto;
  min-width: 320px;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

.app {
  min-height: 100vh;
  background: var(--bg);
  border-radius: 42px;
  overflow: hidden;
}

.top-notice {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  background: #eef2f6;
  font-size: 12px;
  color: #2f3440;
}

.header {
  background: var(--header-bg);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 16px 13px;   /* 비율 조정 */
  background: var(--header-bg);
}

.main-logo {
  height: 39px;
  width: auto;
  object-fit: contain;
}

.header-right {
  display: flex;
  align-items: flex-end;
  gap: 16px;
}

.icon-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 42px;
}

.icon-box img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.icon-box span {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.1;
  color: #191e29;
}

.notice-bar {
  min-height: 52px;   /* 높이 조정 */
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: var(--header-bg);
  border-top: 1px solid #e8edf3;
  border-bottom: 1px solid #e3e8ef;
}

.notice-left {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
}

.bell {
  font-size: 18px;
}

.notice-text {
  line-height: 1;
}

.notice-arrow {
  font-size: 24px;
  line-height: 1;
  color: #444b57;
  margin-left: 2px;
}

.search-wrap {
  padding: 11px 16px 13px;   /* 검색창 여백 조정 */
  background: var(--header-bg);
}

.search-box {
  height: 59px;               /* 검색창 높이 조정 */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: #fff;
  border-radius: 999px;
  border: 2px solid #3a6fdf;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.05);
}

.search-left {
  width: 59px;
  height: 70px;
  object-fit: contain;
  flex-shrink: 0;
}

.search-box input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 16.3px;
  color: #8f97a6;
  letter-spacing: -0.02em;
}

.search-right-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.search-right {
  object-fit: contain;
  flex-shrink: 0;
}

.search-right-small {
  width: 24px;
  height: 24px;
}

.search-right-large {
  width: 30px;
  height: 30px;
}

.content {
  padding: 16px 16px 26px;   /* 전체 여백 조정 */
}

.services {
  margin-top: 6px;
  padding: 17px 14px 13px;
  background: var(--panel);
  border: 1px solid #d9e5f4;
  border-radius: 26px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 11px;
}

.section-title h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #1f2530;
}

.plus-btn {
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #434955;
  cursor: pointer;
}

.service-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.service-card {
  min-height: 71px;           /* 카드 높이 조정 (가장 중요한 부분) */
  background: #fff;
  border: 1px solid #e4e9f2;
  border-radius: 16px;
  padding: 12px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.035);
}

.service-label {
  flex: 1;
  min-width: 0;
  font-size: 13.8px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1f2430;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

.quick-links {
  display: grid;
  grid-template-columns: 46px 1fr 1fr 46px;
  align-items: center;
  gap: 10px;
  margin: 22px 0 26px;
}

.round-btn {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: #d3d8e0;
  color: #3a404a;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quick-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  font-size: 14px;
  font-weight: 700;
  color: #232833;
  white-space: nowrap;
}

.quick-item img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.quick-item span {
  white-space: nowrap;
}

.benefit {
  margin-top: 4px;
  background: #fff;
  border-radius: 28px;
  padding: 18px 14px 16px;
}

.benefit-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 0 2px;
}

.benefit-head h2 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #1f2530;
}

.benefit-head span {
  font-size: 24px;
  line-height: 1;
  color: #373d48;
}

.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.benefit-card {
  min-height: 74px;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  align-items: center;
  font-size: 13.4px;
  line-height: 1.28;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1f2430;
  word-break: keep-all;
}

.benefit-card.pink { background: #f7ebee; }
.benefit-card.green { background: #e7f3e8; }
.benefit-card.gray { background: #eceff5; }
.benefit-card.blue { background: #e6f0fb; }

.bottom-space {
  height: 24px;
}

@media (max-width: 380px) {
  .app { border-radius: 0; }
  .header-right { gap: 12px; }
  .icon-box span { font-size: 10px; }
  .search-box input { font-size: 15px; }
  .section-title h2, .benefit-head h2 { font-size: 16px; }
  .service-label, .benefit-card { font-size: 12px; }
  .service-card, .benefit-card { min-height: 68px; }
  .card-icon { width: 18px; height: 18px; }
  .quick-item { font-size: 12px; }
  .round-btn { width: 42px; height: 42px; font-size: 24px; }
  .search-right-small { width: 22px; height: 22px; }
  .search-right-large { width: 28px; height: 28px; }
}