/* =========================
   Reset
========================= */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  min-width: 1200px;
  color: #111;
  background: #fff;
  font-family:
    Pretendard,
    "Noto Sans KR",
    Arial,
    sans-serif;
  line-height: 1.5;
}

ul,
ol {
  list-style: none;
}

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

button,
select,
input {
  color: inherit;
  font: inherit;
}

button {
  border: 0;
  background: none;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.hidden-txt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =========================
   Header
========================= */

#header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid #e7e9ed;
}

.utility-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1224px;
  height: 54px;
  margin: 0 auto;
}

.utility-nav__left,
.utility-nav__right {
  display: flex;
  align-items: center;
}

.utility-nav__left li,
.utility-nav__right li {
  position: relative;
}

.utility-nav__left li:not(:last-child)::after,
.utility-nav__right li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 1px;
  height: 11px;
  background: #d9dce1;
  transform: translateY(-50%);
}

.utility-nav button,
.utility-nav a {
  display: block;
  padding: 8px 12px;
  color: #555;
  font-size: 13px;
  line-height: 1;
}

.utility-nav__left li:first-child button,
.utility-nav__left li:first-child a {
  padding-left: 0;
}

.utility-nav__right li:last-child button,
.utility-nav__right li:last-child a {
  padding-right: 0;
}

.utility-nav button:hover,
.utility-nav a:hover {
  color: #1685ed;
}


/* =========================
   Main navigation
========================= */

.main-nav {
  display: flex;
  align-items: center;
  width: 1224px;
  height: 116px;
  margin: 0 auto;
}

.logo {
  flex: 0 0 270px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: -1.2px;
}

.logo a {
  display: inline-block;
}

/* 로그인 화면 css 시작 */
.login-logo {
    justify-content: center;
    margin-top: 100px;
    font-size: 50px;
}

.login-logo h1 {
    display: inline-block;
    font-size: 50px;
    font-weight: 800;
    letter-spacing: -1.2px;
    text-align: center;
}

.login-logo h1 span {
    font-weight: 400;
}

/* =========================
   login
========================= */

.login-container {
  width: min(100% - 32px, 500px);
  margin: 60px auto 0;
  padding: 32px 32px 44px;

  display: flex;
  justify-content: center;
  flex-direction: column;
}

#login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-box {
  position: relative;
  width: 100%;
  height: 52px;
}

.input-box > input {
  width: 100%;
  height: 100%;
  padding: 0 118px 0 20px;

  border: 1px solid #d8d8d8;
  border-radius: 11px;

  background: #fff;

  font-size: 14px;
  color: #222;

  outline: none;
}

.input-box > input::placeholder {
  color: #777;
}

.input-box > input:focus {
  border-color: #888;
}


/* 아이디 저장 */

.save-id {
  position: absolute;
  top: 50%;
  right: 18px;

  display: flex;
  align-items: center;
  gap: 7px;

  transform: translateY(-50%);

  font-size: 14px;
  color: #666;

  cursor: pointer;
}

.save-id input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.check-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  border: 1px solid #8098bb;
  border-radius: 50%;

  font-size: 13px;
  color: #8098bb;
}


/* 체크됐을 때 */

.save-id input:checked + .check-icon {
  background: #248cff;
  border-color: #248cff;
  color: #fff;
}


/* 비밀번호 아이콘 */

.password-box > input {
  padding-right: 55px;
}

.password-icon {
  position: absolute;
  top: 50%;
  right: 19px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 17px;
  height: 21px;

  border: 1px solid #8799b6;
  border-radius: 8px;

  transform: translateY(-50%);

  font-size: 12px;
  color: #8799b6;
}


/* 로그인 버튼 */

.login-btn {
  width: 100%;
  height: 52px;

  margin-top: 0;

  border: 0;
  border-radius: 10px;

  background: #248cff;

  font-size: 14px;
  font-weight: 700;
  color: #fff;

  cursor: pointer;
}

.login-btn:hover {
  background: #147dea;
}


/* 아이디 찾기 / 회원가입 */

.login-links {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-top: 24px;

  font-size: 14px;
  color: #444;
}

.login-links a:hover {
  text-decoration: underline;
}


/* 보안프로그램 영역 */

.security-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;

  margin-top: 28px;
  padding-top: 28px;

  border-top: 1px solid #ededed;

  font-size: 13px;
  font-weight: 600;
  color: #111;
}

.security-links a {
  position: relative;
}

.security-links a + a::before {
  content: "";

  position: absolute;
  top: 50%;
  left: -10px;

  width: 1px;
  height: 13px;

  background: #ddd;

  transform: translateY(-50%);
}


/* 에러 메시지 */

.error {
  margin-top: 12px;

  font-size: 13px;
  color: #e53935;
}

/* 로그인 화면 css 끝 */

/* 회원가입 화면 css 시작 */
/* =========================
   signup
========================= */

.signup-container {
  width: min(100% - 32px, 500px);
  margin: 60px auto 0;
  padding: 32px 32px 44px;

  display: flex;
  justify-content: center;
  flex-direction: column;
}

.signup-container h2 {
  margin-bottom: 32px;

  font-size: 24px;
  font-weight: 700;
  text-align: center;
  color: #111;
}


/* form */

#signup-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* label */

#signup-form > label {
  display: flex;
  flex-direction: column;
  gap: 9px;

  font-size: 14px;
  font-weight: 600;
  color: #333;
}


/* input */

#signup-form input {
  width: 100%;
  height: 52px;

  padding: 0 16px;

  border: 1px solid #d8d8d8;
  border-radius: 10px;

  background: #fff;

  font-size: 14px;
  color: #222;

  outline: none;
}

#signup-form .gender-code{
  width: 10%;
  height: 52px;

  padding: 0 16px;

  border: 1px solid #d8d8d8;
  border-radius: 10px;

  background: #fff;

  font-size: 14px;
  color: #222;

  outline: none;
}
.phone-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

#signup-form .phone-number {
  flex: 1;
  width: 0;
  height: 52px;

  padding: 0 16px;

  border: 1px solid #d8d8d8;
  border-radius: 10px;

  background: #fff;

  font-size: 14px;
  color: #222;

  outline: none;
}

#signup-form input::placeholder {
  color: #aaa;
}

#signup-form input:focus {
  border-color: #248cff;
}


/* =========================
   resident number
========================= */

.resident-number-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.resident-number-group input[name="birthDate"] {
  flex: 1;
}

.resident-number-group input[name="genderCode"] {
  width: 64px;
  flex: none;
}

.resident-number-group .dash {
  flex: none;

  font-size: 18px;
  color: #777;
}


/* =========================
   signup button
========================= */

#signup-form button[type="submit"] {
  width: 100%;
  height: 52px;

  margin-top: 8px;

  border: 0;
  border-radius: 10px;

  background: #248cff;

  font-size: 14px;
  font-weight: 700;
  color: #fff;

  cursor: pointer;

  transition: background 0.2s;
}

#signup-form button[type="submit"]:hover {
  background: #147dea;
}


/* =========================
   error
========================= */

.signup-container .error {
  margin-top: -12px;

  font-size: 13px;
  line-height: 1.4;
  color: #e53935;
}

/* 마이페이지: 로그인·회원가입과 같은 폼 스타일 */
.mypage-container {
  width: min(100% - 32px, 500px);
  margin: 60px auto 64px;
  padding: 32px 32px 44px;
}

.mypage-container h2 {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.mypage-description {
  margin: 12px 0 32px;
  color: #666;
  font-size: 14px;
  text-align: center;
}

#mypage-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#mypage-form > label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

#mypage-form input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: #222;
}

#mypage-form input:focus {
  border-color: #248cff;
  outline: 2px solid rgba(38, 141, 242, 0.2);
  outline-offset: 2px;
}

#mypage-form input:disabled {
  background: #f4f6f8;
  color: #666;
  cursor: not-allowed;
  opacity: 1;
}

#mypage-form input::placeholder {
  color: #aaa;
}

.mypage-help {
  color: #777;
  font-size: 13px;
  font-weight: 400;
}

#mypage-form button[type="submit"] {
  width: 100%;
  height: 52px;
  margin-top: 8px;
  border-radius: 10px;
  background: #248cff;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

#mypage-form button[type="submit"]:hover {
  background: #147dea;
}

.mypage-message {
  margin-top: 20px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f4f6f8;
  color: #333;
  font-size: 14px;
  text-align: center;
}

.mypage-delete-btn {
  width: 100%;
  margin-top: 14px;
  font-size: 12px;
  color:#666;
  text-align: right;
}

/* 회원가입 완료 */
.signup-complete {
  width: min(100% - 32px, 560px);
  margin: 32px auto 64px;
  padding: 48px 24px;
  border-radius: 20px;
  text-align: center;
}

.signup-complete__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: #edf5ff;
  color: #147dea;
  font-size: 36px;
}

.signup-complete h1 {
  margin-bottom: 16px;
  font-size: clamp(22px, 5vw, 28px);
  word-break: keep-all;
}

.signup-complete p {
  color: #666;
  line-height: 1.8;
  word-break: keep-all;
}

.signup-complete__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.signup-complete__button {
  flex: 1 1 160px;
  padding: 15px 20px;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  font-weight: 700;
}

.signup-complete__button:hover {
  background: #f4f6f8;
}

.signup-complete__button--primary {
  border-color: #147dea;
  background: #147dea;
  color: #fff;
}

.signup-complete__button--primary:hover {
  background: #106bc9;
}

.signup-complete-page a:focus-visible {
  outline: 3px solid #147dea;
  outline-offset: 4px;
}

/* 회원가입 화면 css 끝 */

.main-nav__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 62px;
  flex: 1;
}

.main-nav__menu a {
  position: relative;
  display: block;
  padding: 42px 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.7px;
  white-space: nowrap;
}

.main-nav__menu a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 30px;
  left: 0;
  height: 3px;
  background: #1685ed;
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.main-nav__menu a:hover::after {
  transform: scaleX(1);
}

.main-nav__util {
  display: flex;
  flex: 0 0 120px;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
}

.search-btn,
.menu-btn {
  position: relative;
  width: 26px;
  height: 26px;
}


/* 검색 아이콘 */

.search-btn::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 13px;
  height: 13px;
  border: 2px solid #111;
  border-radius: 50%;
}

.search-btn::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 17px;
  width: 8px;
  height: 2px;
  background: #111;
  transform: rotate(45deg);
  transform-origin: left center;
}


/* 전체 메뉴 아이콘 */

.menu-btn::before,
.menu-btn::after {
  content: "";
  position: absolute;
  left: 3px;
  width: 18px;
  height: 2px;
  background: #111;
}

.menu-btn::before {
  top: 8px;
}

.menu-btn::after {
  top: 16px;
}


/* =========================
   Main layout
========================= */

#main {
  display: grid;
  grid-template-columns: minmax(0, 2.08fr) minmax(360px, 1fr);
  gap: 40px 24px;
  width: 1224px;
  margin: 50px auto 80px;
}


/* =========================
   Main visual
========================= */

.main-visual {
  min-width: 0;
}

.main-visual__banner {
  position: relative;
  height: 462px;
  overflow: hidden;
  background:
    linear-gradient(
      120deg,
      #b8deb7 0%,
      #4e816b 44%,
      #0a9b73 100%
    );
  border-radius: 15px;
}

.main-visual__banner::before {
  content:
    "커피/교통/이동통신/쇼핑 할인받고\A"
    "해외에서 한도 없이 적립\A"
    "Cat Royal 카드";
  position: absolute;
  top: 62px;
  left: 52px;
  z-index: 2;
  color: #fff;
  font-size: 35px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -1.8px;
  white-space: pre;
}

.main-visual__banner::after {
  content: "";
  position: absolute;
  right: 43px;
  bottom: 26px;
  width: 250px;
  height: 380px;
  /*background:
    linear-gradient(145deg, #134e96, #041f61);*/
    background-image: url('/assets/cards/5.png');
  /*border: 5px solid rgba(255, 255, 255, 0.15);*/
  border-radius: 18px;
  box-shadow: 0 25px 35px rgba(0, 0, 0, 0.25);
  transform: rotate(9deg);
}

.banner-control {
  position: absolute;
  left: 54px;
  bottom: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.banner-control i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ccc;
}

.banner-control i.active {
  background: #248cff;
}

.banner-control button {
  color: #fff;
}


/* =========================
   Login box
========================= */

.login-box {
  height: 462px;
  padding: 25px 18px 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 15px;
}

.login-tabs {
  border-bottom: 1px solid #dfe3e8;
}

.login-tabs__list {
  display: flex;
  justify-content: space-between;
}

.login-tabs__button {
  position: relative;
  min-width: 72px;
  padding: 13px 5px 16px;
  color: #666;
  font-size: 14px;
  white-space: nowrap;
}

.login-tabs__button.active {
  color: #111;
  font-weight: 700;
}

.login-tabs__button.active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: #111;
}

.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px 14px 0;
}

.login-content__icon {
  position: relative;
  width: 54px;
  height: 42px;
  margin-bottom: 19px;
}

.login-content__icon::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 3px;
  width: 24px;
  height: 32px;
  border: 3px solid #111;
  border-radius: 5px;
}

.login-content__icon::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 2px;
  width: 28px;
  height: 32px;
  border: 3px solid #111;
  border-radius: 5px;
}

.login-content__description {
  margin-bottom: 27px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: -0.5px;
}

.login-content__buttons {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
}

.login-button {
  display: flex;
  height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
}

.login-button--primary {
  flex: 1;
  color: #fff;
  background: #278df2;
}

.login-button--primary:hover {
  background: #147cdf;
}

.login-button--secondary {
  flex: 0 0 88px;
  color: #555;
}

.login-button--secondary:hover {
  background: #f4f6f9;
}


/* =========================
   Login quick menu
========================= */

.login-quick-menu {
  margin-top: 12px;
  padding: 19px 6px 0;
  border-top: 1px solid #e3e6ea;
}

.login-quick-menu__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.login-quick-menu__item {
  position: relative;
}

.login-quick-menu__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 0;
  width: 1px;
  height: 13px;
  background: #e1e4e8;
}

.login-quick-menu__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
}

.login-quick-menu__icon {
  position: relative;
  width: 28px;
  height: 28px;
  border: 2px solid #222;
  border-radius: 5px;
}

.login-quick-menu__item:nth-child(2)
.login-quick-menu__icon::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 5px;
  width: 14px;
  height: 2px;
  background: #258cf1;
  box-shadow: 0 6px 0 #258cf1;
}

.login-quick-menu__item:nth-child(3)
.login-quick-menu__icon::after {
  content: "₩";
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: flex;
  width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #258cf1;
  border-radius: 50%;
  font-size: 9px;
}

.login-quick-menu__item:nth-child(4)
.login-quick-menu__icon::after {
  content: "✓";
  position: absolute;
  right: -4px;
  bottom: -6px;
  color: #258cf1;
  font-size: 17px;
  font-weight: 800;
}


/* =========================
   Recommend section
========================= */

.recommend-section {
  grid-column: 1 / -1;
  min-height: 440px;
  padding: 24px;
  border: 1px solid #dfe3e8;
  border-radius: 15px;
}

.recommend-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.recommend-section__title {
  display: flex;
  align-items: center;
  gap: 18px;
}

.recommend-section__title strong,
.recommend-section__title span {
  position: relative;
  padding-bottom: 11px;
  font-size: 17px;
}

.recommend-section__title span {
  color: #999;
}

.recommend-section__title strong::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: #111;
}

.recommend-section__category {
  display: flex;
  gap: 13px;
}

.recommend-section__category button {
  padding: 9px 20px;
  background: #f5f7fa;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
}

.recommend-section__category button:hover {
  color: #fff;
  background: #268df2;
}

.recommend-card-list {
  position: relative;
  margin-top: 55px;
  padding: 0 50px;
}

.recommend-card-list__items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
}

.recommend-card {
  min-width: 0;
  text-align: center;
}

.recommend-card__image {
  width: 120px;
  height: 150px;
  margin: 0 auto 12px;
  background:
    linear-gradient(145deg, #f7d9df, #ecdde8 60%, #fff);
  border-radius: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.09);
}

.recommend-card:nth-child(2) .recommend-card__image {
  background: linear-gradient(145deg, #b9edd7, #4ee1ad);
}

.recommend-card:nth-child(3) .recommend-card__image {
  background: repeating-linear-gradient(
    0deg,
    #292929 0,
    #292929 13px,
    #777 13px,
    #777 19px
  );
}

.recommend-card:nth-child(4) .recommend-card__image {
  background:
    radial-gradient(circle at 50% 55%, #26bdea 0 35%, transparent 36%),
    #f8f5f7;
}

.recommend-card:nth-child(5) .recommend-card__image {
  background: linear-gradient(145deg, #fff 30%, #e84086);
}

.recommend-card__badge {
  display: inline-block;
  padding: 2px 9px;
  color: #fff;
  background: #ff3482;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 700;
  text-transform: lowercase;
}

.recommend-card__name {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.35;
}

.recommend-card__description {
  margin-top: 19px;
  color: #666;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: -0.4px;
}

.recommend-card-list__arrow {
  position: absolute;
  top: 60px;
  z-index: 2;
  color: #555;
  font-size: 40px;
  font-weight: 200;
}

.recommend-card-list__arrow--prev {
  left: 4px;
}

.recommend-card-list__arrow--next {
  right: 4px;
}


/* =========================
   Promotion section
========================= */

.promotion-section {
  grid-column: 1 / -1;
}

.promotion-section__top {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.promotion-banner {
  position: relative;
  min-height: 274px;
  padding: 31px 25px;
  overflow: hidden;
  border-radius: 14px;
}

.promotion-banner--blue {
  background: #d9f2ff;
}

.promotion-banner--purple {
  background: #e7e0ff;
}

.promotion-banner__category {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
}

.promotion-banner__category::after {
  content: "〉";
  margin-left: 7px;
  font-size: 15px;
}

.promotion-banner h3 {
  position: relative;
  z-index: 2;
  font-size: 25px;
  line-height: 1.17;
  letter-spacing: -1.2px;
}

.promotion-banner p {
  position: relative;
  z-index: 2;
  margin-top: 10px;
  color: #555;
  font-size: 14px;
}

.promotion-banner__image {
  position: absolute;
  right: 45px;
  bottom: 42px;
  width: 105px;
  height: 110px;
}

.promotion-banner--blue .promotion-banner__image {
  background:
    radial-gradient(circle at 15px 20px, #f4c532 0 10px, transparent 11px),
    radial-gradient(circle at 80px 11px, #f4c532 0 9px, transparent 10px),
    linear-gradient(135deg, transparent 44%, #bec7d1 45% 55%, transparent 56%);
}

.promotion-banner--blue .promotion-banner__image::after {
  content: "1  2  3\A 4  5  6\A 7  8  9";
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 18px 10px;
  color: #111;
  background: #f4f5f7;
  border: 4px solid #d4dae1;
  border-radius: 7px;
  font-size: 10px;
  line-height: 1.7;
  white-space: pre;
}

.promotion-banner--purple .promotion-banner__image {
  width: 100px;
  height: 100px;
  background: #7736db;
  border: 10px solid #8a4cf0;
  border-radius: 50%;
  box-shadow: 0 16px 16px rgba(75, 32, 170, 0.16);
}

.promotion-banner--purple .promotion-banner__image::after {
  content: "일일\A특가";
  position: absolute;
  inset: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: pre;
}

/* =========================
   문의 상세 페이지
========================= */

.board-title {
  margin-bottom: 30px;

  font-size: 30px;
  font-weight: 700;
  color: #222;
}

.board-detail {
  width: 100%;
  padding: 60px 20px 100px;
  background: #fff;
}

.board-detail__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}


/* 상단 테이블 */

.board-detail__header {
  border-top: 2px solid #222;
}

.board-detail__head-row,
.board-detail__summary {
  display: grid;
  grid-template-columns: 1fr 150px 120px;
  align-items: center;
}

.board-detail__head-row {
  min-height: 62px;
  border-bottom: 1px solid #333;

  font-size: 14px;
  text-align: center;
  color: #222;
}

.board-detail__summary {
  min-height: 68px;
  border-bottom: 1px solid #e5e5e5;
}

.board-detail__summary #title {
  margin: 0;
  padding-left: 24px;

  font-size: 14px;
  font-weight: 400;
  color: #222;
}

.board-detail__date {
  font-size: 14px;
  text-align: center;
  color: #999;
}

.board-detail__status {
  font-size: 14px;
  text-align: center;
  color: #248cff;
}


/* 본문 */

.board-detail__content {
  padding: 30px 28px 0;
  background: #fafafa;
}

.board-detail__category {
  display: flex;
  align-items: center;
  gap: 10px;

  margin-bottom: 28px;

  font-size: 13px;
  color: #999;
}

.board-detail__category-arrow {
  font-size: 20px;
  color: #bbb;
}


/* 질문 */

.board-detail__question {
  display: flex;
  align-items: flex-start;
  gap: 14px;

  padding: 10px 0 30px;
}

.board-detail__profile {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 24px;
  height: 24px;

  border-radius: 50%;

  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.board-detail__profile--question {
  background: #248cff;
}

.board-detail__profile--answer {
  background: #2c69ad;
}

.board-detail__message {
  flex: 1;
  min-width: 0;
}

.board-detail__message #content {
  margin: 1px 0 0;

  font-size: 14px;
  line-height: 1.8;
  color: #333;

  white-space: pre-wrap;
}


/* 문의 수정 / 삭제 */

.board-detail__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;

  padding: 0 0 28px;
}


/* 기존 JS가 버튼을 동적으로 생성해도 적용 */

.board-detail__actions button,
.board-detail__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 76px;
  height: 38px;
  padding: 0 16px;

  border: 1px solid #ddd;
  border-radius: 4px;

  background: #fff;

  font-size: 13px;
  color: #333;
}

.board-detail__actions button:hover,
.board-detail__actions a:hover {
  background: #f5f5f5;
}


/* 답변 */

.board-detail__reply {
  padding: 26px 0 32px;
  border-top: 1px solid #e5e5e5;
}

.board-detail__reply-title {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 18px;
}

.board-detail__reply-title h3 {
  margin: 0;

  font-size: 14px;
  font-weight: 500;
  color: #222;
}

.board-detail__reply-content {
  padding-left: 38px;
}

.board-detail__reply-content #reply-content {
  margin: 0;

  font-size: 14px;
  line-height: 1.9;
  color: #555;

  white-space: pre-wrap;
}


/* 답변 작성 폼 */

.board-detail__reply-form {
  margin: 24px 0 0 38px;
}

.board-detail__reply-form textarea {
  display: block;

  width: 100%;
  min-height: 130px;
  padding: 16px;

  border: 1px solid #ddd;
  border-radius: 6px;

  background: #fff;

  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: #222;

  resize: vertical;

  outline: none;
}

.board-detail__reply-form textarea:focus {
  border-color: #248cff;
}

.board-detail__reply-submit {
  display: block;

  min-width: 90px;
  height: 42px;
  margin: 12px 0 0 auto;
  padding: 0 18px;

  border: 0;
  border-radius: 4px;

  background: #248cff;

  font-size: 14px;
  color: #fff;
}


/* 답변 삭제 */

.board-detail__reply-delete {
  display: block;

  min-width: 90px;
  height: 38px;
  margin: 12px 0 0 auto;
  padding: 0 16px;

  border: 1px solid #ddd;
  border-radius: 4px;

  background: #fff;

  font-size: 13px;
  color: #d33;
}


/* 목록 버튼 */

.board-detail__bottom {
  display: flex;
  justify-content: center;

  padding: 45px 0 55px;
}

.board-detail__list-btn {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 120px;
  height: 46px;

  border: 1px solid #222;
  border-radius: 4px;

  background: #fff;

  font-size: 14px;
  color: #222;
}

.board-detail__list-btn:hover {
  background: #222;
  color: #fff;
}


/* 반응형 */

@media (max-width: 768px) {

  .board-detail {
    padding: 35px 16px 70px;
  }

  .board-detail__head-row,
  .board-detail__summary {
    grid-template-columns: 1fr 90px 80px;
  }

  .board-detail__summary #title {
    padding-left: 12px;
  }

  .board-detail__content {
    padding: 24px 16px 0;
  }

  .board-detail__reply-content {
    padding-left: 0;
  }

  .board-detail__reply-form {
    margin-left: 0;
  }
}

/* =========================
   문의 게시판 리스트
========================= */

/* detail의 board-detail__summary 그대로 사용 */
.board-list__item {
  text-decoration: none;
  color: inherit;

  transition: background 0.2s;
}

.board-list__item:hover {
  background: #fafafa;
}


/* 제목 */
.board-list__title {
  min-width: 0;
  padding-left: 24px;

  overflow: hidden;

  font-size: 14px;
  color: #222;

  white-space: nowrap;
  text-overflow: ellipsis;
}

.board-list__item:hover .board-list__title {
  text-decoration: underline;
}


/* =========================
   게시글 없음
========================= */

.board-list__empty {
  padding: 70px 20px;

  border-bottom: 1px solid #e5e5e5;

  font-size: 14px;
  text-align: center;
  color: #999;
}


/* =========================
   리스트 하단
========================= */

.board-list__bottom {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 110px;
}


/* 문의하기 */
.board-list__write-btn {
  position: absolute;
  top: 30px;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 110px;
  height: 44px;

  border: 1px solid #222;
  border-radius: 4px;

  background: #222;

  font-size: 14px;
  color: #fff;
}

.board-list__write-btn:hover {
  background: #000;
}
/* 답변 완료 */
.board-list__status--complete {
  color: #248cff;
  font-weight: 500;
}


/* 문의하기 버튼 */
.board-list__write-btn {
  position: absolute;
  top: 30px;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 110px;
  height: 44px;

  border: 1px solid #248cff;
  border-radius: 4px;

  background: #248cff;

  font-size: 14px;
  color: #fff;
}

.board-list__write-btn:hover {
  background: #087af5;
  border-color: #087af5;
}


/* 페이지네이션 현재 페이지 */
.board-list__pagination .active {
  background: #248cff;
  color: #fff;
}


/* =========================
   페이지네이션
========================= */

.board-list__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.board-list__pagination button,
.board-list__pagination a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border: 0;
  border-radius: 50%;

  background: transparent;

  font-size: 13px;
  color: #777;
}

.board-list__pagination button:hover,
.board-list__pagination a:hover {
  background: #f5f5f5;
}

.board-list__pagination .active {
  background: #222;
  color: #fff;
}


/* =========================
   반응형
========================= */

@media (max-width: 768px) {

  .board-list__title {
    padding-left: 12px;
  }

  .board-list__bottom {
    padding-top: 65px;
  }

  .board-list__write-btn {
    top: 20px;
  }
}

/* =========================
   문의 작성
========================= */

.board-write {
  width: 100%;
  padding: 60px 20px 100px;
  background: #fff;
}

.board-write__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}


/* =========================
   꼭 확인하세요
========================= */

.board-write__notice {
  margin-bottom: 28px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.board-write__section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 80px;
}

.board-write__section-title h3 {
  font-size: 20px;
  font-weight: 700;
  color: #111;
}

.board-write__toggle {
  position: relative;

  width: 40px;
  height: 40px;
}

.board-write__toggle span {
  display: block;

  width: 18px;
  height: 18px;

  border-top: 2px solid #222;
  border-left: 2px solid #222;

  transform: rotate(45deg);
}

.board-write__notice-content {
  padding: 26px 15px;
  border-top: 1px solid #ddd;
}

.board-write__notice-content p {
  margin-bottom: 12px;

  font-size: 14px;
  line-height: 1.7;
  color: #666;
}

.board-write__notice-content p:last-child {
  margin-bottom: 0;
}

.board-write__notice-content a {
  color: #248cff;
}


/* =========================
   섹션 공통
========================= */

.board-write__section {
  margin-top: 34px;
}

.board-write__title {
  padding-bottom: 14px;

  border-bottom: 1px solid #777;

  font-size: 21px;
  font-weight: 700;
  color: #111;
}


/* =========================
   입력폼 공통
========================= */

.board-write__form {
  width: 100%;
}

.board-write__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 26px;

  align-items: center;

  padding: 16px 0;
}

.board-write__row--top {
  align-items: flex-start;
}

.board-write__row label,
.board-write__label {
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

.board-write__row input[type="text"],
.board-write__row input[type="tel"],
.board-write__row select,
.board-write__row textarea {
  width: 100%;

  border: 0;

  background: #f5f5f5;

  font-family: inherit;
  font-size: 15px;
  color: #222;

  outline: none;
}

.board-write__row input[type="text"],
.board-write__row input[type="tel"],
.board-write__row select {
  height: 46px;
  padding: 0 14px;
}

.board-write__row input:focus,
.board-write__row textarea:focus,
.board-write__row select:focus {
  outline: 1px solid #248cff;
}


/* textarea */

.board-write__row--textarea {
  align-items: flex-start;
}

.board-write__textarea-wrap {
  position: relative;
}

.board-write__textarea-wrap textarea {
  min-height: 190px;
  padding: 16px;

  resize: vertical;
}

.board-write__count {
  margin-top: 8px;

  font-size: 13px;
  text-align: right;
  color: #777;
}


/* =========================
   개인정보
========================= */

.board-write__field {
  width: 100%;
}

.board-write__guide {
  margin-bottom: 12px;

  font-size: 16px;
  color: #248cff;
}

.board-write__select-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;

  margin-bottom: 16px;
}

.board-write__select-option input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;
}

.board-write__select-option span {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 46px;

  border: 1px solid #ccc;
  border-radius: 3px;

  background: #fff;

  font-size: 15px;
  color: #333;

  cursor: pointer;
}

.board-write__select-option input:checked + span {
  border-color: #248cff;
  color: #248cff;
}


/* =========================
   이메일
========================= */

.board-write__email {
  display: grid;
  grid-template-columns: 1fr 20px 1fr;

  align-items: center;

  margin-bottom: 10px;
}

.board-write__email > span {
  text-align: center;
}

.board-write__email select {
  border: 1px solid #ddd;
  background: #fff;
}

.board-write__full-input {
  width: 100%;
}


/* =========================
   안내문
========================= */

.board-write__helper {
  margin: 6px 0 0 0;

  font-size: 13px;
  color: #666;
}


/* =========================
   개인정보 동의
========================= */

.board-write__agreement {
  border: 1px solid #ddd;
}

.board-write__agreement-summary {
  padding: 20px;

  background: #fffcf3;
}

.board-write__agreement-summary p {
  margin-bottom: 18px;

  font-size: 14px;
  line-height: 1.6;
  color: #333;
}

.board-write__agreement-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.board-write__agreement-choice label {
  display: flex;
  align-items: center;
  gap: 10px;

  font-size: 14px;
  color: #777;
}

.board-write__agreement-item {
  display: flex;
  align-items: center;

  min-height: 70px;
  padding: 0 18px;

  cursor: pointer;
}

.board-write__agreement-item input {
  position: absolute;

  opacity: 0;
}

.board-write__check {
  position: relative;

  flex-shrink: 0;

  width: 28px;
  height: 28px;
  margin-right: 14px;

  border: 2px solid #ccc;
  border-radius: 50%;
}

.board-write__agreement-item input:checked + .board-write__check {
  border-color: #248cff;
  background: #248cff;
}

.board-write__agreement-item input:checked + .board-write__check::after {
  content: "";

  position: absolute;
  top: 6px;
  left: 9px;

  width: 6px;
  height: 10px;

  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;

  transform: rotate(45deg);
}

.board-write__agreement-text {
  flex: 1;

  font-size: 16px;
  color: #222;
}

.board-write__agreement-arrow {
  font-size: 28px;
  color: #bbb;
}


/* =========================
   전자민원 이용방법
========================= */

.board-write__manual {
  margin-top: 32px;

  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.board-write__manual-button {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  min-height: 80px;

  padding: 0 8px;

  font-size: 18px;
  font-weight: 600;
  color: #222;
}

.board-write__manual-arrow {
  width: 18px;
  height: 18px;

  border-right: 2px solid #222;
  border-bottom: 2px solid #222;

  transform: rotate(45deg);
}


/* =========================
   접수
========================= */

.board-write__submit-wrap {
  display: flex;
  justify-content: center;

  padding-top: 42px;
}

.board-write__submit {
  width: 180px;
  height: 52px;

  border: 0;
  border-radius: 2px;

  background: #248cff;

  font-size: 17px;
  font-weight: 600;
  color: #fff;

  transition: background 0.2s;
}

.board-write__submit:hover {
  background: #087af5;
}


/* =========================
   반응형
========================= */

@media (max-width: 768px) {

  .board-write {
    padding: 35px 16px 70px;
  }

  .board-write__row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .board-write__select-buttons {
    grid-template-columns: 1fr 1fr;
  }

  .board-write__email {
    grid-template-columns: 1fr 20px 1fr;
  }

  .board-write__agreement-choice {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .board-write__submit {
    width: 160px;
  }
}

/* =========================
   Benefits
========================= */

.benefit-layout {
  display: grid;
  grid-template-columns: 2.1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-content: start;
}

.benefit-card {
  min-height: 375px;
  overflow: hidden;
  background: #f2f5fb;
  border-radius: 12px;
  text-align: center;
}

.benefit-card__image {
  height: 245px;
}

.benefit-card--pink .benefit-card__image {
  background:
    radial-gradient(circle at 50% 55%, #ffbf41 0 22%, transparent 23%),
    linear-gradient(145deg, #efffd1, #efffc7);
}

.benefit-card--cream .benefit-card__image {
  background:
    radial-gradient(ellipse at center, #2f3540 0 38%, transparent 39%),
    #cdd9ef;
}

.benefit-card--orange .benefit-card__image {
  background:
    radial-gradient(circle at 55% 55%, #36c7d9 0 29%, transparent 30%),
    #efffcf;
}

.benefit-card h3 {
  margin: 26px 16px 0;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.5px;
}

.benefit-card p {
  margin: 11px 15px;
  color: #555;
  font-size: 13px;
}

.service-benefit-list {
  display: grid;
  gap: 24px;
}

.service-benefit-card {
  display: flex;
  min-height: 207px;
  align-items: center;
  justify-content: space-between;
  padding: 26px 24px;
  background: #f7f8fa;
  border-radius: 13px;
}

.service-benefit-card__badge {
  display: inline-block;
  margin-bottom: 11px;
  padding: 3px 10px;
  color: #fff;
  background: #111;
  border-radius: 13px;
  font-size: 11px;
  font-weight: 700;
}

.service-benefit-card h3 {
  font-size: 23px;
  line-height: 1.14;
  letter-spacing: -1px;
}

.service-benefit-card p {
  margin-top: 11px;
  color: #555;
  font-size: 14px;
  line-height: 1.4;
}

.service-benefit-card__image {
  position: relative;
  flex: 0 0 100px;
  height: 100px;
  margin-left: 15px;
}

.service-benefit-card:nth-child(1)
.service-benefit-card__image::before {
  content: "🔔";
  position: absolute;
  font-size: 65px;
}

.service-benefit-card:nth-child(2)
.service-benefit-card__image::before {
  content: "🚙";
  position: absolute;
  font-size: 65px;
}

.service-benefit-card:nth-child(3)
.service-benefit-card__image::before {
  content: "☂️";
  position: absolute;
  font-size: 68px;
}


/* =========================
   Bottom services
========================= */

.bottom-service-section {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.bottom-service-card {
  display: flex;
  min-height: 163px;
  align-items: center;
  justify-content: space-between;
  padding: 27px 25px;
  border: 1px solid #dfe3e8;
  border-radius: 13px;
}

.bottom-service-card strong {
  display: block;
  font-size: 18px;
}

.bottom-service-card p {
  margin-top: 13px;
  color: #555;
  font-size: 14px;
}

.bottom-service-card > button {
  padding: 10px 17px;
  background: #f3f5f8;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

.bottom-service-card__menu {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22px;
}

.bottom-service-card__menu li {
  position: relative;
}

.bottom-service-card__menu li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 5px;
  right: -10px;
  width: 1px;
  height: 14px;
  background: #ddd;
}

.bottom-service-card__menu button {
  font-size: 13px;
}

.bottom-service-card--consumer {
  position: relative;
}

.bottom-service-card--consumer .bottom-service-card__image {
  width: 80px;
  height: 70px;
}

.bottom-service-card--consumer
.bottom-service-card__image::before {
  content: "🔒";
  font-size: 54px;
}


/* =========================
   Footer
========================= */

#footer {
  padding: 35px 0 45px;
  background: #f2f4f7;
  border-top: 1px solid #e5e8ec;
}

.footer-inner {
  display: flex;
  width: 1224px;
  margin: 0 auto;
  align-items: flex-end;
  justify-content: space-between;
}

.footer-info__tel {
  padding-bottom: 18px;
  font-size: 13px;
  border-bottom: 1px solid #cfd4da;
}

.footer-info__tel strong {
  margin-left: 12px;
  color: #074ba5;
  font-size: 14px;
}

.footer-menu {
  display: flex;
  gap: 19px;
  margin-top: 14px;
}

.footer-menu a {
  color: #333;
  font-size: 13px;
}

.footer-menu li:nth-child(4) a {
  color: #075ac7;
  font-weight: 700;
}

.footer-info__address,
.footer-info__copyright {
  margin-top: 17px;
  color: #666;
  font-size: 12px;
}

.footer-info__copyright {
  margin-top: 25px;
  color: #858b94;
}

.footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 65px;
}

.footer-family {
  width: 185px;
  height: 38px;
  padding: 0 13px;
  color: #666;
  background: transparent;
  border: 1px solid #aeb5bd;
}

.footer-logo {
  font-size: 25px;
  font-weight: 800;
  line-height: 0.9;
  text-align: right;
}


/* =========================
   Common states
========================= */

a,
button {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

button:focus-visible,
a:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(38, 141, 242, 0.35);
  outline-offset: 3px;
}

button:active,
.login-button:active {
  transform: translateY(1px);
}

[hidden] {
  display: none !important;
}


/* =========================
   Responsive
========================= */

@media (max-width: 1279px) {
  body {
    min-width: 1000px;
  }

  .utility-nav,
  .main-nav,
  #main,
  .footer-inner {
    width: calc(100% - 64px);
  }

  .main-nav__menu {
    gap: 35px;
  }
}

@media (max-width: 1023px) {
  body {
    min-width: 0;
  }

  .utility-nav,
  .main-nav,
  #main,
  .footer-inner {
    width: calc(100% - 40px);
  }

  .utility-nav__left {
    display: none;
  }

  .utility-nav {
    justify-content: flex-end;
  }

  .main-nav {
    height: 80px;
  }

  .logo {
    flex: 1;
  }

  .main-nav__menu {
    display: none;
  }

  #main {
    display: block;
    margin-top: 25px;
  }

  .login-box,
  .recommend-section,
  .promotion-section,
  .bottom-service-section {
    margin-top: 24px;
  }

  .main-visual__banner {
    height: 390px;
  }

  .login-box {
    height: auto;
    padding-bottom: 25px;
  }

  .recommend-card-list__items {
    grid-template-columns: repeat(3, 1fr);
  }

  .recommend-card:nth-child(n + 4) {
    display: none;
  }

  .benefit-layout {
    grid-template-columns: 1fr;
  }

  .bottom-service-section {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    align-items: flex-start;
  }
}

/* =========================
   레거시 페이지 기본 스타일
   (문의게시판/공지사항/마이페이지/회원가입 등 아직 새 디자인이 적용되지 않은 페이지 전용.
   <body class="legacy-page">가 있는 페이지에만 적용되며, index.html/login.html의
   새 디자인(#header, #main, #login-form, .login-container 등)과는 겹치지 않는다.)
========================= */

.legacy-page main {
  font-family: sans-serif;
  color: #222;
  background: #fafafa;
}

.legacy-page main {
  max-width: 640px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.legacy-page main form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 400px;
}

.legacy-page main label {
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  gap: 0.25rem;
}

.legacy-page main input,
.legacy-page main textarea {
  padding: 0.5rem;
  font-size: 1rem;
  font-family: inherit;
}

.legacy-page main textarea {
  min-height: 120px;
}

.legacy-page main button {
  padding: 0.6rem;
  background: #1a2b4c;
  color: #fff;
  border: none;
  cursor: pointer;
}

.legacy-page main .error {
  color: #c0392b;
}

.legacy-page main ul {
  list-style: none;
  padding: 0;
}

.legacy-page main li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ddd;
}

.legacy-page main .badge {
  margin-left: 0.5rem;
  font-size: 0.75rem;
  color: #666;
}

.legacy-page main .actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin: 1rem 0;
}

.legacy-page main .actions a {
  color: #1a2b4c;
}

.legacy-page main button.danger {
  background: #c0392b;
}

.legacy-page main .resident-number-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legacy-page main .resident-number-group input[name="birthDate"] {
  width: 7rem;
}

.legacy-page main .resident-number-group input[name="genderCode"] {
  width: 3rem;
  text-align: center;
}

.legacy-page main .resident-number-group .dash {
  color: #666;
}


/* =========================
   추천 카드
========================= */

.recommend-card {
  width: 100%;
  padding: 24px 16px 0;
  grid-column: 1 / -1;
}

.recommend-card__inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 24px 24px 30px;
  border: 1px solid #e2e6eb;
  border-radius: 14px;
  background: #fff;
}


/* 상단 영역 */

.recommend-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.recommend-card__tabs {
  display: flex;
  align-items: center;
  gap: 24px;
}

.recommend-card__tab {
  position: relative;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #999;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.recommend-card__tab.active {
  color: #111;
}

.recommend-card__tab.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #248cff;
  border-radius: 2px;
}


/* 오른쪽 버튼 */

.recommend-card__menu {
  display: flex;
  align-items: center;
  gap: 16px;
}

.recommend-card__menu li {
  flex-shrink: 0;
}

.recommend-card__menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 22px;
  border-radius: 999px;
  background: #f5f7fa;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.recommend-card__menu a:hover {
  background: #248cff;
  color: #fff;
}


/* 카드 영역 */

.recommend-card__content {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 60px;
  padding: 0 48px;
}

.recommend-card__list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
  gap: 24px;
}

.recommend-card__item {
  min-width: 0;
  text-align: center;
}


/* 카드 이미지 */

.recommend-card__image-box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 200px;
  margin-bottom: 18px;
}

.recommend-card__image-box img {
  display: block;
  width: auto;
  max-width: 135px;
  max-height: 192px;
  object-fit: contain;
}


/* new / hot / 캐시백 */

.recommend-card__badge {
  position: absolute;
  left: 50%;
  bottom: -6px;
  z-index: 2;
  transform: translateX(-50%);
  min-width: 38px;
  height: 21px;
  padding: 0 9px;
  border-radius: 999px;
  background: #ff2f86;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 21px;
  white-space: nowrap;
}


/* 카드 텍스트 */

.recommend-card__name {
  margin: 0 0 20px;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}

.recommend-card__description {
  min-height: 66px;
  margin: 0;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
  word-break: keep-all;
}


/* 좌우 화살표 */

.recommend-card__arrow {
  position: absolute;
  top: 90px;
  z-index: 5;
  width: 36px;
  height: 50px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.recommend-card__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border-top: 2px solid #777;
  border-right: 2px solid #777;
}

.recommend-card__arrow--prev {
  left: 5px;
}

.recommend-card__arrow--prev::before {
  left: 13px;
  transform:
    translateY(-50%)
    rotate(-135deg);
}

.recommend-card__arrow--next {
  right: 5px;
}

.recommend-card__arrow--next::before {
  right: 13px;
  transform:
    translateY(-50%)
    rotate(45deg);
}


/* =========================
   금융 / 쇼핑 배너
========================= */

.main-service-banner {
  width: 100%;
  padding: 24px 16px 70px;
  grid-column: 1 / -1;
}

.main-service-banner__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  gap: 24px;
}


/* 배너 공통 */

.service-banner {
  position: relative;
  display: flex;
  justify-content: space-between;
  min-height: 250px;
  padding: 32px 24px;
  overflow: hidden;
  border-radius: 14px;
}

.service-banner--finance {
  background: #dff3ff;
}

.service-banner--shopping {
  background: #e9e4ff;
}


.service-banner__text {
  position: relative;
  z-index: 2;
}


/* 카테고리 */

.service-banner__category {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: #111;
  font-size: 16px;
  font-weight: 700;
}

.service-banner__chevron {
  width: 8px;
  height: 8px;
  border-top: 2px solid #222;
  border-right: 2px solid #222;
  transform: rotate(45deg);
}


/* 제목 */

.service-banner__title {
  display: block;
  margin-bottom: 6px;
  color: #080808;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.8px;
}


/* 설명 */

.service-banner__description {
  color: #626262;
  font-size: 15px;
  line-height: 1.5;
}


/* 오른쪽 비주얼 */

.service-banner__visual {
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;
}


/* =========================
   금융 배너 비주얼
========================= */

.finance-calculator {
  position: absolute;
  right: 54px;
  bottom: 26px;
  width: 80px;
  padding: 6px;
  border: 4px solid #fff;
  border-radius: 6px;
  background: #d5dce3;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
}

.finance-calculator__screen {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 34px;
  margin-bottom: 5px;
  padding: 0 7px;
  border-radius: 3px;
  background: #8b9da9;
  color: #fff;
  font-size: 12px;
}

.finance-calculator__buttons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.finance-calculator__buttons span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 19px;
  border-radius: 2px;
  background: #f8f8f8;
  color: #222;
  font-size: 10px;
  font-weight: 700;
}


.finance-coin {
  position: absolute;
  display: block;
  width: 27px;
  height: 27px;
  border: 2px solid #dfaa1b;
  border-radius: 50%;
  background: #ffd84e;
  box-shadow:
    inset -4px -3px 0 rgba(190, 132, 0, 0.12),
    0 5px 7px rgba(0, 0, 0, 0.1);
}

.finance-coin--1 {
  top: 57px;
  right: 120px;
  transform: rotate(-35deg);
}

.finance-coin--2 {
  top: 112px;
  right: 138px;
  width: 24px;
  height: 24px;
}

.finance-coin--3 {
  top: 143px;
  right: 105px;
  width: 31px;
  height: 31px;
}


/* =========================
   쇼핑 배너 비주얼
========================= */

.shopping-alarm {
  position: absolute;
  right: 54px;
  bottom: 28px;
  width: 100px;
  height: 100px;
  border: 8px solid #6d29f6;
  border-radius: 50%;
  background: #fff;
  transform: rotate(8deg);
  box-shadow:
    0 9px 13px rgba(79, 38, 180, 0.18);
}

.shopping-alarm::before,
.shopping-alarm::after {
  content: "";
  position: absolute;
  top: -25px;
  width: 30px;
  height: 22px;
  border-radius: 50% 50% 8px 8px;
  background: #6d29f6;
}

.shopping-alarm::before {
  left: 2px;
  transform: rotate(-24deg);
}

.shopping-alarm::after {
  right: 2px;
  transform: rotate(24deg);
}

.shopping-alarm__text {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #6d29f6;
  font-size: 23px;
  font-weight: 900;
  line-height: 0.9;
  text-align: center;
  transform: translate(-50%, -50%);
}

.shopping-lightning {
  position: absolute;
  color: #ffcb00;
  font-size: 34px;
  font-weight: 900;
}

.shopping-lightning--1 {
  top: 60px;
  right: 145px;
  transform: rotate(-12deg);
}

.shopping-lightning--2 {
  top: 30px;
  right: 96px;
  font-size: 28px;
  transform: rotate(10deg);
}


/* =========================
   반응형
========================= */

@media (max-width: 1100px) {

  .recommend-card__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .recommend-card__menu {
    width: 100%;
    flex-wrap: wrap;
  }

  .recommend-card__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .recommend-card__item:nth-child(n + 4) {
    display: none;
  }

}


@media (max-width: 768px) {

  .recommend-card {
    padding: 15px 12px 0;
  }

  .recommend-card__inner {
    padding: 20px 14px 28px;
  }

  .recommend-card__menu {
    gap: 8px;
  }

  .recommend-card__menu a {
    padding: 0 14px;
    font-size: 12px;
  }

  .recommend-card__content {
    margin-top: 40px;
    padding: 0 30px;
  }

  .recommend-card__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
  }

  .recommend-card__item:nth-child(n + 3) {
    display: none;
  }

  .main-service-banner__inner {
    grid-template-columns: 1fr;
  }

  .service-banner {
    min-height: 210px;
  }

  .service-banner__title {
    font-size: 21px;
  }

}


@media (max-width: 480px) {

  .recommend-card__list {
    grid-template-columns: 1fr;
  }

  .recommend-card__item:nth-child(n + 2) {
    display: none;
  }

  .service-banner__visual {
    opacity: 0.75;
  }

}

/* =========================
   문의 상세 - 관리자 답변
========================= */

.board-detail__reply-form {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #e5e5e5;
}

.board-detail__reply-form textarea {
  width: 100%;
  min-height: 180px;
  padding: 20px;

  border: 1px solid #d8d8d8;
  border-radius: 12px;

  font-size: 16px;
  line-height: 1.6;
  font-family: inherit;

  resize: vertical;
  outline: none;
}

.board-detail__reply-form textarea:focus {
  border-color: #248cff;
}

.board-detail__reply-form textarea::placeholder {
  color: #aaa;
}

.board-detail__reply-form-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: 16px;
}

.board-detail__reply-count {
  font-size: 14px;
  color: #888;
}

.board-detail__reply-submit {
  min-width: 120px;
  height: 48px;
  padding: 0 24px;

  border-radius: 8px;
  background: #248cff;
  color: #fff;

  font-size: 15px;
  font-weight: 600;
}

.board-detail__reply-submit:hover {
  background: #0878ea;
}

.board-detail__reply-delete {
  margin-top: 16px;
  padding: 12px 20px;

  border: 1px solid #e54848;
  border-radius: 8px;

  color: #e54848;
  background: #fff;
}

.board-detail__reply-delete:hover {
  background: #fff5f5;
}

/* 모든 페이지의 공통 레이아웃 */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > #header, body > #footer { flex-shrink: 0; }
body > #footer { margin-top: auto; }
body > main { margin-bottom: 64px; }
#header [hidden] { display: none !important; }

/* ===== 개인정보처리방침 (임시 구현, 디자인 담당자 검토 필요) ===== */

.privacy-container {
  width: min(100% - 32px, 860px);
  margin: 40px auto 80px;
}

.privacy-title {
  margin-bottom: 12px;
  font-size: 26px;
  font-weight: 700;
}

.privacy-intro {
  margin-bottom: 28px;

  color: #444;
  font-size: 14px;
  line-height: 1.7;
}

.privacy-toc {
  margin-bottom: 32px;
  padding: 16px 20px;

  border: 1px solid #e2e2e2;
  border-radius: 10px;
  background: #fafafa;
}

.privacy-toc__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 20px;

  margin: 0;
  padding: 0;
  list-style: none;
}

/* 조항명(가변 길이)과 버튼을 한 줄에 두되, 조항명 쪽에 flex: 1을 줘서 남는 공간을
   전부 흡수하게 한다 - 이러면 조항명 길이가 제각각이어도 버튼은 항상 각 칸의
   오른쪽 끝에 붙어 세로로 가지런히 정렬된다(조항명 뒤에 고정 여백만 주는 방식은
   조항명 길이만큼 버튼 위치가 매번 달라져서 들쭉날쭉해지므로 채택하지 않음). */
.privacy-toc__item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.privacy-toc__label {
  flex: 1;
  min-width: 0;

  color: #333;
  font-size: 13px;
}

.privacy-toc__link {
  flex-shrink: 0;
  width: 76px;
  padding: 6px 0;
  box-sizing: border-box;

  border: 1px solid #248cff;
  border-radius: 6px;
  background: #fff;

  color: #248cff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.privacy-toc__link:hover {
  background: #248cff;
  color: #fff;
}

.privacy-body {
  color: #333;
}

.privacy-article {
  padding: 24px 0;
  border-bottom: 1px solid #eee;
  scroll-margin-top: 100px;
}

.privacy-article:last-child {
  border-bottom: none;
}

.privacy-article__title {
  margin-bottom: 12px;
  font-size: 17px;
  font-weight: 700;
}

.privacy-article__content p,
.privacy-article__content li {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.7;
}

.privacy-article__content ol,
.privacy-article__content ul {
  margin: 8px 0 8px 20px;
}

.privacy-article__content ul {
  margin-top: 6px;
}

.privacy-article__table {
  width: 100%;
  margin: 12px 0;
  border-collapse: collapse;
  font-size: 13px;
}

.privacy-article__table th,
.privacy-article__table td {
  padding: 10px 12px;
  border: 1px solid #e2e2e2;
  text-align: left;
}

.privacy-article__table th {
  background: #f5f5f5;
  font-weight: 600;
  white-space: nowrap;
}

.privacy-top-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;

  width: 48px;
  height: 48px;

  border: none;
  border-radius: 50%;
  background: #248cff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  color: #fff;
  font-size: 12px;
  cursor: pointer;
}

.privacy-top-btn:hover {
  background: #147dea;
}

@media (max-width: 640px) {
  .privacy-toc__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: max-content;

    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }

  /* 가로 스크롤 칸 안에서는 li가 내용 너비만큼만 차지하므로(max-content), 조항명이
     줄바꿈되지 않게 하고 버튼도 줄어들거나 잘리지 않도록 고정한다. */
  .privacy-toc__item {
    flex-wrap: nowrap;
  }

  .privacy-toc__label {
    white-space: nowrap;
  }

  .privacy-toc__link {
    flex-shrink: 0;
  }
}

/* ===== 개인정보처리방침 끝 ===== */

/* ===== 약관 동의 (임시 구현, 디자인 담당자 검토 필요) ===== */

.terms-container {
  width: min(100% - 32px, 720px);
  margin: 40px auto 120px;
}

.terms-title {
  margin-bottom: 12px;
  font-size: 26px;
  font-weight: 700;
}

.terms-intro {
  margin-bottom: 24px;

  color: #444;
  font-size: 14px;
  line-height: 1.7;
}

.terms-auth-tabs {
  display: flex;
  gap: 28px;
  margin-bottom: 32px;

  border-bottom: 1px solid #e2e2e2;
}

.terms-auth-tab {
  padding: 12px 2px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;

  color: #999;
  font-size: 15px;
  font-weight: 600;
  cursor: default;
}

.terms-auth-tab--active {
  border-bottom-color: #248cff;

  color: #248cff;
  cursor: default;
}

.terms-agree-all {
  padding: 16px 18px;
  margin-bottom: 8px;

  border: 1px solid #248cff;
  border-radius: 10px;
  background: #f3f8ff;
}

.terms-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  cursor: pointer;
}

.terms-checkbox input[type='checkbox'] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.terms-checkbox--all .terms-checkbox__label {
  font-size: 15px;
  font-weight: 700;
}

.terms-checkbox__label {
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.terms-tag {
  display: inline-block;
  margin-right: 6px;

  font-size: 12px;
  font-weight: 700;
}

.terms-tag--required {
  color: #248cff;
}

.terms-tag--optional {
  color: #888;
}

.terms-list {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.terms-item {
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}

.terms-item:last-child {
  border-bottom: none;
}

.terms-detail {
  margin: 10px 0 0 28px;
}

.terms-detail__summary {
  color: #248cff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.terms-detail__summary::-webkit-details-marker {
  display: none;
}

.terms-detail__body {
  max-height: 220px;
  margin-top: 10px;
  padding: 14px 16px;
  overflow-y: auto;

  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fafafa;

  color: #555;
  font-size: 13px;
  line-height: 1.7;
}

.terms-detail__body p {
  margin: 0 0 10px;
}

.terms-detail__body ol {
  margin: 0 0 10px 18px;
  padding: 0;
}

.terms-detail__body li {
  margin-bottom: 6px;
}

.terms-privacy-link {
  color: #248cff;
  font-weight: 600;
  text-decoration: underline;
}

.terms-actions {
  margin-top: 28px;
  text-align: center;
}

.terms-next-btn {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-radius: 8px;
  background: #248cff;

  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.terms-next-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .terms-auth-tabs {
    gap: 16px;
  }

  .terms-detail {
    margin-left: 0;
  }
}

/* 보안 표시 배지 - 재사용을 위해 terms- 가 아닌 secure-badge 접두사를 별도로 사용.
   평소에는 아이콘만 보이는 정사각형이고, hover 시 왼쪽으로 펼쳐지며 문구가 나타난다. */
.secure-badge {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;

  display: flex;
  align-items: center;
  overflow: hidden;

  height: 40px;
  padding: 0;

  border-radius: 20px;
  background: #248cff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);

  transition: padding-right 0.25s ease;
}

.secure-badge:hover {
  padding-right: 14px;
}

.secure-badge__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
}

.secure-badge__icon-svg {
  width: 20px;
  height: 20px;
  color: #fff;
}

.secure-badge__text {
  overflow: hidden;
  white-space: nowrap;

  max-width: 0;
  opacity: 0;

  color: #fff;
  font-size: 12px;
  font-weight: 600;

  transition: max-width 0.25s ease, opacity 0.2s ease 0.05s;
}

.secure-badge:hover .secure-badge__text {
  max-width: 140px;
  opacity: 1;
}

@media (max-width: 480px) {
  .secure-badge {
    display: none;
  }
}

/* ===== 약관 동의 끝 ===== */

/* ===== 카드 신청 (임시 구현, 디자인 담당자 검토 필요) ===== */

.card-container {
  width: min(100% - 32px, 720px);
  margin: 40px auto 120px;
}

.card-title {
  margin-bottom: 8px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.card-intro {
  margin-bottom: 28px;

  color: #444;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.card-section {
  margin-bottom: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid #eee;
}

.card-section:last-of-type {
  border-bottom: none;
}

.card-section__title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 700;
}

.card-field {
  display: block;
  margin-bottom: 16px;
}

.card-field__label {
  display: block;
  margin-bottom: 6px;

  color: #333;
  font-size: 13px;
  font-weight: 600;
}

.card-field input[type='text'],
.card-field input[type='password'],
.card-field select {
  width: 100%;
  padding: 10px 12px;
  box-sizing: border-box;

  border: 1px solid #ddd;
  border-radius: 8px;

  font-size: 14px;
}

.card-field--zip input {
  max-width: 160px;
}

.card-field__notice {
  margin-top: 6px;

  color: #888;
  font-size: 12px;
}

.card-field__error {
  margin-top: 6px;

  color: #d33;
  font-size: 12px;
}

.card-rrn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-rrn-group input {
  width: 100%;
  padding: 10px 12px;
  box-sizing: border-box;

  border: 1px solid #ddd;
  border-radius: 8px;

  font-size: 14px;
  letter-spacing: 1px;
}

.card-rrn-dash {
  flex-shrink: 0;
  color: #999;
}

.card-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;

  color: #444;
  font-size: 13px;
  font-weight: 400;
}

.card-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.card-checkbox input[type='checkbox'] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.card-checkbox__label {
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.card-tag {
  display: inline-block;
  margin-right: 6px;

  font-size: 12px;
  font-weight: 700;
}

.card-tag--required {
  color: #248cff;
}

.card-consent-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.card-consent-item {
  padding: 14px 0;
  border-bottom: 1px solid #eee;
}

.card-consent-item:last-child {
  border-bottom: none;
}

.card-detail {
  margin: 10px 0 0 28px;
}

.card-detail__summary {
  color: #248cff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.card-detail__summary::-webkit-details-marker {
  display: none;
}

.card-detail__body {
  max-height: 220px;
  margin-top: 10px;
  padding: 14px 16px;
  overflow-y: auto;

  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fafafa;

  color: #555;
  font-size: 13px;
  line-height: 1.7;
}

.card-detail__body p {
  margin: 0 0 10px;
}

.card-actions {
  margin-top: 12px;
  text-align: center;
}

.card-submit-btn {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-radius: 8px;
  background: #248cff;

  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.card-submit-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.card-disclaimer {
  margin-top: 20px;

  color: #aaa;
  font-size: 11px;
  text-align: center;
}

.card-complete {
  padding: 60px 20px;
  text-align: center;
}

.card-complete__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #248cff;

  color: #fff;
  font-size: 26px;
}

.card-complete__title {
  margin-bottom: 12px;
  font-size: 22px;
  font-weight: 700;
}

.card-complete__desc {
  margin-bottom: 28px;

  color: #666;
  font-size: 14px;
  line-height: 1.7;
}

.card-complete__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.card-complete__button {
  padding: 12px 24px;
  border: 1px solid #ddd;
  border-radius: 8px;

  color: #444;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.card-complete__button--primary {
  border-color: #248cff;
  background: #248cff;
  color: #fff;
}

@media (max-width: 480px) {
  .card-complete__actions {
    flex-direction: column;
  }
}

/* 카드 신청(약관 동의 단계, card-apply-terms.html)에서 추가로 필요해진 규칙 —
   기존 규칙은 그대로 두고 이어서 추가만 한다. */
.card-agree-all {
  padding: 16px 18px;
  margin-bottom: 8px;

  border: 1px solid #248cff;
  border-radius: 10px;
  background: #f3f8ff;
}

.card-checkbox--all .card-checkbox__label {
  font-size: 15px;
  font-weight: 700;
}

.card-tag--optional {
  color: #888;
}

.card-privacy-link {
  color: #248cff;
  font-weight: 600;
  text-decoration: underline;
}

/* 카드 신청 흐름에서 회원가입 잔재(카드 재선택 UI, 단계 표시)를 정리하며
   새로 필요해진 "신청 카드" 요약 블록 — 기존 규칙은 그대로 두고 추가만 한다. */
.card-selected {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 16px;

  border: 1px solid #e2e2e2;
  border-radius: 10px;
  background: #fafafa;
}

.card-selected__image {
  width: 48px;
  flex-shrink: 0;
  border-radius: 6px;
}

.card-selected__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-selected__label {
  color: #888;
  font-size: 12px;
}

.card-selected__name {
  font-size: 15px;
  font-weight: 700;
}

.card-selected__hint {
  color: #999;
  font-size: 11px;
}

/* card-apply-terms.html을 실제 카드사 약관 구조(그룹 제목·동의등급 표시)로
   재작성하며 추가된 규칙 — 기존 규칙은 그대로 두고 이어서 추가만 한다. */
.card-consent-group {
  margin-bottom: 28px;
}

.card-consent-group__title {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.card-consent-notice {
  margin-top: 10px;
  color: #888;
  font-size: 12px;
}

.card-agree-grade {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f0f0f0;

  color: #777;
  font-size: 11px;
  font-weight: 600;
}

/* card-apply-terms.html을 그룹 단위 아코디언(접기/펼치기) 구조로 바꾸며 추가된 규칙 —
   기존 규칙은 그대로 두고 이어서 추가만 한다. 그룹 헤더는 네이티브 details/summary를
   써서 키보드 조작·펼침 상태 안내를 브라우저가 기본 제공하게 했다. */
.card-consent-group__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.card-consent-group__summary::-webkit-details-marker {
  display: none;
}

/* .card-consent-group__title의 기존 margin-bottom:10px는 원래 바로 아래 목록과의
   간격용이었는데, 이제 summary 안에서 화살표와 한 줄로 정렬해야 해서 이 컨텍스트에서만
   상쇄한다(기존 규칙 자체는 다른 곳에서 그대로 유지됨). */
.card-consent-group__summary .card-consent-group__title {
  margin-bottom: 0;
}

.card-consent-group__chevron {
  flex-shrink: 0;
  color: #999;
  font-size: 18px;
  line-height: 1;
  transition: transform 0.15s;
}

.card-consent-group__chevron::before {
  content: '\203A';
}

.card-consent-group__panel[open] > .card-consent-group__summary .card-consent-group__chevron {
  transform: rotate(90deg);
}

.card-consent-group__panel > .card-consent-list {
  margin-top: 14px;
}

.card-agree-all__notice {
  margin-top: 8px;
  color: #6b91c9;
  font-size: 12px;
}

/* 하위 항목이 여러 개라 일괄 선택이 의미 있는 그룹(카드신청 관련 안내 및 필수 동의,
   카드신청 관련 선택 동의)에만 붙는 그룹 체크박스. summary 바깥(형제 요소)에 둬서
   체크박스를 눌러도 그룹이 펼쳐지거나 접히지 않는다. */
.card-consent-group__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* .card-consent-group__item-checkbox는 하위 항목이 1개뿐이라 그룹 자체가 곧 동의
   항목인 경우(개인(신용)정보 요약동의서 필수/선택, 제3자 제공 동의, 상품 설명서
   확인) 쓴다 - 여러 하위 항목을 묶어서 체크하는 .card-consent-group__checkbox와
   달리 그 체크박스 자신이 유일한 동의 대상이다. 크기/위치는 동일하게 맞춘다. */
.card-consent-group__checkbox,
.card-consent-group__item-checkbox {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  cursor: pointer;
}

.card-consent-group__header .card-consent-group__panel {
  flex: 1;
  min-width: 0;
}

/* 그룹 제목 바로 아래 펼쳐지는 전문 내용 — 기존 .card-detail__body(항목별 중첩
   "전문 보기")와 같은 느낌으로 스타일링하되, 그룹=항목 구조에서는 중첩 토글 없이
   그룹을 펼치면 바로 보이는 내용이라 별도 클래스로 둔다. */
.card-consent-group__body {
  max-height: 280px;
  margin-top: 14px;
  padding: 14px 16px;
  overflow-y: auto;

  border: 1px solid #e2e2e2;
  border-radius: 8px;
  background: #fafafa;

  color: #555;
  font-size: 13px;
  line-height: 1.7;
}

.card-consent-group__body p {
  margin: 0 0 10px;
}

.card-consent-group__panel > .card-consent-notice {
  margin-top: 10px;
}

/* 그룹=항목 구조인 4개 그룹(개인(신용)정보 요약동의서 필수/선택, 제3자 제공 동의,
   상품 설명서 확인)을 하위 항목(.card-checkbox__label)과 같은 타이포그래피로 맞춘다 -
   하위 항목을 거느리는 그룹(카드신청 관련 안내 및 필수 동의/선택 동의)은 이 클래스를
   안 붙여서 기존 굵은 그룹 제목 스타일을 그대로 유지한다. */
.card-consent-group--flat .card-consent-group__title {
  font-size: 14px;
  font-weight: 400;
  color: #333;
}

.card-consent-group--flat .card-consent-group__summary {
  gap: 10px;
}

.card-consent-group--flat .card-consent-group__item-checkbox {
  margin-top: 1px;
}

/* 전문 보기 본문 안에 체크박스가 있는 하위 동의 목록(고유식별정보/신용정보 조회
   동의) — 기존 .card-detail__body의 <ol> 설명과 구분되도록 점선으로 구획한다. */
.card-detail__sub-consent-list {
  margin: 10px 0;
  padding: 0;
  list-style: none;
}

.card-detail__sub-consent-item {
  padding: 8px 0;
  border-top: 1px dashed #ddd;
}

.card-detail__sub-consent-item:first-child {
  border-top: none;
}

.card-detail__sub-consent-desc {
  margin: 6px 0 0 28px;
  color: #777;
  font-size: 12px;
  line-height: 1.6;
}

/* 고유식별정보/신용정보 조회 동의 설명을 안내 문장 + 법정 고지 항목 목록으로
   늘리면서 추가 - 목록이 좁은 들여쓰기 공간 안에 들어가므로 브라우저 기본
   ol 여백(약 40px)보다 좁게 잡는다. */
.card-detail__sub-consent-desc p {
  margin: 0 0 6px;
}

.card-detail__sub-consent-desc ol {
  margin: 0;
  padding-left: 18px;
}

.card-detail__sub-consent-desc li {
  margin-bottom: 4px;
}

.card-detail__sub-consent-desc li:last-child {
  margin-bottom: 0;
}

/* card-apply.html에 이름 자동 채우기·영문이름(카드 각인용)·각인 미리보기를 추가하며
   새로 필요해진 규칙 — 기존 규칙은 그대로 두고 이어서 추가만 한다. */
.card-field input:disabled {
  background: #f5f5f5;
  color: #888;
  cursor: not-allowed;
}

.card-name-en-counter {
  display: block;
  margin-top: 6px;
  text-align: right;

  color: #999;
  font-size: 11px;
}

.card-emboss-preview {
  margin: 4px 0 16px;
  padding: 20px 18px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #232838, #3a4160);
}

.card-emboss-preview__label {
  display: block;
  margin-bottom: 18px;

  color: rgba(255, 255, 255, 0.6);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.card-emboss-preview__name {
  margin: 0;

  color: #fff;
  font-family: 'Courier New', monospace;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2.5px;
  word-break: break-all;
}

.card-emboss-preview__name--placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* ===== 카드 신청 끝 ===== */

/* ===== 카드 상세 (임시 구현, 디자인 담당자 검토 필요) ===== */

/* 메인페이지 추천카드 목록(li.recommend-card__item)을 클릭 가능하게 감싸는
   앵커에만 적용되는 리셋. .recommend-card__* 기존 클래스/스타일은 건드리지
   않는다. */
.card-detail-recommend-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-detail-container {
  width: min(100% - 32px, 860px);
  margin: 40px auto 140px;
}

.card-detail-hero {
  display: flex;
  gap: 32px;
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid #eee;
}

.card-detail-hero__image {
  flex-shrink: 0;
  width: 220px;
}

.card-detail-hero__image img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.card-detail-hero__badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f8ff;

  color: #248cff;
  font-size: 12px;
  font-weight: 700;
}

.card-detail-name {
  margin-bottom: 8px;
  font-size: 28px;
  font-weight: 700;
}

.card-detail-tagline {
  margin-bottom: 20px;

  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.card-detail-apply-btn {
  padding: 14px 32px;
  border: none;
  border-radius: 8px;
  background: #248cff;
  box-shadow: 0 6px 16px rgba(36, 140, 255, 0.35);

  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.card-detail-apply-btn:hover {
  background: #147dea;
}

.card-detail-section-title {
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 700;
}

.card-detail-fee {
  margin-bottom: 40px;
}

.card-detail-fee__list {
  margin: 0;
  padding: 16px 20px;

  border: 1px solid #e2e2e2;
  border-radius: 10px;
  background: #fafafa;
}

.card-detail-fee__row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;

  font-size: 14px;
}

.card-detail-fee__row + .card-detail-fee__row {
  border-top: 1px solid #eee;
}

.card-detail-fee__row dt {
  color: #666;
}

.card-detail-fee__row dd {
  margin: 0;
  font-weight: 700;
}

.card-detail-benefits {
  margin-bottom: 40px;
}

.card-detail-benefit-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;

  margin: 0;
  padding: 0;
  list-style: none;
}

.card-detail-benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;

  border: 1px solid #e2e2e2;
  border-radius: 10px;
}

.card-detail-benefit__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;

  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f8ff;

  color: #248cff;
}

.card-detail-benefit__icon svg {
  width: 20px;
  height: 20px;
}

.card-detail-benefit__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-detail-benefit__text strong {
  font-size: 14px;
}

.card-detail-benefit__text span {
  color: #888;
  font-size: 12px;
}

.card-detail-legal {
  padding: 20px;

  border: 1px solid #e2e2e2;
  border-radius: 10px;
  background: #fafafa;
}

.card-detail-legal-list {
  margin: 0 0 16px;
  padding: 0 0 0 18px;
}

.card-detail-legal__item {
  margin-bottom: 10px;

  color: #555;
  font-size: 12.5px;
  line-height: 1.7;
}

.card-detail-legal__review {
  margin-bottom: 10px;

  color: #999;
  font-size: 12px;
}

.card-detail-legal__warning {
  margin: 0;
  padding: 10px 14px;
  border-left: 3px solid #d33;

  color: #d33;
  font-size: 13px;
  font-weight: 700;
}

.card-detail-sticky-bar {
  position: sticky;
  bottom: 0;
  z-index: 30;

  border-top: 1px solid #e2e2e2;
  background: #fff;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}

.card-detail-sticky-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  width: min(100% - 32px, 860px);
  margin: 0 auto;
  padding: 14px 0;
}

.card-detail-sticky-bar__name {
  color: #333;
  font-size: 14px;
  font-weight: 700;
}

.card-detail-sticky-bar__btn {
  padding: 12px 28px;
  border: none;
  border-radius: 8px;
  background: #248cff;

  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.card-detail-sticky-bar__btn:hover {
  background: #147dea;
}

@media (max-width: 640px) {
  .card-detail-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-detail-hero__image {
    width: 160px;
    margin: 0 auto;
  }

  .card-detail-benefit-list {
    grid-template-columns: 1fr;
  }

  .card-detail-sticky-bar__name {
    display: none;
  }

  .card-detail-sticky-bar__inner {
    justify-content: center;
  }
}

/* ===== 카드 상세 끝 ===== */

/* ===== 마이페이지 재인증 (임시 구현, 디자인 담당자 검토 필요) ===== */

.reauth-container {
  width: min(100% - 32px, 420px);
  margin: 60px auto 140px;
}

.reauth-title {
  margin-bottom: 12px;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
}

.reauth-intro {
  margin-bottom: 28px;

  color: #444;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.reauth-field {
  display: block;
  margin-bottom: 20px;

  color: #333;
  font-size: 13px;
  font-weight: 600;
}

.reauth-field input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  box-sizing: border-box;

  border: 1px solid #ddd;
  border-radius: 8px;

  font-size: 14px;
}

.reauth-submit-btn {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-radius: 8px;
  background: #248cff;

  color: #fff;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/* ===== 마이페이지 재인증 끝 ===== */

/* ===== 마이페이지 읽기전용 전환 (임시 구현, 디자인 담당자 검토 필요) ===== */

/* 이름/전화번호/이메일의 input과 "수정" 버튼을 한 컨테이너로 묶어, 버튼을 입력칸
   오른쪽 안쪽에 배치한다(#mypage-form input 기존 규칙은 그대로 두고, 이 래퍼
   안에서만 오른쪽 여백을 넉넉히 줘서 마스킹된 값과 버튼이 겹치지 않게 함). */
.mypage-field-edit {
  position: relative;
  display: block;
}

.mypage-field-edit input {
  padding-right: 76px;
}

/* "수정" 버튼은 실제로는 동작하지 않지만(클릭 시 mypage.js가 안내만 함) 화면상으로는
   활성 버튼과 동일하게 보이도록 스타일링한다 - disabled 회색조 대신 사이트 공통
   강조색(#248cff)을 쓰고, 호버·클릭 피드백도 다른 버튼과 동일하게 넣는다. 입력칸
   높이(52px, #mypage-form input) 안에 들어가도록 입력칸 오른쪽에 절대 위치시킨다. */
.mypage-view-edit-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  height: 34px;
  padding: 0 12px;
  border: 1px solid #248cff;
  border-radius: 6px;
  background: #fff;

  color: #248cff;
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}

.mypage-view-edit-btn:hover {
  background: #248cff;
  color: #fff;
}

.mypage-view-edit-btn:active {
  background: #147dea;
  border-color: #147dea;
}

@media (max-width: 480px) {
  .mypage-field-edit input {
    padding-right: 66px;
  }

  .mypage-view-edit-btn {
    right: 6px;
    height: 30px;
    padding: 0 8px;
    font-size: 11px;
  }
}

/* ===== 마이페이지 읽기전용 전환 끝 ===== */

/* ===== 마이페이지 개인정보 권리 행사 + 마케팅 수신 설정 (임시 구현, 디자인 담당자 검토 필요) ===== */

.mypage-rights,
.mypage-marketing {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #eee;
}

.mypage-rights__title,
.mypage-marketing__title {
  margin-bottom: 6px;

  color: #222;
  font-size: 15px;
  font-weight: 700;
}

.mypage-rights__intro,
.mypage-marketing__intro {
  margin-bottom: 14px;

  color: #888;
  font-size: 12px;
}

.mypage-rights__list,
.mypage-marketing__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mypage-rights__item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.mypage-rights__item:last-child {
  border-bottom: none;
}

.mypage-rights__label {
  display: block;
  margin-bottom: 4px;

  color: #333;
  font-size: 13px;
  font-weight: 600;
}

.mypage-rights__desc {
  margin: 0 0 8px;

  color: #777;
  font-size: 12px;
  line-height: 1.6;
}

/* 실제로는 동작하지 않지만(클릭 시 mypage.js가 안내만 함) 화면상으로는 활성 버튼과
   동일하게 보이도록 스타일링한다 - .mypage-view-edit-btn과 동일한 처리. */
.mypage-rights__action {
  padding: 6px 12px;
  border: 1px solid #248cff;
  border-radius: 6px;
  background: #fff;

  color: #248cff;
  font-size: 12px;
  transition: background 0.15s, color 0.15s;
}

.mypage-rights__action:hover {
  background: #248cff;
  color: #fff;
}

.mypage-rights__action:active {
  background: #147dea;
  border-color: #147dea;
}

.mypage-marketing__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.mypage-marketing__label {
  color: #333;
  font-size: 13px;
  font-weight: 600;
}

.mypage-marketing__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  cursor: pointer;
}

.mypage-marketing__toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: #ddd;
  transition: background 0.15s;
}

.mypage-marketing__toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: left 0.15s;
}

.mypage-marketing__toggle[aria-pressed='true'] .mypage-marketing__toggle-track {
  background: #248cff;
}

.mypage-marketing__toggle[aria-pressed='true'] .mypage-marketing__toggle-thumb {
  left: 20px;
}

.mypage-marketing__toggle-state {
  min-width: 48px;
  color: #999;
  font-size: 12px;
}

.mypage-marketing__notice {
  margin-top: 12px;

  color: #aaa;
  font-size: 11px;
}

/* ===== 마이페이지 개인정보 권리 행사 + 마케팅 수신 설정 끝 ===== */

/* ===== 전화번호 인증 UI (임시 구현, 디자인 담당자 검토 필요) — signup.html, card-apply.html 공용 */

.phone-verify-carrier {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  box-sizing: border-box;

  border: 1px solid #ddd;
  border-radius: 8px;

  font-size: 14px;
}

.phone-verify-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.phone-verify-input {
  width: 100%;
  padding: 10px 12px;
  box-sizing: border-box;

  border: 1px solid #ddd;
  border-radius: 8px;

  font-size: 14px;
}

.phone-verify-dash {
  flex-shrink: 0;
  color: #999;
}

.phone-verify-btn {
  flex-shrink: 0;
  margin-top: 6px;
  padding: 10px 14px;
  border: 1px solid #248cff;
  border-radius: 8px;
  background: #fff;

  color: #248cff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.phone-verify-btn--done {
  border-color: #ccc;
  background: #f5f5f5;

  color: #888;
  cursor: default;
}

/* ===== 전화번호 인증 UI 끝 ===== */

/* ===== 세션 만료 카운트다운 (임시 구현, 디자인 담당자 검토 필요) =====
   nav.js가 HTML을 건드리지 않고 .utility-nav__right 안에 직접 삽입하는
   요소에 대한 스타일. 기존 .utility-nav__right/li 스타일은 그대로 두고,
   새 요소에만 적용되는 규칙을 추가한다. */

.session-timer {
  display: flex;
  align-items: center;
}

.session-timer__text {
  color: #888;
  font-size: 12px;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .session-timer {
    display: none;
  }
}

/* ===== 세션 만료 카운트다운 끝 ===== */

/* ===== 체크박스 공통 디자인 (임시 구현, 디자인 담당자 검토 필요) —
   terms.html + card-apply-terms.html 전체 체크박스 =====
   미체크 상태에서도 연한 체크 표시가 보이고, 체크하면 파란 배경 + 흰 체크로
   바뀌는 디자인으로 통일한다. 네이티브 체크박스는 "체크 안 된 상태에 체크
   모양을 그리는" 게 CSS만으로 불가능해서(브라우저가 그 상태에선 아무것도
   안 그림), appearance:none으로 네이티브 렌더링을 끄고 박스·체크 표시
   둘 다 직접 그린다. 체크된 상태의 색(#248cff 배경 + 흰 체크)은 기존
   느낌을 유지하도록 맞췄다. 두 페이지의 체크박스 클래스 이름이 서로 달라
   (terms.html은 terms-checkbox-input, card-apply-terms.html은
   card-terms-checkbox-input 등) 선택자를 전부 나열했다 — 각 클래스의
   기존 width/height/margin-top 규칙(.card-checkbox input[type='checkbox']
   등)은 그대로 두고, 여기서는 appearance/테두리/배경/체크 표시만 추가한다. */
#card-terms-agree-all,
.card-consent-group__checkbox,
.card-consent-group__item-checkbox,
.card-terms-checkbox-input,
.card-terms-credit-required-child,
#terms-agree-all,
.terms-checkbox-input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;

  border: 1.5px solid #ccc;
  border-radius: 4px;
  background: #fff;

  color: #ccc; /* 미체크 상태의 연한 체크 표시 색 */
}

#card-terms-agree-all::after,
.card-consent-group__checkbox::after,
.card-consent-group__item-checkbox::after,
.card-terms-checkbox-input::after,
.card-terms-credit-required-child::after,
#terms-agree-all::after,
.terms-checkbox-input::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;

  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#card-terms-agree-all:checked,
.card-consent-group__checkbox:checked,
.card-consent-group__item-checkbox:checked,
.card-terms-checkbox-input:checked,
.card-terms-credit-required-child:checked,
#terms-agree-all:checked,
.terms-checkbox-input:checked {
  border-color: #248cff;
  background: #248cff;

  color: #fff;
}

#card-terms-agree-all:focus-visible,
.card-consent-group__checkbox:focus-visible,
.card-consent-group__item-checkbox:focus-visible,
.card-terms-checkbox-input:focus-visible,
.card-terms-credit-required-child:focus-visible,
#terms-agree-all:focus-visible,
.terms-checkbox-input:focus-visible {
  outline: 2px solid #248cff;
  outline-offset: 2px;
}

/* "(필수) 개인(신용)정보 수집·이용 동의"의 상위 체크박스는 전문 보기 안의 하위
   2개가 모두 체크돼야만 자동으로 켜지는 표시 전용(disabled) 체크박스다 - 직접
   클릭해서 하위(고유식별정보 등)까지 건너뛰어 동의 처리되는 걸 막기 위함.
   cursor:default는 체크 여부와 무관하게 항상 적용 - .card-consent-group__item-checkbox
   기본 규칙(위쪽, cursor: pointer)이 이 요소에도 적용되므로 여기서 명시적으로
   덮어써야 실제로 바뀐다(단순히 선언을 안 하면 기본 규칙의 pointer가 그대로 남음). */
.card-consent-group__item-checkbox:disabled {
  cursor: default;
}

/* 회색 배경·점선 테두리는 "아직 하위 항목을 다 체크하지 않은" 미체크
   상태에만 적용한다. 전에는 :disabled 전체에 걸려 있어서, 하위 2개를 모두
   체크해 이 상위 체크박스가 checked=true로 바뀌어도 :checked 규칙의 파란
   배경을 이 규칙이 (같은 명시도에서 더 뒤에 선언되어) 덮어써 버려 체크
   상태가 화면에 전혀 반영되지 않는 문제가 있었다(체크마크 색만 흰색으로
   바뀌어 연한 회색 배경 위에서 사실상 안 보였음). :not(:checked)로 범위를
   좁혀서, 체크되면 다른 체크박스와 동일한 파란 배경/흰 체크로 보이게 한다. */
.card-consent-group__item-checkbox:disabled:not(:checked) {
  background: #f5f5f5;
  border-style: dashed;
  border-color: #bbb;
}

/* ===== 체크박스 공통 디자인 끝 ===== */

/* ===== index.html 푸터 보완 (임시 구현, 디자인 담당자 검토 필요) ===== */

/* 1줄: ARS 안내 - "ARS(유료)" 뒤에만 구분선을 두고 나머지는 공백으로 흐르게,
   라벨은 기본 텍스트색, 전화번호(a 태그)만 굵은 파란색으로 강조.
   참고 이미지에는 1·2줄 사이 구분선이 없어서, 기존 .footer-info__tel의
   padding-bottom/border-bottom(여기서는 쓰지 않는 레이아웃)을 이 블록에서
   다시 선언해 덮어쓴다 - 원래 선언 자체는 Footer 섹션에 그대로 남아있음. */
.footer-info__tel {
  padding-bottom: 0;
  border-bottom: none;
}

.footer-tel__badge {
  margin-right: 10px;
  color: #333;
  font-weight: 700;
}

.footer-tel__sep {
  margin-right: 10px;
  color: #cfd4da;
}

.footer-tel__group {
  margin-right: 16px;
  color: #333;
}

.footer-info__tel a {
  color: #074ba5;
  font-weight: 700;
}

.footer-info__tel a:hover {
  text-decoration: underline;
}

/* 2·3줄: 링크 모음 - 기존 .footer-menu(nth-child(4) 강조 규칙 포함)는
   새 마크업에서 더 이상 쓰지 않고, 줄마다 역할이 달라 새 클래스로 분리.
   항목 사이 구분선은 li에 ::before로 그려서 마크업에 구분자 요소를 더 안 둔다. */
.footer-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 14px;
}

.footer-link-row li {
  display: flex;
  align-items: center;
}

.footer-link-row li:not(:first-child)::before {
  content: '|';
  margin: 0 10px;
  color: #cfd4da;
}

.footer-link-row a {
  color: #333;
  font-size: 13px;
}

/* 참고 이미지에서 "회사소개"만 2줄의 다른 항목들과 달리 검은색 굵은 글씨로
   강조되어 있어 2줄(강조 줄이 아닌 쪽)의 첫 항목에만 적용한다. */
.footer-link-row:not(.footer-link-row--emphasis) li:first-child a {
  color: #222;
  font-weight: 700;
}

.footer-link-row--emphasis {
  margin-top: 0;
}

.footer-link-row--emphasis a {
  color: #075ac7;
  font-weight: 700;
}

/* 통신중개판매상품 이메일은 강조 대상이 아니므로 일반 굵기로 되돌림 */
.footer-link-row--emphasis li:nth-child(3) a {
  color: #333;
  font-weight: 400;
}

/* 위치기반서비스 이용약관만 검은색 굵은 글씨로 - 굵기(강조)는 유지하되
   파란 링크색만 뺀다 */
.footer-link-row--emphasis li:nth-child(2) a {
  color: #222;
}

/* 3줄 오른쪽 "사업자정보 확인" - 4줄에 이미 같은 정보가 노출되어 있어 별도
   상세 페이지/팝업을 새로 만들면 내용이 그대로 중복된다. 그래서 전용 화면을
   만드는 대신, 이 푸터의 다른 미구현 항목(회사소개 등)과 동일하게 "준비 중"
   안내로 통일했다 - 실제 서비스가 준비되면 이 자리에 사업자정보 확인
   팝업/외부 조회 링크를 연결하면 된다. */
.footer-line--biz-check {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  row-gap: 8px;
  margin-top: 10px;
}

.footer-biz-check {
  color: #666;
  font-size: 13px;
  white-space: nowrap;
}

.footer-biz-check:hover {
  text-decoration: underline;
}

/* 4줄: 사업자 정보 - 전부 가상 정보(실제 회사와 무관). 참고 이미지처럼
   세로 구분선 없이 간격만으로 항목을 구분한다. */
.footer-biz-info {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
  row-gap: 4px;
  margin-top: 16px;
  color: #555;
  font-size: 13px;
}

/* 375px 등 좁은 화면에서 footer-inner가 가로 2단(정보/패밀리사이트)으로
   남아 있으면 내용이 눌리므로, 이 폭부터는 세로로 쌓는다.
   .footer-inner 자체 선언(위쪽)은 그대로 두고 이 중단점에서만 덧씌운다. */
@media (max-width: 480px) {
  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .footer-right {
    align-items: flex-start;
    width: 100%;
    gap: 16px;
  }

  .footer-family {
    width: 100%;
  }

  .footer-info__tel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 6px;
  }

  .footer-tel__group {
    margin-right: 0;
    width: 100%;
  }

  .footer-line--biz-check {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 10px;
  }

  .footer-biz-info {
    flex-direction: column;
    row-gap: 6px;
  }
}

/* ===== 푸터 보완 끝 ===== */