.sm-shell { background: #f3f0ea; }
.sm-shell .header { display: none !important; }
.sm-side, .sm-top, .sm-order, .sm-auth, .sm-page, .sm-modal, .sm-search, .sm-shell footer {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.sm-side *, .sm-top *, .sm-order *, .sm-auth *, .sm-page *, .sm-modal *, .sm-search * { box-sizing: border-box; }
.sm-auth .g-recaptcha, .sm-auth .g-recaptcha *, .sm-auth .h-captcha, .sm-auth .h-captcha *,
.sm-auth iframe[src*="recaptcha"], .sm-auth iframe[src*="hcaptcha"], .sm-auth iframe[src*="google.com/recaptcha"] {
  box-sizing: content-box !important;
}
.sm-modal[hidden], .sm-order [hidden] { display: none !important; }
body.sm-lock, html.sm-lock { overflow: hidden; }

.sm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sm-btn:active { transform: scale(.97); }
.sm-btn--lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.sm-btn--block { display: flex; width: 100%; }
.sm-btn--primary { color: #fff; background: linear-gradient(135deg, #f8a159, #f57f42); box-shadow: 0 8px 20px rgba(245, 127, 66, .35); }
.sm-btn--primary:hover { color: #fff; box-shadow: 0 12px 26px rgba(245, 127, 66, .45); }
.sm-btn--soft { color: #f57f42; background: #fff3ea; }
.sm-btn--soft:hover { color: #f57f42; background: #ffe8d7; }
.sm-btn--dark { color: #fff; background: rgba(255, 255, 255, .12); }
.sm-btn--dark:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.sm-btn--ghost-dark { color: #0f172a; background: #fff; border-color: #eadfce; }
.sm-btn--text { color: #64748b; background: transparent; min-height: 40px; }
.sm-pill--dark { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; color: #f57f42; background: #fff3ea; border: 1px solid #ffdcc4; }
.sm-link { color: #f57f42; font-weight: 700; text-decoration: none; }
.sm-link:hover { color: #f57f42; text-decoration: underline; }
.sm-dot { margin: 0 6px; color: #cbd5e1; }

.sm-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.sm-modal__backdrop { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(8, 12, 28, .62); animation: sm-fade .2s ease; }
.sm-modal__panel {
  position: relative; width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border-radius: 24px; padding: 32px 28px 24px; box-shadow: 0 24px 60px rgba(15, 23, 42, .3); animation: sm-pop .25s ease;
}
.sm-modal__panel--sm { max-width: 380px; text-align: center; }
.sm-modal__x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; font-size: 28px; line-height: 1; color: #64748b; cursor: pointer; }
.sm-modal__x:hover { background: #fff3ea; }
.sm-modal__title { margin: 0 0 4px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: #0f172a; }
.sm-modal__sub { margin: 0 0 22px; color: #64748b; font-size: 14px; }
.sm-modal__foot { margin-top: 18px; text-align: center; font-size: 14px; color: #64748b; }
.sm-login-note { display: flex; align-items: center; gap: 8px; margin: -8px 0 16px; padding: 10px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; color: #f57f42; background: #fff3ea; }
.sm-gate__icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; color: #f57f42; background: #fff3ea; }
.sm-gate__title { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: #0f172a; }
.sm-gate__desc { margin: 0 0 20px; color: #64748b; font-size: 14px; line-height: 1.6; }
.sm-gate__actions { display: grid; gap: 8px; }
@keyframes sm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sm-pop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .sm-modal { align-items: center; justify-content: center; padding: 20px 16px; }
  .sm-modal__panel { max-width: 380px; width: 100%; border-radius: 24px; padding: 28px 20px 20px; max-height: 86vh; }
}

.sm-form .g-recaptcha, .sm-form .h-captcha, .sm-form .cf-turnstile { min-height: 78px; }
.sm-field label, .sm-field .control-label { display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #334155; }
.sm-form .form-control, .sm-form select, .sm-form input[type=text], .sm-form input[type=password], .sm-form input[type=email] {
  width: 100%; height: 50px; padding: 0 16px; border: 1.5px solid #eadfce; border-radius: 12px;
  background: #f7f3ee; font-family: inherit; font-size: 16px; font-weight: 500; color: #0f172a; box-shadow: none;
  -webkit-appearance: none; appearance: none;
}
.sm-form .form-control:focus { outline: none; border-color: #f57f42; background: #fff; box-shadow: 0 0 0 4px rgba(245, 127, 66, .16); }
.sm-form__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.sm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sm-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #334155; }
.sm-check input { width: 18px; height: 18px; margin: 0; }
.sm-check label { margin: 0; font-weight: 500; cursor: pointer; }
.sm-check--terms { padding: 12px 14px; border-radius: 12px; background: #f7f3ee; }
.sm-check--terms .terms { color: #f57f42; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 420px) { .sm-field-row { grid-template-columns: 1fr; } }

.sm-side {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 1000; width: 232px;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; color: #3d342c;
  border-right: 1px solid #eadfce;
}
.sm-brand { display: inline-flex; align-items: baseline; gap: 0; text-decoration: none; line-height: 1; }
.sm-brand__sns { font-size: 22px; font-weight: 800; letter-spacing: -0.06em; color: #1a1510; }
.sm-brand__mong { font-size: 22px; font-weight: 800; letter-spacing: -0.08em; color: #f57f42; }
.sm-brand:hover { text-decoration: none; }
.sm-brand:hover .sm-brand__mong { color: #e46b2e; }
.sm-brand--sm .sm-brand__sns, .sm-brand--sm .sm-brand__mong { font-size: 18px; }
.sm-side__head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; padding: 16px 16px 8px; }
.sm-side__close { display: none; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 50%; background: transparent; font-size: 30px; line-height: 1; color: #3d342c; cursor: pointer; }

.sm-acct { flex: 0 0 auto; margin: 4px 12px 8px; padding: 10px 12px; border-radius: 14px; background: #fff8f3; border: 1px solid #ffd9c2; }
.sm-acct__top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sm-acct__av { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; background: #f57f42; }
.sm-acct__who { min-width: 0; flex: 1; }
.sm-acct__name { margin: 0; font-size: 13px; font-weight: 700; color: #1a1510; word-break: break-all; }
.sm-acct__lbl { font-size: 11px; font-weight: 600; color: #8a8278; }
.sm-acct__bal { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border-radius: 10px; background: #fff; text-decoration: none; color: #1a1510; border: 1px solid #ffd9c2; }
.sm-acct__bal:hover { color: #1a1510; text-decoration: none; border-color: #f57f42; }
.sm-acct__bal strong { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 800; color: #1a1510; }
.sm-acct__bal em { flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 800; color: #fff; background: #f57f42; }
.sm-acct__msg { margin: 0 0 8px; font-size: 13px; line-height: 1.4; color: #5c534c; }
.sm-acct__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sm-acct__btns .sm-btn { min-height: 38px; padding: 0 8px; font-size: 13px; }
.sm-acct--guest .sm-acct__btns { grid-template-columns: 1fr; }
.sm-acct--guest .sm-acct__btns .sm-btn { min-height: 40px; font-size: 13px; }

.sm-side__nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 10px 4px; }
.sm-nav__lbl { margin: 6px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #a89f96; }
.sm-nav { margin: 0; padding: 0; list-style: none; }
.sm-nav li { margin: 1px 0; }
.sm-nav__a { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 8px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #3d342c; text-decoration: none; }
.sm-nav__a i { width: 18px; text-align: center; font-size: 13px; color: #8a8278; }
.sm-nav__a:hover { color: #1a1510; background: #fff3ea; text-decoration: none; }
.sm-nav__a:hover i { color: #f57f42; }
.sm-nav li.is-active > .sm-nav__a { color: #fff; background: #f57f42; }
.sm-nav li.is-active > .sm-nav__a i { color: #fff; }
.sm-side__foot { flex: 0 0 auto; margin-top: auto; padding: 6px 10px 12px; border-top: 1px solid #eadfce; }
.sm-nav--sub .sm-nav__a { min-height: 36px; font-size: 13px; font-weight: 500; color: #5c534c; }
.sm-nav__a[href="/logout"]:hover { color: #b91c1c; background: #fee2e2; }
.sm-nav__a[href="/logout"]:hover i { color: #b91c1c; }
.sm-side__foot .sm-nav__a[href*="addfunds"] { display: none !important; }

.sm-side__backdrop { display: none; }
.sm-main { min-height: 100vh; display: flex; flex-direction: column; }
.sm-shell .content { padding: 12px 12px 40px !important; margin: 0 !important; max-width: none !important; width: auto !important; min-height: 0 !important; flex: 1 0 auto; }

.sm-top { display: none; }
.sm-burger { position: relative; width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.sm-burger span { position: absolute; left: 11px; right: 11px; height: 2px; border-radius: 2px; background: #1a1510; }
.sm-burger span:nth-child(1) { top: 15px; }
.sm-burger span:nth-child(2) { top: 21px; }
.sm-burger span:nth-child(3) { top: 27px; }
.sm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 1.5px solid transparent; border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 700; color: #1a1510; background: #fff3ea; text-decoration: none; cursor: pointer; }
.sm-chip:hover { color: #1a1510; text-decoration: none; }
.sm-chip--primary { color: #fff; background: linear-gradient(135deg, #f8a159, #f57f42); border-color: transparent; }
.sm-chip--ghost { color: #1a1510; background: #fff; border-color: #eadfce; }

@media (min-width: 1024px) {
  .sm-main { margin-left: 232px; }
  .sm-shell .content { padding: 28px 28px 60px !important; }
}
@media (max-width: 1023px) {
  .sm-main { padding-top: 56px; }
  .sm-top { position: fixed; top: 0; right: 0; left: 0; z-index: 900; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 14px; background: #fff; border-bottom: 1px solid #eadfce; }
  .sm-top__right { display: flex; align-items: center; gap: 6px; }
  .sm-top .sm-chip { min-height: 32px; padding: 0 9px; font-size: 12px; }
  .sm-acct--guest { display: none !important; }
  .sm-side { width: 300px; max-width: 86%; overflow-y: auto; transform: translateX(-102%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
  .sm-side[data-side="right"] { left: auto; right: 0; transform: translateX(102%); }
  .sm-side__close { display: block; }
  .sm-side__backdrop { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 990; background: rgba(26, 21, 16, .4); opacity: 0; pointer-events: none; transition: opacity .28s ease; }
  body.sm-drawer-open .sm-side { transform: none; visibility: visible; transition: transform .28s ease, visibility 0s; box-shadow: -12px 0 40px rgba(80, 48, 20, .16); }
  body.sm-drawer-open .sm-side__backdrop { opacity: 1; pointer-events: auto; }
}

.sm-search { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 12px auto 0; padding: 0 16px; height: 46px; border: 1.5px solid #eadfce; border-radius: 999px; background: #fff; color: #64748b; }
.sm-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: #0f172a; }
@media (max-width: 1023px) { .sm-search { margin: 12px 12px 0; } }

.sm-order { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 4px 40px; }
@media (min-width: 1024px) {
  .sm-order { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
}
.sm-guest-banner { display: flex; align-items: center; margin: 0 0 14px; padding: 12px 16px; border-radius: 16px; background: #fff3ea; border: 1px solid #ffd9c2; }
.sm-guest-banner__txt { display: grid; gap: 2px; font-size: 13px; color: #334155; min-width: 0; }
.sm-guest-banner__txt strong { font-size: 14px; color: #0f172a; }

/* ── Toss 스타일: .sm-step 은 투명 컨테이너, 각 단계(.sm-s)가 흰 카드 ── */
.sm-step { margin: 0 0 14px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.sm-s { margin: 0 0 16px; padding: 20px; border: 1px solid #f3ece2; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(80, 48, 20, .04); }
.sm-s__h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: inherit; }
.sm-s__no {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; min-width: 28px; height: 28px; padding: 0; border-radius: 50%;
  font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  color: #f57f42; background: #fff4ee;
}
.sm-s__t {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif !important;
  font-size: 15px !important; font-weight: 600 !important; line-height: 1.4 !important;
  letter-spacing: -0.01em !important; color: #111827 !important; word-break: keep-all;
}
.sm-order .sm-s__h.buttonListTitle {
  font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important;
  line-height: inherit !important; color: inherit !important; background: none !important;
  display: flex !important; align-items: center; gap: 8px; margin: 0 0 12px !important;
}
.sm-orderform .sm-s:not(.sm-s--result) > label.control-label,
#service_description > label.control-label { display: none !important; }
.sm-s--result { margin-bottom: 16px; }
.sm-plat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sm-plat__btn {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 4px 10px; border-radius: 16px; border: 1.5px solid #eadfce; background: #fff; color: #334155;
  cursor: pointer; font-family: inherit; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sm-plat__btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(80, 48, 20, .1); }
.sm-plat__btn:active { transform: scale(.97); }
.sm-plat__ico { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: #fff; background: linear-gradient(135deg, #f8a159, #f57f42); box-shadow: 0 6px 14px rgba(245, 127, 66, .28); }
.sm-plat__ico b { font-size: 24px; font-weight: 800; line-height: 1; }
.sm-plat__label { max-width: 100%; padding: 0 2px; font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-plat__count { position: absolute; top: 6px; right: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-style: normal; font-weight: 700; line-height: 1; color: #64748b; background: #efe8de; }
.sm-plat__btn.is-active { border-color: #f57f42; background: #fff8f3; box-shadow: 0 0 0 3px rgba(245, 127, 66, .18); color: #0f172a; }
.sm-plat__btn.is-active .sm-plat__count { color: #fff; background: #f57f42; }
.sm-plat__btn.is-empty { opacity: .38; cursor: not-allowed; }
.sm-plat__btn.is-empty:hover { transform: none; box-shadow: none; }

.sm-cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 2px; }
.sm-cats:empty { display: none; }
.sm-cat {
  position: relative; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px;
  min-height: 60px; padding: 12px 34px 12px 14px; border-radius: 14px; border: 1.5px solid #eadfce; background: #fff;
  text-align: left; cursor: pointer; font-family: inherit; color: #334155;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sm-cat:hover { border-color: #f57f42; transform: translateY(-1px); }
.sm-cat:active { transform: scale(.98); }
.sm-cat__tag { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1.5; color: #f57f42; background: #fff3ea; }
.sm-cat__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.sm-cat::after { content: ""; position: absolute; top: 10px; right: 10px; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #eadfce; background: #fff; }
.sm-cat.is-active { border-color: #f57f42; background: #fff; box-shadow: 0 0 0 3px rgba(15, 23, 42, .06), inset 0 0 0 1px #f57f42; color: #0f172a; }
.sm-cat.is-active::before { content: none; }
.sm-cat.is-active::after {
  border: 0;
  background-color: #f57f42;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M5 9.3l2.5 2.5L13 6.4'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 2px #fff;
}
.sm-cat.is-active .sm-cat__tag { color: #fff; background: #f57f42; }
.sm-cats:not(.is-expanded) .sm-cat[data-extra] { display: none; }
.sm-cats__more {
  grid-column: 1 / -1; justify-self: center; width: auto; min-height: 40px; margin-top: 2px; padding: 0 16px;
  border: 0; border-radius: 999px; background: #f7f3ee; font-family: inherit; font-size: 13px; font-weight: 700; color: #5c534c; cursor: pointer;
}
.sm-cats__more:hover { color: #c45c2a; background: #fff3ea; }
.sm-cat-group.sm-cats-on .sm-cat-source { display: none; }

.sm-orderform { scroll-margin-top: 72px; }
.sm-orderform .form-group { margin: 0 0 16px; }
.sm-orderform .form-group.sm-s { margin: 0 0 16px; }
.sm-orderform label.control-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: #334155; }
/* 입력창: 반경 12px, 연회색 배경, 포커스 시 오렌지 테두리 + 부드러운 글로우 (font-size 16px 는 iOS 확대 방지로 유지) */
.sm-orderform .form-control, .sm-orderform select, .sm-orderform textarea, .sm-orderform input[type=text], .sm-orderform input[type=number] {
  width: 100%; max-width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 12px;
  background: #f9fafb; font-family: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; color: #111827; box-shadow: none;
  box-sizing: border-box; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.sm-orderform .form-control::placeholder, .sm-orderform input::placeholder, .sm-orderform textarea::placeholder { color: #94a3b8; }
.sm-orderform select.form-control { text-overflow: ellipsis; }
.sm-orderform textarea.form-control { min-height: 110px; resize: vertical; }
.sm-orderform .form-control:focus, .sm-orderform select:focus, .sm-orderform textarea:focus, .sm-orderform input[type=text]:focus, .sm-orderform input[type=number]:focus { outline: none; border-color: #f57f42; background: #fff; box-shadow: 0 0 0 4px rgba(245, 127, 66, .12); }
.sm-orderform #charge, .sm-orderform #sm-b-charge { font-size: 18px; font-weight: 800; color: #f57f42; background: #fff8f3; border-color: #ffe3d1; }
.sm-orderform .panel-body { padding: 14px 16px; border-radius: 12px; background: #f9fafb; border: 1px solid #eef0f2; font-size: 14px; line-height: 1.7; color: #334155; word-break: keep-all; overflow-wrap: anywhere; }
/* 약관 동의 줄도 카드 톤으로 통일 */
.sm-orderform .sm-check--terms { margin: 0 0 16px; padding: 16px 20px; border: 1px solid #f3ece2; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(80, 48, 20, .04); }
.sm-orderform .sm-terms.is-warn { box-shadow: 0 0 0 2px #e11d48; }
.sm-orderform .low-balance a { font-size: 12px; font-weight: 700; color: #f57f42; text-decoration: none; }
.sm-b-desc { min-height: 0; }
.sm-b-desc p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: #334155; }
.sm-b-desc .sm-b-desc__h { margin: 12px 0 4px; font-size: 13px; font-weight: 800; color: #0f172a; }
.sm-b-desc p:first-child { margin-top: 0; }
.sm-b-hint { margin-top: 6px; font-size: 12px; line-height: 1.5; color: #64748b; word-break: keep-all; }
.sm-b-hint.is-error { color: #e11d48; font-weight: 700; }
.sm-b-sample { margin: 12px 0 0; font-size: 12px; line-height: 1.55; color: #64748b; text-align: left; word-break: keep-all; }
.sm-orderform .sm-submit, .sm-orderform #sm-b-submit, #sm-b-submit {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  width: 100% !important; max-width: 100% !important; float: none !important;
  min-height: 56px; margin: 8px 0 0 !important; padding: 0 16px;
  border: 0 !important; border-radius: 14px !important;
  font-family: inherit !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.2 !important;
  color: #fff !important; background: linear-gradient(180deg, #f9a862 0%, #f57f42 100%) !important;
  box-shadow: 0 6px 16px rgba(245, 127, 66, .32), inset 0 1px 0 rgba(255, 255, 255, .28); box-sizing: border-box !important;
  white-space: nowrap; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.sm-submit:hover { filter: brightness(1.03); box-shadow: 0 8px 20px rgba(245, 127, 66, .38), inset 0 1px 0 rgba(255, 255, 255, .3); }
.sm-submit:active { transform: translateY(1px) scale(.99); box-shadow: 0 3px 8px rgba(245, 127, 66, .3), inset 0 1px 2px rgba(0, 0, 0, .08); }

@media (min-width: 768px) {
  .sm-s { padding: 24px; }
  .sm-plat { gap: 12px; }
  .sm-plat__ico { width: 60px; height: 60px; font-size: 28px; }
  .sm-plat__ico b { font-size: 28px; }
}
@media (min-width: 1024px) {
  .sm-cats { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .sm-cat { min-height: 76px; padding: 14px 36px 14px 16px; }
  .sm-cat__name { font-size: 14px; line-height: 1.4; }
}
@media (max-width: 1023px) {
  .sm-cats { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
  .sm-cat { min-height: 58px; padding: 10px 30px 10px 12px; }
  .sm-cat__name { font-size: 13px; }
  .sm-orderform { padding-bottom: 80px; }
  .sm-orderform .sm-submit, #sm-b-submit { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 400px) {
  .sm-s { padding: 18px 16px; }
  .sm-orderform .sm-check--terms { padding: 14px 16px; }
  .sm-orderform { padding-bottom: 80px; }
  .sm-plat { gap: 8px; }
  .sm-plat__btn { padding: 10px 2px 8px; border-radius: 14px; }
  .sm-plat__ico { width: 44px; height: 44px; font-size: 20px; }
  .sm-plat__ico b { font-size: 20px; }
  .sm-plat__label { font-size: 12px; }
  .sm-orderform .sm-submit, #sm-b-submit { font-size: 15px !important; }
}
@media (max-width: 340px) {
  .sm-plat { gap: 6px; }
  .sm-plat__label { font-size: 11px; }
  .sm-plat__ico { width: 40px; height: 40px; font-size: 18px; }
}

.sm-auth { display: flex; justify-content: center; padding: 8px 0 24px; }
.sm-auth__card { width: 100%; max-width: 480px; padding: 18px 16px 16px; border-radius: 20px; background: #fff; border: 1px solid #eadfce; box-shadow: 0 24px 60px rgba(80, 48, 20, .12); overflow: visible; }
.sm-auth__head { text-align: center; margin-bottom: 12px; }
.sm-auth__title { margin: 0 0 4px !important; font-size: 22px !important; font-weight: 800 !important; letter-spacing: -.02em; }
.sm-auth__sub { margin: 0; color: #64748b; font-size: 13px; }
.sm-auth__foot { margin-top: 10px; text-align: center; font-size: 13px; color: #64748b; }
.sm-auth form .btn-primary { position: relative; z-index: 5; pointer-events: auto; }
.sm-auth .sm-form { gap: 8px; }
.sm-auth .sm-field { margin: 0; }
.sm-auth .sm-field label, .sm-auth .sm-field .control-label { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 700; color: #334155; }
.sm-shell .sm-auth .form-control,
.sm-auth .form-control { height: 42px !important; margin-bottom: 0 !important; }
.sm-auth .sm-field-row { grid-template-columns: 1fr 1fr !important; gap: 8px; }
.sm-auth .sm-btn--lg { min-height: 46px; font-size: 15px; }
.sm-auth .sm-check--terms {
  display: flex !important; align-items: center; gap: 10px;
  margin: 0; padding: 8px 12px; cursor: pointer;
}
.sm-auth .sm-check--terms .terms { margin: 0; display: inline; }
.sm-auth .sm-check--terms::before,
.sm-auth .sm-check--terms::after,
.sm-auth .sm-check--terms label::before,
.sm-auth .sm-check--terms label::after { content: none !important; display: none !important; }
.sm-auth input.terms-accept-checkbox {
  position: static !important; left: auto !important; right: auto !important; top: auto !important;
  width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important;
  margin: 0 !important; padding: 0 !important; border: 1px solid #cbbfaf !important;
  clip: auto !important; overflow: visible !important;
  opacity: 1 !important; visibility: visible !important;
  display: inline-block !important; flex: 0 0 20px;
  appearance: auto !important; -webkit-appearance: checkbox !important;
  accent-color: #f57f42; pointer-events: auto !important;
}
.sm-auth .sm-check--terms label { padding: 0 !important; margin: 0 !important; font-size: 13px; cursor: pointer; }
.sm-captcha, .sm-auth .sm-captcha {
  display: block !important; min-height: 78px; margin: 4px 0 2px; overflow: visible !important;
}
.sm-auth .g-recaptcha, .sm-auth .h-captcha,
.sm-auth iframe[src*="recaptcha"], .sm-auth iframe[src*="hcaptcha"], .sm-auth iframe[src*="google.com/recaptcha"] {
  display: block !important; visibility: visible !important; opacity: 1 !important;
  width: 100% !important; max-width: 304px; min-height: 78px !important; height: auto !important;
  margin: 0 auto 0 0 !important; overflow: visible !important; transform: none !important;
  pointer-events: auto !important; position: relative !important;
}
.sm-auth .g-recaptcha > div { margin: 0 !important; max-width: 100%; }
.sm-auth img[src*="captcha"], .sm-auth .captcha img, .sm-captcha img {
  display: block !important; max-width: 100%; height: auto !important; margin: 0 0 8px;
}
.sm-auth .sm-captcha .form-control { height: 42px !important; }
iframe[src*="recaptcha"], iframe[title*="recaptcha"], iframe[title*="reCAPTCHA"], .grecaptcha-badge {
  visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;
}
.sm-shell.sm-signup .content { padding-bottom: 16px !important; }
@media (max-width: 1023px) {
  .sm-shell.sm-signup .content { padding: 8px 12px 10px !important; }
  .sm-signup .sm-auth { padding: 0 0 8px; }
  .sm-signup .sm-auth__card { padding: 14px 14px 12px; }
  .sm-signup .sm-auth__title { font-size: 20px !important; }
  .sm-signup .sm-auth__head { margin-bottom: 8px; }
  .sm-shell.sm-signup .sm-auth .form-control { height: 40px !important; }
  .sm-signup .sm-auth .sm-form { gap: 6px; }
  .sm-signup .sm-auth .sm-btn--lg { min-height: 44px; }
  .sm-signup footer.sm-foot { display: none !important; }
}

.sm-page { width: 100%; max-width: 900px; margin: 0 auto; padding: 8px 0 60px; }
.sm-page__head { text-align: center; margin-bottom: 20px; }
.sm-page__head .title { font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
.sm-page__head .subtitle { margin-top: 6px; color: #64748b; font-size: 14px; }
.sm-svc-sum { margin: 0 0 16px; }
.sm-page__card { padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #eadfce; box-shadow: 0 10px 30px rgba(80, 48, 20, .06); }
.sm-page .sm-tabs { display: flex !important; flex-wrap: nowrap; gap: 8px; margin: 0 0 16px !important; padding: 2px 2px 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sm-page .sm-tabs .change_item { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #eadfce; background: #fff; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1; color: #334155; cursor: pointer; white-space: nowrap; width: auto !important; height: auto !important; }
.sm-page .sm-tabs .change_item.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #f8a159, #f57f42); }
.sm-tabs__n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; font-size: 11px; color: #fff; background: #03a94d; }
.sm-prose { font-size: 15px; line-height: 1.8; color: #334155; word-break: keep-all; overflow-wrap: anywhere; }
.sm-prose img, .sm-prose video, .sm-prose iframe { max-width: 100%; height: auto; }
.sm-prose table { display: block; max-width: 100%; overflow-x: auto; }
.sm-page__cta { margin-top: 16px; }
.sm-page__cta--guest { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
@media (max-width: 480px) { .sm-page__cta--guest .sm-btn { width: 100%; } .sm-page__head .title { font-size: 22px; } }

.sm-btn:focus-visible { outline: 3px solid #f57f42; outline-offset: 2px; }
.sm-plat__btn:focus-visible { outline: 3px solid #f57f42; outline-offset: 2px; }
.sm-cat:focus-visible { outline: 3px solid #f57f42; outline-offset: 2px; }
.sm-nav__a:focus-visible { outline: 3px solid #f8a159; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .sm-modal__panel, .sm-modal__backdrop { animation: none; }
  .sm-btn, .sm-plat__btn, .sm-cat, .sm-side, .sm-side__backdrop { transition: none; }
}

.sm-plat__btn[data-plat="instagram"] .sm-plat__ico { background: linear-gradient(135deg, #feda75, #d62976); }
.sm-plat__btn.is-active[data-plat="instagram"] { border-color: #d62976; box-shadow: 0 0 0 3px rgba(214,41,118, .18); }
.sm-plat__btn.is-active[data-plat="instagram"] .sm-plat__count { background: #d62976; }
.sm-p-instagram .sm-cat:hover { border-color: #d62976; }
.sm-p-instagram .sm-cat__tag { color: #d62976; }
.sm-p-instagram .sm-cat.is-active { border-color: #d62976; box-shadow: 0 0 0 3px rgba(214,41,118, .12), inset 0 0 0 1px #d62976; }
.sm-p-instagram .sm-cat.is-active::after { background: linear-gradient(135deg, #feda75, #d62976); }
.sm-p-instagram .sm-cat.is-active .sm-cat__tag { color: #fff; background: #d62976; }
.sm-plat__btn[data-plat="youtube"] .sm-plat__ico { background: linear-gradient(135deg, #ff5a5a, #e00000); }
.sm-plat__btn.is-active[data-plat="youtube"] { border-color: #e00000; box-shadow: 0 0 0 3px rgba(224,0,0, .18); }
.sm-plat__btn.is-active[data-plat="youtube"] .sm-plat__count { background: #e00000; }
.sm-p-youtube .sm-cat:hover { border-color: #e00000; }
.sm-p-youtube .sm-cat__tag { color: #e00000; }
.sm-p-youtube .sm-cat.is-active { border-color: #e00000; box-shadow: 0 0 0 3px rgba(224,0,0, .12), inset 0 0 0 1px #e00000; }
.sm-p-youtube .sm-cat.is-active::after { background: linear-gradient(135deg, #ff5a5a, #e00000); }
.sm-p-youtube .sm-cat.is-active .sm-cat__tag { color: #fff; background: #e00000; }
.sm-plat__btn[data-plat="tiktok"] .sm-plat__ico { background: linear-gradient(135deg, #25f4ee, #fe2c55); }
.sm-plat__btn.is-active[data-plat="tiktok"] { border-color: #fe2c55; box-shadow: 0 0 0 3px rgba(254,44,85, .18); }
.sm-plat__btn.is-active[data-plat="tiktok"] .sm-plat__count { background: #fe2c55; }
.sm-p-tiktok .sm-cat:hover { border-color: #fe2c55; }
.sm-p-tiktok .sm-cat__tag { color: #fe2c55; }
.sm-p-tiktok .sm-cat.is-active { border-color: #fe2c55; box-shadow: 0 0 0 3px rgba(254,44,85, .12), inset 0 0 0 1px #fe2c55; }
.sm-p-tiktok .sm-cat.is-active::after { background: linear-gradient(135deg, #25f4ee, #fe2c55); }
.sm-p-tiktok .sm-cat.is-active .sm-cat__tag { color: #fff; background: #fe2c55; }
.sm-plat__btn[data-plat="facebook"] .sm-plat__ico { background: linear-gradient(135deg, #3b8bff, #1256d6); }
.sm-plat__btn.is-active[data-plat="facebook"] { border-color: #1256d6; box-shadow: 0 0 0 3px rgba(18,86,214, .18); }
.sm-plat__btn.is-active[data-plat="facebook"] .sm-plat__count { background: #1256d6; }
.sm-p-facebook .sm-cat:hover { border-color: #1256d6; }
.sm-p-facebook .sm-cat__tag { color: #1256d6; }
.sm-p-facebook .sm-cat.is-active { border-color: #1256d6; box-shadow: 0 0 0 3px rgba(18,86,214, .12), inset 0 0 0 1px #1256d6; }
.sm-p-facebook .sm-cat.is-active::after { background: linear-gradient(135deg, #3b8bff, #1256d6); }
.sm-p-facebook .sm-cat.is-active .sm-cat__tag { color: #fff; background: #1256d6; }
.sm-plat__btn[data-plat="threads"] .sm-plat__ico { background: linear-gradient(135deg, #4b4b52, #0c0c0e); }
.sm-plat__btn.is-active[data-plat="threads"] { border-color: #0c0c0e; box-shadow: 0 0 0 3px rgba(12,12,14, .18); }
.sm-plat__btn.is-active[data-plat="threads"] .sm-plat__count { background: #0c0c0e; }
.sm-p-threads .sm-cat:hover { border-color: #0c0c0e; }
.sm-p-threads .sm-cat__tag { color: #0c0c0e; }
.sm-p-threads .sm-cat.is-active { border-color: #0c0c0e; box-shadow: 0 0 0 3px rgba(12,12,14, .12), inset 0 0 0 1px #0c0c0e; }
.sm-p-threads .sm-cat.is-active::after { background: linear-gradient(135deg, #4b4b52, #0c0c0e); }
.sm-p-threads .sm-cat.is-active .sm-cat__tag { color: #fff; background: #0c0c0e; }
.sm-plat__btn[data-plat="twitter"] .sm-plat__ico { background: linear-gradient(135deg, #4b4b52, #0c0c0e); }
.sm-plat__btn.is-active[data-plat="twitter"] { border-color: #0c0c0e; box-shadow: 0 0 0 3px rgba(12,12,14, .18); }
.sm-plat__btn.is-active[data-plat="twitter"] .sm-plat__count { background: #0c0c0e; }
.sm-p-twitter .sm-cat:hover { border-color: #0c0c0e; }
.sm-p-twitter .sm-cat__tag { color: #0c0c0e; }
.sm-p-twitter .sm-cat.is-active { border-color: #0c0c0e; box-shadow: 0 0 0 3px rgba(12,12,14, .12), inset 0 0 0 1px #0c0c0e; }
.sm-p-twitter .sm-cat.is-active::after { background: linear-gradient(135deg, #4b4b52, #0c0c0e); }
.sm-p-twitter .sm-cat.is-active .sm-cat__tag { color: #fff; background: #0c0c0e; }
.sm-plat__btn[data-plat="telegram"] .sm-plat__ico { background: linear-gradient(135deg, #3fc1f5, #1a8fd1); }
.sm-plat__btn.is-active[data-plat="telegram"] { border-color: #1a8fd1; box-shadow: 0 0 0 3px rgba(26,143,209, .18); }
.sm-plat__btn.is-active[data-plat="telegram"] .sm-plat__count { background: #1a8fd1; }
.sm-p-telegram .sm-cat:hover { border-color: #1a8fd1; }
.sm-p-telegram .sm-cat__tag { color: #1a8fd1; }
.sm-p-telegram .sm-cat.is-active { border-color: #1a8fd1; box-shadow: 0 0 0 3px rgba(26,143,209, .12), inset 0 0 0 1px #1a8fd1; }
.sm-p-telegram .sm-cat.is-active::after { background: linear-gradient(135deg, #3fc1f5, #1a8fd1); }
.sm-p-telegram .sm-cat.is-active .sm-cat__tag { color: #fff; background: #1a8fd1; }
.sm-plat__btn[data-plat="etc"] .sm-plat__ico { background: linear-gradient(135deg, #a78bfa, #6d4bff); }
.sm-plat__btn.is-active[data-plat="etc"] { border-color: #6d4bff; box-shadow: 0 0 0 3px rgba(109,75,255, .18); }
.sm-plat__btn.is-active[data-plat="etc"] .sm-plat__count { background: #6d4bff; }
.sm-p-etc .sm-cat:hover { border-color: #6d4bff; }
.sm-p-etc .sm-cat__tag { color: #6d4bff; }
.sm-p-etc .sm-cat.is-active { border-color: #6d4bff; box-shadow: 0 0 0 3px rgba(109,75,255, .12), inset 0 0 0 1px #6d4bff; }
.sm-p-etc .sm-cat.is-active::after { background: linear-gradient(135deg, #a78bfa, #6d4bff); }
.sm-p-etc .sm-cat.is-active .sm-cat__tag { color: #fff; background: #6d4bff; }

.sm-shell { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif; }
.sm-plat__count { display: none !important; }

.sm-rail { display: none; }
.sm-rcard { margin: 0 0 14px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid #eadfce; box-shadow: 0 6px 20px rgba(80, 48, 20, .05); }
.sm-rcard__t { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15px; font-weight: 800; color: #0f172a; }
.sm-rcard__t i { color: #f57f42; }
.sm-rcard p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: #64748b; }
.sm-rcard--cta { background: #fff8f3; border-color: #ffd9c2; }
.sm-rcard--cta .sm-rcard__t { color: #1a1510; }
.sm-rcard--cta p { color: #5c534c; }
.sm-rcard__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sm-rcard--cta .sm-rcard__btns { grid-template-columns: 1fr; }
.sm-rcard__btns .sm-btn { min-height: 44px; font-size: 14px; }
.sm-rlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.sm-rlist li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.55; color: #475569; }
.sm-rlist li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: #f57f42; }
.sm-rlist b { color: #0f172a; font-weight: 700; }
.sm-rlink { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin: 8px 0 0; padding: 0 14px; border: 1px solid #eadfce; border-radius: 12px; background: #f7f3ee; font-family: inherit; font-size: 14px; font-weight: 700; color: #334155; text-decoration: none; cursor: pointer; }
.sm-rlink i { font-size: 11px; color: #94a3b8; }
.sm-rlink:hover { border-color: #f57f42; color: #f57f42; text-decoration: none; }
@media (min-width: 1280px) {
  .sm-main.has-rail {
    margin-right: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 24px;
    justify-content: stretch;
    align-items: start;
    padding: 28px 28px 0;
    box-sizing: border-box;
  }
  .sm-main.has-rail > .sm-top { display: none !important; }
  .sm-main.has-rail > section.content { grid-column: 1; grid-row: 1; min-width: 0; padding: 0 0 28px !important; }
  .sm-rail {
    display: block;
    position: sticky;
    top: 28px;
    right: auto;
    width: auto;
    height: auto;
    max-height: none;
    padding: 0;
    overflow: visible;
    grid-column: 2;
    grid-row: 1;
  }
  .sm-main.has-rail > .sm-foot { grid-column: 1; margin-right: 0 !important; padding: 28px 0 48px !important; }
  .sm-main.has-rail > .sm-foot .sm-foot__inner { max-width: 760px; margin: 0 auto; justify-content: center; }
  .sm-main.has-rail .sm-order { max-width: none; margin: 0; padding-bottom: 8px; }
  .sm-main.has-rail > .kakaotalk { position: fixed; grid-column: 1; grid-row: 1; }
}
@media (min-width: 2000px) {
  .sm-main.has-rail {
    grid-template-columns: minmax(0, 1320px) 300px;
    justify-content: start;
  }
}

.sm-shell footer.sm-foot { height: auto !important; margin: 0 !important; padding: 28px 28px 48px !important; background: #f3f0ea !important; color: #3d342c !important; font-size: 13px; line-height: 1.8; border-top: 1px solid #eadfce; text-align: left !important; }
.sm-foot__inner { max-width: 760px; margin: 0 auto; padding: 0; background: none; border: 0; box-shadow: none; display: flex; align-items: flex-start; justify-content: center; gap: 22px; }
.sm-foot__copy { flex: 1 1 auto; min-width: 0; }
.sm-shell footer.sm-foot .footer_wrapper, .sm-shell footer.sm-foot .footer_wrapper div, .sm-shell footer.sm-foot .footer_wrapper p, .sm-shell footer.sm-foot .footer_wrapper span, .sm-shell footer.sm-foot .footer_wrapper li, .sm-shell footer.sm-foot .footer_wrapper h4, .sm-shell footer.sm-foot .footer_wrapper small {
  color: #3d342c !important; opacity: 1 !important; visibility: visible !important;
}
.sm-foot__inner > .sm-brand, .sm-brand--foot { display: inline-flex; align-items: baseline; flex: 0 0 auto; margin: 2px 0 0; text-decoration: none; }
.sm-shell footer.sm-foot .sm-brand--foot .sm-brand__sns { color: #1a1510 !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -0.06em; }
.sm-shell footer.sm-foot .sm-brand--foot .sm-brand__mong { color: #f57f42 !important; font-size: 28px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -0.08em; }
.sm-shell footer.sm-foot .footer_wrapper { display: block !important; width: 100% !important; max-width: none; margin: 0 !important; padding: 0 !important; background: transparent !important; text-align: left !important; align-items: flex-start !important; justify-content: flex-start !important; }
.sm-shell footer .footer_wrapper img { display: none !important; }
body.sm-shell footer.sm-foot,
body.sm-shell footer.sm-foot .sm-foot__copy,
body.sm-shell footer.sm-foot .footer_wrapper,
body.sm-shell footer.sm-foot .textbox,
body.sm-shell footer.sm-foot .textbox_1,
body.sm-shell footer.sm-foot .footer_wrapper *,
body.sm-shell footer.sm-foot .sm-foot__copy * {
  text-align: left !important;
}
body.sm-shell footer.sm-foot .sm-foot__copy,
body.sm-shell footer.sm-foot .footer_wrapper,
body.sm-shell footer.sm-foot .textbox,
body.sm-shell footer.sm-foot .textbox_1 {
  padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important;
}
.sm-shell footer.sm-foot .sm-foot__copy,
.sm-shell footer.sm-foot .footer_wrapper,
.sm-shell footer.sm-foot .textbox,
.sm-shell footer.sm-foot .textbox_1,
.sm-shell footer.sm-foot .footer_wrapper p,
.sm-shell footer.sm-foot .footer_wrapper div {
  line-height: 1.85 !important;
}
.sm-shell footer.sm-foot .footer_wrapper p,
.sm-shell footer.sm-foot .textbox p,
.sm-shell footer.sm-foot .textbox_1 p {
  margin: 0 0 8px !important;
}
.sm-shell footer .summary { display: none !important; }
.sm-shell footer .termsBtnbox { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 2px; margin: 18px 0 0; padding: 0; justify-content: flex-start; }
.sm-shell footer .termsBtnbox button, .sm-shell footer .termsBtnbox a.sm-foot__legal { padding: 0 10px 0 0 !important; border: 0 !important; border-radius: 0; background: transparent !important; font-family: inherit; font-size: 13px !important; font-weight: 700; color: #c45c2a !important; text-decoration: underline !important; cursor: pointer; }
.sm-shell footer .termsBtnbox button + button, .sm-shell footer .termsBtnbox a.sm-foot__legal + a.sm-foot__legal { padding-left: 10px !important; border-left: 1px solid #cbbfaf !important; }
.sm-shell footer a { color: #c45c2a !important; }
.sm-shell .kakaotalk { z-index: 40 !important; pointer-events: auto !important; }
.sm-shell .kakaotalk a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sm-shell .modal,
.sm-shell .modal.active {
  display: none !important; visibility: hidden !important; pointer-events: none !important;
  position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
  z-index: 10050 !important; margin: 0 !important; padding: 24px 16px !important;
  align-items: center !important; justify-content: center !important; flex-direction: column !important;
  background: rgba(26, 21, 16, .5) !important; overflow: auto !important;
  transform: none !important;
}
.sm-shell .demoModalBG,
.sm-shell .modal-backdrop { display: none !important; }
.sm-shell .modal.sm-legal-open,
.sm-shell #module-captcha.in,
.sm-shell #module-captcha.show {
  display: flex !important; visibility: visible !important; pointer-events: auto !important; opacity: 1 !important;
}
.sm-shell #module-captcha .modal-dialog,
.sm-shell #module-captcha .modal-content,
.sm-shell #module-captcha .modal-body,
.sm-shell #module-captcha .modal-header,
.sm-shell #module-captcha #dynamic-captcha,
.sm-shell #module-captcha #g-recaptcha-container {
  display: block !important; visibility: visible !important; pointer-events: auto !important; opacity: 1 !important;
  position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important; float: none !important; margin: 0 auto !important; max-width: 360px;
}
.sm-shell #module-captcha .modal-content {
  width: 100% !important; background: #fff !important; border-radius: 20px !important;
  padding: 16px !important; box-shadow: 0 24px 60px rgba(15, 23, 42, .28) !important;
}
.sm-shell #module-captcha .modal-header {
  display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 12px; padding: 0 0 10px !important; border-bottom: 1px solid #eadfce;
  max-width: none;
}
.sm-shell #module-captcha .close {
  display: inline-flex !important; align-items: center; justify-content: center;
  position: relative; z-index: 6;
  width: 36px; height: 36px; margin: 0 !important; padding: 0 !important; border: 0 !important;
  background: transparent !important; font-size: 24px !important; line-height: 1 !important;
  color: #64748b !important; opacity: 1 !important; cursor: pointer; pointer-events: auto !important;
}
.sm-shell #module-captcha iframe,
.sm-shell #module-captcha .g-recaptcha {
  visibility: visible !important; pointer-events: auto !important; opacity: 1 !important;
}
.sm-shell .modal .modal-inner {
  position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  transform: none !important; float: none !important;
  width: 100% !important; max-width: 640px !important; max-height: 86vh; margin: 0 auto !important;
  padding: 24px 22px 18px !important; overflow: auto; box-sizing: border-box;
  background: #fff !important; border-radius: 20px !important; box-shadow: 0 24px 60px rgba(15, 23, 42, .28);
}
.sm-shell .modal .modal-inner__title { display: block !important; margin: 0 0 12px !important; font-size: 18px !important; font-weight: 800 !important; color: #1a1510 !important; text-align: left !important; }
.sm-shell .modal .modal-inner__desc { max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 6px 8px 0; font-size: 14px; line-height: 1.75; color: #334155; word-break: keep-all; white-space: pre-line; text-align: left !important; }
.sm-shell .modal .modal-inner__close,
.sm-shell .modal.terms .modal-inner__close,
.sm-shell .modal.texts .modal-inner__close,
.sm-shell .modal button.modal-inner__close {
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 100% !important; min-height: 48px !important; height: 48px !important;
  margin: 14px 0 0 !important; padding: 0 18px !important;
  border: 0 !important; border-radius: 12px !important;
  background: #f57f42 !important; background-image: none !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  font-family: inherit !important; font-size: 15px !important; font-weight: 800 !important;
  line-height: 48px !important; letter-spacing: 0 !important; text-indent: 0 !important;
  text-align: center !important; text-transform: none !important; white-space: nowrap !important;
  opacity: 1 !important; visibility: visible !important; overflow: visible !important;
  box-shadow: none !important; cursor: pointer !important;
}
.sm-shell .modal .modal-inner__close::before,
.sm-shell .modal .modal-inner__close::after { content: none !important; display: none !important; background: none !important; }
@media (max-width: 767px) {
  .sm-shell footer.sm-foot { padding: 22px 12px 88px !important; text-align: left !important; }
  .sm-foot__inner { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 10px; max-width: none; margin: 0; }
  .sm-foot__inner > .sm-brand, .sm-brand--foot { margin: 0; align-self: flex-start; }
  .sm-foot__copy, .sm-shell footer.sm-foot .footer_wrapper, .sm-shell footer.sm-foot .textbox, .sm-shell footer.sm-foot .textbox_1 {
    display: block !important; width: 100% !important; max-width: none !important; float: none !important;
    margin-left: 0 !important; padding-left: 0 !important; text-align: left !important; text-indent: 0 !important; white-space: normal !important;
    align-items: flex-start !important; align-self: stretch !important;
  }
  .sm-shell footer.sm-foot .textbox *, .sm-shell footer.sm-foot .textbox_1 *, .sm-shell footer.sm-foot .footer_wrapper p, .sm-shell footer.sm-foot .footer_wrapper div {
    padding-left: 0 !important; margin-left: 0 !important; text-indent: 0 !important; text-align: left !important;
  }
  .sm-shell footer.sm-foot .sm-brand--foot .sm-brand__sns,
  .sm-shell footer.sm-foot .sm-brand--foot .sm-brand__mong { font-size: 24px !important; }
}

.sm-hero { margin: 0 0 14px; padding: 4px 4px 0; }
.sm-hero__t { margin: 0 0 6px; font-size: 22px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: #0f172a; word-break: keep-all; }
.sm-hero__p { margin: 0; font-size: 14px; line-height: 1.6; color: #64748b; word-break: keep-all; }
@media (min-width: 768px) {
  .sm-hero__t { font-size: 26px; }
  .sm-hero__p { font-size: 15px; }
}

.sm-terms { margin: 4px 0 14px; transition: box-shadow .15s ease; }
.sm-terms label { font-size: 14px; font-weight: 500; color: #334155; cursor: pointer; }
.sm-terms.is-warn { box-shadow: 0 0 0 2px #e11d48; }

@media (max-width: 1023px) {
  .sm-shell .kakaotalk { bottom: 18px !important; }
}

.sm-shell .content .content-notify, .sm-shell .content-notify {
  position: relative !important;
  max-width: none !important; width: 100% !important;
  margin: 0 0 14px !important; padding: 14px 18px !important;
  border-radius: 16px !important; border: 1px solid #ffd9c2 !important;
  background: #fff3ea !important; background-color: #fff3ea !important; background-image: none !important;
  color: #9a4a1c !important;
  font-size: 14px !important; line-height: 1.5; text-align: left !important;
  overflow: visible !important; box-sizing: border-box;
}
.sm-shell .content .content-notify.error, .sm-shell .content-notify.error {
  background: #fee2e2 !important; background-color: #fee2e2 !important; color: #b91c1c !important; border-color: #fecaca !important;
}
.sm-shell .content .content-notify.success, .sm-shell .content-notify.success, .sm-shell #sm-ok, #sm-ok {
  background: #ffffff !important; background-color: #ffffff !important; background-image: none !important;
  color: #1a1510 !important;
  border: 2px solid #22c55e !important;
  padding: 18px 48px 18px 18px !important;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .16), 0 8px 24px rgba(80, 48, 20, .06);
}
.sm-shell .content-notify.success h4, .sm-ok__t { margin: 0 0 4px !important; font-size: 18px !important; font-weight: 800 !important; color: #15803d !important; }
.sm-shell .content-notify .content-notify__desc { display: block; color: inherit; white-space: normal; overflow: visible; word-break: keep-all; padding-right: 28px; }
.sm-shell .content-notify .sm-err-list {
  margin: 0; padding: 0 0 0 1.35em; list-style: decimal;
}
.sm-shell .content-notify .sm-err-list li {
  margin: 0 0 6px; padding: 0; line-height: 1.45;
}
.sm-shell .content-notify .sm-err-list li:last-child { margin-bottom: 0; }
.sm-shell .content-notify .close-btn, .sm-shell .content-notify .content-notify__close-btn {
  position: absolute !important; top: 10px !important; right: 10px !important; left: auto !important; bottom: auto !important;
  width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 8px !important;
  background: transparent !important; background-image: none !important;
  font-size: 22px !important; line-height: 32px !important; font-weight: 400 !important;
  color: #8a8278 !important; text-indent: 0 !important; text-align: center !important;
  cursor: pointer; z-index: 5; opacity: 1 !important; overflow: visible !important;
}
.sm-shell .content-notify .close-btn:hover, .sm-shell .content-notify .content-notify__close-btn:hover {
  background: transparent !important; color: #1a1510 !important; border-radius: 8px !important;
}
.sm-shell .content-notify .close-btn::before, .sm-shell .content-notify .close-btn::after,
.sm-shell .content-notify .content-notify__close-btn::before, .sm-shell .content-notify .content-notify__close-btn::after {
  content: none !important; display: none !important; background: none !important;
}
.sm-ok__x {
  position: absolute !important; top: 12px !important; right: 10px !important; left: auto !important;
  width: 32px !important; height: 32px !important; margin: 0 !important; padding: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  border: 0 !important; border-radius: 8px !important;
  background: transparent !important; background-image: none !important;
  font-size: 22px !important; line-height: 1 !important; font-weight: 400 !important; color: #8a8278 !important;
  cursor: pointer; z-index: 6; opacity: 1 !important;
}
.sm-ok__x:hover, .sm-ok__x:focus { color: #1a1510 !important; background: transparent !important; border-radius: 8px !important; outline: none; }
.sm-ok__head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 14px; padding-right: 8px; }
.sm-ok__ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #dcfce7; color: #15803d; font-size: 20px; }
.sm-ok__sub { margin: 0; font-size: 13px; line-height: 1.5; color: #5c6570 !important; }
.sm-ok__dl { margin: 0; display: grid; gap: 8px; }
.sm-ok__dl > div { display: grid; grid-template-columns: 88px 1fr; gap: 8px; align-items: start; font-size: 14px; }
.sm-ok__dl dt { margin: 0; color: #6b645c !important; font-weight: 700; }
.sm-ok__dl dd { margin: 0; color: #1a1510 !important; word-break: break-all; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .sm-ok__dl > div { grid-template-columns: 72px 1fr; font-size: 13px; }
  .sm-ok__head { gap: 10px; }
  .sm-ok__ico { width: 36px; height: 36px; font-size: 18px; }
}
.sm-shell .confirm-time { position: static !important; display: inline !important; overflow: visible !important; width: auto !important; max-width: none !important; height: auto !important; opacity: 1 !important; white-space: nowrap !important; vertical-align: baseline !important; }

.sm-shell section.content .content-inner:not(.sm-order):not(.sm-auth) { max-width: 760px; margin: 0 auto 16px; padding: 24px; border: 1px solid #eadfce; border-radius: 20px; background: #fff; box-shadow: 0 6px 20px rgba(80, 48, 20, .05); }
.sm-shell section.content .content-inner:not(.sm-auth) .content-inner__title { margin: 0 0 18px; font-family: inherit; font-size: 22px; font-weight: 800; line-height: 1.3; text-align: left; color: #0f172a; }
.sm-shell section.content .content-inner__title-desc { font-size: 14px; color: #64748b; }
.sm-shell section.content .control-label { font-size: 13px; font-weight: 700; color: #334155; }
.sm-shell section.content .form-control { height: 48px; border: 1.5px solid #eadfce; border-radius: 12px; background: #f7f3ee; font-family: inherit; font-size: 16px; color: #0f172a; box-shadow: none; }
.sm-shell section.content textarea.form-control { height: auto; min-height: 96px; }
.sm-shell section.content .form-control:focus { border-color: #f57f42; background: #fff; box-shadow: 0 0 0 3px rgba(245, 127, 66, .18); }
.sm-shell section.content .btn-primary { border: 0; border-radius: 12px; background: linear-gradient(135deg, #f8a159, #f57f42); font-family: inherit; font-weight: 700; color: #fff; }
.sm-shell section.content form .btn-primary { min-height: 48px; }
.sm-shell section.content .btn-default { border: 1.5px solid #eadfce; border-radius: 12px; background: #fff; font-family: inherit; font-weight: 700; color: #334155; }
.sm-shell section.content .table { margin-bottom: 0; }

.sm-shell section.content.orders, .sm-shell section.content.drip-feed, .sm-shell section.content.subscriptions { max-width: none !important; width: auto !important; }
.sm-shell section.content.orders .content-inner, .sm-shell section.content.drip-feed .content-inner, .sm-shell section.content.subscriptions .content-inner {
  max-width: none !important; width: 100%; margin: 0; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
}
.sm-shell section.content.orders .sm-pagehead, .sm-shell section.content.drip-feed .sm-pagehead, .sm-shell section.content.subscriptions .sm-pagehead { max-width: none; margin: 0 0 16px; }
.sm-shell section.content .content-inner .orders-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 16px 20px; font-size: 14px;
  background: #fff; border: 1px solid #f3ece2; border-radius: 16px; box-shadow: 0 2px 8px rgba(80, 48, 20, .04);
}
/* 상태 탭: 테두리 없는 연한 회색 알약, 선택된 탭만 주황 */
.sm-shell section.content .content-inner .orders-filter a { margin: 0; padding: 8px 14px; border: 0; border-radius: 999px; background: #f2f4f6; font-size: 13px; font-weight: 600; line-height: 1.3; color: #191f28; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.sm-shell section.content .content-inner .orders-filter a:hover { background: #e9ecef; color: #191f28; }
.sm-shell section.content .content-inner .orders-filter a.active { background: linear-gradient(135deg, #f8a159, #f57f42); color: #fff; }
.sm-shell section.content .content-inner .orders-filter form { position: static; display: flex; gap: 6px; height: auto; margin: 0 0 0 auto; }
.sm-shell section.content .content-inner .orders-filter form [name="search"] { width: 240px; height: 40px; margin: 0; padding: 0 14px; border: 1px solid #e5e8eb; border-radius: 12px; background: #f9fafb; font-size: 14px; box-shadow: none; }
.sm-shell section.content .content-inner .orders-filter form [name="search"]:focus { border-color: #f57f42; background: #fff; box-shadow: 0 0 0 3px rgba(245, 127, 66, .15); outline: 0; }
.sm-shell section.content .content-inner .orders-filter form [type="submit"] {
  width: auto; height: 40px; padding: 0 18px; border: 0; border-radius: 12px;
  background: linear-gradient(135deg, #f8a159, #f57f42); color: #fff; font-size: 14px; font-weight: 700;
}

/* ── 주문내역 표: 가로 스크롤 카드 (PC/모바일 공통, 세로로 풀지 않음) ──
   - 회색 격자선 제거, 행 사이 아주 옅은 선만 사용, 넉넉한 안쪽 여백
   - 표 바깥(.orders)이 가로 스크롤 영역. 양끝에 스크롤 가능함을 알려주는 옅은 그림자 */
.sm-shell section.content .content-inner .orders {
  padding: 0; border: 1px solid #f3ece2; border-radius: 16px; box-shadow: 0 2px 8px rgba(80, 48, 20, .04);
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: #d1d6db transparent;
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 32px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(25, 31, 40, .10), rgba(25, 31, 40, 0)) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(25, 31, 40, .10), rgba(25, 31, 40, 0)) right center / 10px 100% no-repeat scroll,
    #fff;
}
.sm-shell section.content .content-inner .orders::-webkit-scrollbar { height: 8px; }
.sm-shell section.content .content-inner .orders::-webkit-scrollbar-thumb { border-radius: 8px; background: #d1d6db; }
.sm-shell section.content .content-inner .orders::-webkit-scrollbar-track { background: transparent; }
.sm-shell section.content .content-inner .orders table.table { width: 100%; min-width: 1040px; margin: 0; border: 0; border-collapse: separate; border-spacing: 0; table-layout: auto; background: transparent; }
.sm-shell section.content .content-inner .orders th { padding: 14px 16px; border: 0; border-bottom: 1px solid #e5e8eb; background: #f2f4f6; font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; text-align: left; color: #191f28; white-space: nowrap; }
.sm-shell section.content .content-inner .orders td { padding: 18px 16px; border: 0; border-top: 1px solid #f2f4f6; font-size: 14px; line-height: 1.5; color: #191f28; text-align: left; vertical-align: middle; white-space: nowrap; }
.sm-shell section.content .content-inner .orders tbody tr:first-child td { border-top: 0; }
/* 덜 중요한 정보: 주문번호 / 일자 / 링크는 연한 회색 + 작은 글씨 */
.sm-shell section.content .content-inner .orders td.sm-otd-id { font-size: 14px; font-weight: 600; color: #191f28; font-variant-numeric: tabular-nums; }
.sm-shell section.content .content-inner .orders td.sm-otd-date { font-size: 13px; color: #191f28; font-variant-numeric: tabular-nums; }
/* 링크: 줄바꿈/말줄임 없이 한 줄로 끝까지. 길면 표를 가로 스크롤해서 본다 */
.sm-shell section.content .content-inner .orders td.sm-otd-link { min-width: 280px; max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; word-break: normal; overflow-wrap: normal; font-size: 13px; color: #191f28; }
.sm-shell section.content .content-inner .orders td.sm-otd-link a { color: inherit; text-decoration: none; white-space: nowrap; }
/* 핵심 정보: 금액(주황 굵게) / 상품명 / 상태는 진하게 */
.sm-shell section.content .content-inner .orders td.sm-otd-pay { font-size: 15px; font-weight: 700; color: #f57f42; font-variant-numeric: tabular-nums; }
.sm-shell section.content .content-inner .orders td.sm-otd-qty { color: #191f28; font-variant-numeric: tabular-nums; }
.sm-shell section.content .content-inner .orders td[data-label*="상품"],
.sm-shell section.content .content-inner .orders td[data-label*="서비스"] { min-width: 260px; max-width: 340px; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; font-weight: 600; color: #191f28; }
.sm-shell section.content .content-inner .orders td.sm-otd-st { font-weight: 700; color: #191f28; }
/* 주문번호 + 복사 버튼 */
.sm-oid { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
/* 복사 버튼: 글자 없이 아이콘만 (26px 정사각). 글자 <span> 은 화면에서만 숨기고 스크린리더용으로 남긴다. 터치 영역은 ::after 로 사방 6px 넓힘 */
.sm-copy {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; min-height: 0; padding: 0; border: 0; border-radius: 8px;
  background: #f2f4f6; color: #191f28; font-family: inherit; font-size: 12px; font-weight: 600;
  line-height: 1; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s;
}
.sm-copy::after { content: ""; position: absolute; top: -6px; right: -6px; bottom: -6px; left: -6px; }
.sm-copy span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sm-copy i { font-size: 12px; color: #f57f42; }
.sm-copy:hover { background: #fff1e8; color: #f57f42; text-decoration: none; }
.sm-copy:active { transform: scale(.97); }
.sm-copy.is-copied { background: #dcfce7; color: #166534; }
.sm-copy.is-copied i { color: #16a34a; }
/* 체크박스 열(맨 앞): 좁은 열 + 누르기 쉬운 영역. 헤더는 비워 둠(전체 선택 없음) */
.sm-shell section.content .content-inner .orders th.sm-chk-h,
.sm-shell section.content .content-inner .orders td.sm-otd-chk { width: 44px; min-width: 44px; padding: 0 0 0 16px; text-align: left; }
/* 체크박스 바로 옆 칸(주문번호)은 왼쪽 여백을 줄여 체크박스와 가깝게 (헤더/본문 동일하게) */
.sm-shell section.content .content-inner .orders th.sm-chk-h + th,
.sm-shell section.content .content-inner .orders td.sm-otd-chk + td { padding-left: 10px; }
/* 주문번호 열: 오른쪽 여백을 줄이고 다음 열(주문일자) 왼쪽 여백도 줄여 열 사이 간격을 16px 로 (헤더/본문 동일하게) */
.sm-shell section.content .content-inner .orders th.sm-chk-h + th,
.sm-shell section.content .content-inner .orders td.sm-otd-id { width: 1%; padding-right: 4px; }   /* width:1% = 내용 폭만큼만 차지(남는 가로 공간이 이 열로 퍼지지 않게) */
.sm-shell section.content .content-inner .orders th.sm-chk-h + th + th,
.sm-shell section.content .content-inner .orders td.sm-otd-id + td { padding-left: 12px; }
/* 헤더/본문 정렬 통일: 패널 기본 CSS 가 th.text-center, td.text-right 같은 클래스로 열마다 정렬을 다르게 줘서 제목과 내용이 어긋났다. 모두 왼쪽 정렬로 고정 */
.sm-shell section.content .content-inner .orders th,
.sm-shell section.content .content-inner .orders td,
.sm-shell section.content .content-inner .orders th.text-center,
.sm-shell section.content .content-inner .orders td.text-center,
.sm-shell section.content .content-inner .orders th.text-right,
.sm-shell section.content .content-inner .orders td.text-right { text-align: left !important; }
/* 체크박스: 패널 기본 CSS 가 input 을 숨기는 경우가 있어, 화면에 보이는 네모(.sm-chk__m)를 직접 그린다.
   실제 input 은 투명하게 그 위에 겹쳐 두어 클릭/키보드/접근성은 그대로 동작한다. */
/* display:flex(블록) 로 둬서 글자 줄 기준선(baseline)에 끌려 올라가지 않게 하고, 칸의 vertical-align: middle 로 주문번호와 세로 중앙을 맞춘다 */
.sm-chk { position: relative; display: flex; align-items: center; justify-content: center; width: 28px; height: 44px; margin: -12px 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sm-shell section.content .content-inner .orders td.sm-otd-chk { vertical-align: middle; }
.sm-shell section.content .content-inner .orders .sm-chk input.sm-chk__i {
  position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important;
  margin: 0 !important; padding: 0 !important; opacity: 0 !important; cursor: pointer; z-index: 2;
  -webkit-appearance: none; appearance: none;
}
.sm-chk__m { position: relative; display: block; box-sizing: border-box; width: 28px; height: 28px; border: 2px solid #8b95a1; border-radius: 8px; background: #fff; transition: background .12s, border-color .12s; pointer-events: none; }
.sm-chk:hover .sm-chk__m { border-color: #f57f42; }
/* V 표시: 네모 정중앙에 요소를 놓고(50%/50% + 자기 크기 절반 보정) 회전한다.
   네모를 7배 확대해 픽셀로 측정해서 치우친 만큼 translate 로 보정한다. */
.sm-chk__m::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 9px; margin: -6px 0 0 -3.5px; border: solid #fff; border-width: 0 3px 3px 0; transform: translate(1px, 1.1px) rotate(45deg) scale(0); transition: transform .12s; }
.sm-chk__i:checked + .sm-chk__m { border-color: #f57f42; background: #f57f42; }
.sm-chk__i:checked + .sm-chk__m::after { transform: translate(1px, 1.1px) rotate(45deg) scale(1); }
.sm-chk__i:focus-visible + .sm-chk__m { outline: 2px solid #f57f42; outline-offset: 2px; }
.sm-shell section.content .content-inner .orders tbody tr.is-selected td { background: #fff7f0; }
.sm-shell section.content .content-inner .orders tbody tr:hover td { background: #fffaf5; }
.sm-shell section.content .content-inner .orders tbody tr.is-selected:hover td { background: #fff3e8; }
/* 선택 바: 1건 이상 체크했을 때만 표 아래 화면 하단에 붙어서 나타남 */
.sm-selbar[hidden] { display: none !important; }
.sm-selbar {
  position: sticky; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 12px 0 0; padding: 10px 10px 10px 16px; border-radius: 16px; background: #191f28; color: #fff;
  box-shadow: 0 8px 24px rgba(25, 31, 40, .22); font-size: 14px;
}
/* 왼쪽부터: 선택한 주문번호 복사 → 선택 해제, 맨 오른쪽: N건 선택 (HTML 순서와 무관하게 order 로 배치) */
.sm-selbar { justify-content: flex-start; }
.sm-selbar__copy { order: 0; }
.sm-selbar__clear { order: 1; }
.sm-selbar__n { order: 2; margin: 0 6px 0 auto; font-weight: 600; color: #e5e8eb; white-space: nowrap; }
/* 768px 이상(폴드 펼침, 태블릿, PC): 왼쪽 정렬, 폭 40% (최소 380px, 최대 480px). 카카오톡 버튼(오른쪽 아래)까지 닿지 않는다 */
@media (min-width: 768px) {
  .sm-selbar { width: 40%; min-width: 380px; max-width: 480px; }
}
/* 767px 이하(일반 폰, 폴드 접힘): 카카오톡 버튼(오른쪽 아래 56px) 위로 바를 올려서 화면 폭을 전부 쓴다 */
@media (max-width: 767px) {
  .sm-selbar { bottom: 84px; width: auto; }
}
/* 420px 이하(S9+ 등 좁은 폰): 줄이 애매하게 꺾이지 않게 2줄로 고정. 1줄째 복사 버튼 전체 폭, 2줄째 왼쪽 선택 해제 / 오른쪽 N건 선택 */
@media (max-width: 420px) {
  .sm-selbar__copy { flex: 1 1 100%; }
}
.sm-selbar__n b { margin-right: 2px; font-size: 16px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.sm-selbar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 10px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.sm-selbar__clear { background: rgba(255, 255, 255, .12); color: #e5e8eb; }
.sm-selbar__clear:hover { background: rgba(255, 255, 255, .2); }
.sm-selbar__copy { background: linear-gradient(135deg, #f8a159, #f57f42); color: #fff; }
.sm-selbar__copy:hover { filter: brightness(1.05); }
.sm-selbar__copy:active, .sm-selbar__clear:active { transform: scale(.97); }
.sm-selbar__copy.is-copied { background: #16a34a; }
.sm-shell section.content .content-inner .orders-pagination { margin: 16px 0 0; padding: 0; }
.sm-shell section.content .content-inner .orders-pagination li { border: 0; }
.sm-shell section.content .content-inner .orders-pagination li a { min-width: 36px; height: 36px; line-height: 36px; border: 0; border-radius: 10px; background: #f2f4f6; text-align: center; font-weight: 600; color: #191f28; text-decoration: none; }
.sm-shell section.content .content-inner .orders-pagination li a:hover { background: #e9ecef; }
.sm-shell section.content .content-inner .orders-pagination li.active a { background: linear-gradient(135deg, #f8a159, #f57f42); color: #fff; }
@media (max-width: 767px) {
  .sm-shell section.content .content-inner:not(.sm-order):not(.sm-auth) { padding: 18px 16px; border-radius: 16px; }
  .sm-shell section.content.orders .content-inner, .sm-shell section.content.drip-feed .content-inner, .sm-shell section.content.subscriptions .content-inner { padding: 0 !important; }
  .sm-shell section.content .content-inner .orders-filter form { width: 100%; margin: 4px 0 0; }
  .sm-shell section.content .content-inner .orders-filter form [name="search"] { flex: 1; width: auto; }
}
/* 태블릿/모바일: 표를 세로 카드로 풀지 않고 가로 스크롤 유지. 여백만 조금 줄인다 */
@media (max-width: 1023px) {
  .sm-shell section.content .content-inner .orders th { padding: 12px 14px; }
  .sm-shell section.content .content-inner .orders td { padding: 16px 14px; }
  .sm-shell section.content .content-inner .orders td.sm-otd-chk { padding-left: 14px; }
  .sm-selbar { padding: 8px 8px 8px 14px; }
  .sm-selbar button { padding: 0 12px; }
}
body.sm-shell:not(.sm-lock) { overflow: visible; }

.sm-shell .content-notify.mobile { display: none !important; }
.sm-pagehead { max-width: none; margin: 0 0 16px; }
.sm-pagehead__t { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; }
.sm-empty { padding: 48px 20px; text-align: center; }
.sm-empty__t { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: #0f172a; }
.sm-empty__p { margin: 0 0 18px; font-size: 14px; color: #64748b; }
.sm-empty .sm-btn { display: inline-flex; min-width: 160px; }
.orders.is-empty table { display: none; }

.sm-shell section.content input[type="text"],
.sm-shell section.content input[type="email"],
.sm-shell section.content input[type="password"] { margin-bottom: 0 !important; }
.sm-shell section.content .form-group { margin-bottom: 16px; }
.sm-shell section.content.account .content-inner,
.sm-shell section.content.addfunds .content-inner { max-width: 640px; }
.sm-shell section.content.addfunds .btn,
.sm-shell section.content.addfunds a.btn { min-height: 48px; padding: 12px 22px; border: 0; border-radius: 14px; }
.sm-shell section.content.addfunds .content-inner p,
.sm-shell section.content.addfunds .content-inner li,
.sm-shell section.content.addfunds .content-inner span { font-size: 14px; line-height: 1.7; color: #334155; word-break: keep-all; }

.sm-shell section.content.api { max-width: 860px; margin: 0 auto; }
.sm-shell section.content.api .content-inner { max-width: 860px; }
.sm-shell section.content.api table { width: 100%; margin: 0 0 16px; border-collapse: collapse; background: #fff; }
.sm-shell section.content.api th, .sm-shell section.content.api td { padding: 10px 14px; border: 1px solid #eadfce; font-size: 14px; text-align: left; vertical-align: top; word-break: break-word; }
.sm-shell section.content.api th { background: #f7f3ee; font-size: 12px; color: #64748b; white-space: nowrap; }
.sm-shell section.content.api pre, .sm-shell section.content.api code { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 14px; border-radius: 12px; background: #16131c; color: #ffe0c2; font-size: 12px; line-height: 1.55; }
.sm-shell section.content.api h3, .sm-shell section.content.api h4 { margin: 22px 0 10px; font-size: 16px; font-weight: 800; color: #0f172a; }

@media (max-width: 1023px) {
  .sm-shell .kakaotalk { right: 16px !important; left: auto !important; bottom: 16px !important; }
  .sm-shell footer { padding-bottom: 80px !important; }
  .sm-shell section.content.addfunds .content-inner:first-of-type { padding-bottom: 80px; }
}
@media (max-width: 767px) {
  .sm-pagehead__t { font-size: 20px; }
  .sm-shell footer .summary { display: none; }
  .sm-shell section.content .content-inner .orders-filter { padding: 14px 16px; margin: 0 0 12px; gap: 6px; }
  .sm-shell section.content .content-inner .orders-filter a { padding: 7px 12px; }
  .sm-shell section.content .content-inner .orders { border-radius: 16px; }
  .sm-shell section.content.addfunds .content-inner .btn,
  .sm-shell section.content.addfunds .content-inner a.btn,
  .sm-shell section.content.addfunds .content-inner button {
    display: block !important; float: none !important; width: 100% !important; margin: 0 0 10px !important; text-align: center;
  }
}

.sm-prose h2, .sm-prose h3, .sm-prose h4 { margin: 20px 0 8px; font-size: 16px; font-weight: 800; color: #0f172a; }
.sm-prose p { margin: 0 0 10px; }
.sm-prose ul, .sm-prose ol { margin: 0 0 12px; padding-left: 18px; }
.sm-prose li { margin: 0 0 6px; }
.sm-prose a { color: #f57f42; font-weight: 700; }
.sm-page .sm-tabs { scrollbar-width: none; }
.sm-page .sm-tabs::-webkit-scrollbar { display: none; }

.sm-orderform #fields .form-group { margin: 0 0 22px; }
.sm-orderform #fields .form-control, .sm-orderform #fields input, .sm-orderform #fields select, .sm-orderform #fields textarea {
  width: 100%; min-height: 50px; margin-bottom: 0 !important; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #f9fafb; font-family: inherit; font-size: 16px;
}
.sm-orderform #fields small { display: block; margin-top: 6px; font-size: 12px; color: #64748b; }
.sm-itag { display: grid; gap: 10px; margin: 0 0 16px; }
.sm-itag__btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px;
  border: 0; border-radius: 12px; background: linear-gradient(180deg, #f9a862 0%, #f57f42 100%);
  font-family: inherit; font-size: 16px; font-weight: 700; color: #fff; cursor: pointer;
  box-shadow: 0 4px 12px rgba(245, 127, 66, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sm-itag__btn:hover { color: #fff; box-shadow: 0 6px 16px rgba(245, 127, 66, .38), inset 0 1px 0 rgba(255, 255, 255, .3); }
.sm-itag__btn:active { transform: translateY(1px); }
.sm-itag__btn:disabled { opacity: .6; cursor: wait; }
.sm-itag .control-label { margin: 4px 0 0; font-size: 13px; font-weight: 700; color: #334155; }
.sm-itag .tag-select { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid #e5e7eb; border-radius: 12px; background: #f9fafb; font-family: inherit; font-size: 16px; }

/* ── 주문 페이지 입력/제출 최종 덮어쓰기 ──
   위쪽의 `.sm-shell section.content .form-control`(특이도 높음)이 주문 폼 스타일을 이겨버리므로,
   같은 특이도 이상으로 다시 선언한다. (반드시 파일 맨 아래 유지) */
.sm-shell section.content .sm-orderform .form-control,
.sm-shell section.content .sm-orderform select.form-control,
.sm-shell section.content .sm-orderform textarea.form-control,
.sm-shell section.content .sm-orderform input[type=text].form-control,
.sm-shell section.content .sm-orderform input[type=number].form-control {
  height: auto; min-height: 50px; padding: 12px 16px; border: 1px solid #e5e7eb; border-radius: 12px;
  background: #f9fafb; box-shadow: none;
}
.sm-shell section.content .sm-orderform .form-control:focus,
.sm-shell section.content .sm-orderform #fields input:focus,
.sm-shell section.content .sm-orderform #fields select:focus,
.sm-shell section.content .sm-orderform #fields textarea:focus,
.sm-shell section.content .sm-orderform .tag-select:focus {
  outline: none; border-color: #f57f42; background: #fff; box-shadow: 0 0 0 4px rgba(245, 127, 66, .12);
}
.sm-shell section.content .sm-orderform #charge.form-control,
.sm-shell section.content .sm-orderform #sm-b-charge.form-control { background: #fff8f3; border-color: #ffe3d1; }
.sm-shell section.content .sm-orderform textarea.form-control { min-height: 110px; }
.sm-shell section.content .sm-orderform .sm-submit { min-height: 56px; border-radius: 14px !important; }

/* ── 푸터: Toss 하단 정보부 스타일 ─────────────────────────────
   - 위의 기존 푸터 규칙(!important 다수)과 JS 가 넣는 좌측정렬 스타일을 이기도록 우선순위를 높여 다시 선언한다.
   - 마크업/링크/JS 는 그대로. 색·간격·정렬만 변경. (반드시 파일 맨 아래 유지)
   - 푸터 본문(custom_footer)은 패널 설정 HTML 이라 요소별 강약은 strong/b/h4 같은 태그에만 적용된다. */
body.sm-shell footer.sm-foot {
  margin: 0 !important; padding: 20px 16px 88px !important;   /* 좌우 16px = 본문 좌우 여백(12px) + .sm-order 안쪽 여백(4px) */
  background: transparent !important; border-top: 0 !important;
  color: #8b95a1 !important; font-size: 12px; line-height: 1.8; text-align: left !important;
}
/* 카드: 본문 카드(.sm-s)와 똑같은 흰색 + 옅은 테두리 + 부드러운 그림자 + 둥근 모서리 16px. 폭·좌우 끝선도 본문 카드와 맞춘다 */
body.sm-shell .sm-main footer.sm-foot .sm-foot__inner {
  display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important;
  gap: 14px !important; max-width: 760px !important; margin: 0 auto !important; padding: 22px 20px !important;
  background: #fff !important; border: 1px solid #f3ece2 !important; border-radius: 16px !important; box-shadow: 0 2px 8px rgba(80, 48, 20, .04) !important;
}
body.sm-shell footer.sm-foot .sm-foot__copy { flex: 1 1 auto; width: 100%; max-width: 640px; min-width: 0; }
/* 로고: 조금 작게, 색은 그대로(SNS 진하게 / 몽 주황) */
body.sm-shell footer.sm-foot .sm-brand--foot { margin: 0 !important; align-self: flex-start !important; }
body.sm-shell footer.sm-foot .sm-brand--foot .sm-brand__sns,
body.sm-shell footer.sm-foot .sm-brand--foot .sm-brand__mong { font-size: 22px !important; }
/* 본문(사업자 정보): 연한 회색, Regular, 여유 있는 줄 간격 */
body.sm-shell footer.sm-foot .sm-foot__copy,
body.sm-shell footer.sm-foot .footer_wrapper,
body.sm-shell footer.sm-foot .textbox,
body.sm-shell footer.sm-foot .textbox_1,
body.sm-shell footer.sm-foot .sm-foot__copy * {
  color: #8b95a1 !important; font-size: 12px; font-weight: 400 !important; line-height: 1.8 !important; letter-spacing: -0.005em;
  word-break: keep-all; overflow-wrap: anywhere;
}
body.sm-shell footer.sm-foot .footer_wrapper p,
body.sm-shell footer.sm-foot .textbox p,
body.sm-shell footer.sm-foot .textbox_1 p { margin-bottom: 4px !important; }
/* 강조: 회사명/제목류 태그는 살짝 진하게 */
body.sm-shell footer.sm-foot .sm-foot__copy strong,
body.sm-shell footer.sm-foot .sm-foot__copy b,
body.sm-shell footer.sm-foot .sm-foot__copy h1,
body.sm-shell footer.sm-foot .sm-foot__copy h2,
body.sm-shell footer.sm-foot .sm-foot__copy h3,
body.sm-shell footer.sm-foot .sm-foot__copy h4 { color: #4e5968 !important; font-weight: 600 !important; }
/* 본문 안의 일반 링크(전화/이메일 등)는 밑줄 없이 본문 톤 */
body.sm-shell footer.sm-foot .sm-foot__copy a { color: #8b95a1 !important; text-decoration: none; }
/* 이용약관 / 개인정보처리방침: 핵심 링크라 진하게, 밑줄 제거, 위에 옅은 구분선 */
body.sm-shell footer.sm-foot .termsBtnbox {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 18px;
  margin: 14px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid #f1f3f5; justify-content: flex-start;
}
/* 중복 제거: 패널 푸터 HTML 에 약관/개인정보 버튼 묶음이 2개 들어 있다.
   .textbox 안의 .termsBtnbox.mobile 은 숨기고, .footer_wrapper 바로 아래 것 1개만 모든 화면에서 보여준다.
   (숨긴 쪽도 DOM 에는 남아 있어 script.js 의 클릭 연결/링크 동작은 그대로) */
body.sm-shell footer.sm-foot .textbox .termsBtnbox.mobile { display: none !important; }
body.sm-shell footer.sm-foot .footer_wrapper > .termsBtnbox:not(.mobile) { display: flex !important; }
/* 버튼 사이 세로선 요소는 간격(gap)으로 대체 */
body.sm-shell footer.sm-foot .footer_line_terms { display: none !important; }
body.sm-shell footer.sm-foot .termsBtnbox button,
body.sm-shell footer.sm-foot .termsBtnbox a,
body.sm-shell footer.sm-foot .termsBtnbox a.sm-foot__legal {
  padding: 4px 0 !important; border: 0 !important; border-left: 0 !important; background: transparent !important;
  font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important;
  color: #4e5968 !important; text-decoration: none !important; cursor: pointer;
}
body.sm-shell footer.sm-foot .termsBtnbox button + button,
body.sm-shell footer.sm-foot .termsBtnbox a.sm-foot__legal + a.sm-foot__legal { padding-left: 0 !important; border-left: 0 !important; }
body.sm-shell footer.sm-foot .termsBtnbox button:hover,
body.sm-shell footer.sm-foot .termsBtnbox a:hover { color: #191f28 !important; }
body.sm-shell footer.sm-foot .termsBtnbox button:focus-visible,
body.sm-shell footer.sm-foot .termsBtnbox a:focus-visible { outline: 2px solid #f57f42; outline-offset: 2px; border-radius: 4px; }

/* PC: 본문 카드 영역과 좌우 끝을 맞추고 글자는 13px */
@media (min-width: 768px) {
  body.sm-shell .sm-main footer.sm-foot .sm-foot__inner { padding: 26px 28px !important; }
  body.sm-shell footer.sm-foot .sm-foot__copy,
  body.sm-shell footer.sm-foot .footer_wrapper,
  body.sm-shell footer.sm-foot .textbox,
  body.sm-shell footer.sm-foot .textbox_1,
  body.sm-shell footer.sm-foot .sm-foot__copy * { font-size: 13px; }
}
@media (min-width: 1024px) {
  /* 주문하기 버튼과 푸터 카드 사이를 넉넉히 띄운다 (위 여백 36px) */
  body.sm-shell footer.sm-foot { padding: 36px 28px 48px !important; }
  body.sm-shell .sm-main footer.sm-foot .sm-foot__inner { max-width: none !important; margin: 0 !important; }
  /* PC 레일 레이아웃: 본문 영역(.sm-order)의 좌우 안쪽 여백 20px 과 같게 맞춰 카드 좌우 끝선을 일치시킨다 */
  body.sm-shell .sm-main.has-rail > footer.sm-foot { padding: 36px 20px 48px !important; }
}
/* 모바일: 좌우 여백 확보, 줄 간격 넉넉하게 (하단 88px 은 카카오톡 버튼 자리) */
@media (max-width: 767px) {
  body.sm-shell footer.sm-foot { padding: 20px 16px 88px !important; }
  body.sm-shell .sm-main footer.sm-foot .sm-foot__inner { max-width: none !important; margin: 0 !important; padding: 22px 20px !important; gap: 12px !important; }
  body.sm-shell footer.sm-foot .sm-foot__copy,
  body.sm-shell footer.sm-foot .footer_wrapper,
  body.sm-shell footer.sm-foot .textbox,
  body.sm-shell footer.sm-foot .textbox_1,
  body.sm-shell footer.sm-foot .sm-foot__copy * { font-size: 12px; line-height: 1.85 !important; }
  body.sm-shell footer.sm-foot .sm-brand--foot .sm-brand__sns,
  body.sm-shell footer.sm-foot .sm-brand--foot .sm-brand__mong { font-size: 22px !important; }
}

/* ── 주문 페이지: 주문하기 버튼 ↔ 푸터 카드 간격을 한 곳(푸터 위 여백)에서만 준다 ─────────────
   - 폼/단계/본문/섹션 아래에 쌓여 있던 여백(80·14·40·40px 등)을 0 으로 정리 → 어느 해상도에서나 간격이 같다.
   - 카카오톡 버튼 자리는 푸터 아래 여백(88px)이 이미 확보하므로 폼 아래 80px 은 필요 없다.
   - 간격: 모바일·태블릿 32px / PC(1024px~) 40px. 색·크기·모양은 변경 없음. (반드시 파일 맨 아래 유지) */
.sm-main.has-rail .sm-orderform { padding-bottom: 0; }
.sm-main.has-rail .sm-step { margin-bottom: 0; }
.sm-main.has-rail .sm-order { padding-bottom: 0; }
.sm-main.has-rail > section.content { padding-bottom: 0 !important; }
body.sm-shell .sm-main.has-rail > footer.sm-foot { padding-top: 32px !important; }
@media (min-width: 1024px) {
  body.sm-shell .sm-main.has-rail > footer.sm-foot { padding-top: 40px !important; }
}
/* ── 공지사항: 모바일·태블릿 안내 박스(.sm-nbar) + PC 오른쪽 카드(.sm-rcard--notice) ─────────────
   - 문구는 layout.twig 맨 위 "공지사항" 블록에서 수정. 1280px 이상에서는 오른쪽 카드가 대신 보여서 박스는 숨긴다. */
/* 모바일 박스는 <details> 접이식: 접힘 상태는 제목 한 줄 높이만 차지, 오른쪽 화살표로 열고 닫는다 (JS 불필요) */
.sm-nbar { display: block; margin: 10px 16px 0; padding: 0; border: 1px solid #ffd9c2; border-radius: 14px; background: #fff8f3; color: #5c534c; }
.sm-nbar__sum { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sm-nbar__sum::-webkit-details-marker { display: none; }
.sm-nbar__sum::marker { content: ""; }
.sm-nbar__ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #f57f42; font-size: 13px; }
.sm-nbar__t { flex: 0 1 auto; min-width: 0; font-size: 14px; font-weight: 800; line-height: 1.3; color: #191f28; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-nbar__d { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #8b95a1; }
.sm-nbar__arrow { flex: 0 0 auto; margin-left: auto; width: 8px; height: 8px; margin-right: 3px; border: solid #8b95a1; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
.sm-nbar[open] .sm-nbar__arrow { transform: translateY(3px) rotate(-135deg); }
.sm-nbar__body { padding: 0 14px 12px 42px; }
.sm-nbar p { margin: 0 0 2px; font-size: 13px; line-height: 1.6; color: #5c534c; word-break: keep-all; }
.sm-nbar p:last-child { margin-bottom: 0; }
.sm-nbar b { color: #191f28; font-weight: 700; }
.sm-nbar--warn { border-color: #fde68a; background: #fffbeb; }
.sm-nbar--warn .sm-nbar__ico { color: #d97706; }
.sm-nbar + section.content { padding-top: 12px !important; }
.sm-nbar + .sm-nbar { margin-top: 8px; }
@media (min-width: 1024px) {
  .sm-nbar { margin: 28px 28px 0; }
  .sm-nbar + section.content { padding-top: 14px !important; }
}
@media (min-width: 1280px) {
  .sm-nbar { display: none; }
}
.sm-rcard--notice { background: #fff8f3; border-color: #ffd9c2; }
.sm-rcard--notice .sm-rcard__t { margin-bottom: 10px; color: #191f28; }
.sm-rcard--notice p { margin: 0 0 6px; color: #5c534c; word-break: keep-all; }
.sm-rcard--notice p:last-child { margin-bottom: 0; }
.sm-rcard--notice b { color: #191f28; font-weight: 700; }
.sm-rcard__d { margin-left: auto; font-size: 12px; font-weight: 600; color: #8b95a1; }
.sm-rcard--warn { background: #fffbeb; border-color: #fde68a; }
.sm-rcard--warn .sm-rcard__t i { color: #d97706; }

/* ── 커스텀 댓글 서비스: 댓글 입력칸 아래 "현재 N줄 = N개" 표시 (script.js initCommentLines 가 만든다) ── */
.sm-cmtcount { margin: 8px 2px 0; font-size: 13px; font-weight: 600; line-height: 1.5; color: #f57f42; }
.sm-cmtcount.is-bad { color: #e11d48; }
.sm-shell #field-orderform-fields-quantity[data-sm-ro="1"] { background: #f2f4f6; color: #191f28; cursor: not-allowed; }
/* 댓글 서비스: 수량 칸을 댓글 입력칸 아래로 (script.js 가 #fields 에 sm-cmt-on, 각 칸에 sm-o-cmt / sm-o-qty 를 붙인다. 표시 순서만 바뀌고 전송 값은 그대로) */
.sm-shell .sm-cmt-on { display: flex; flex-direction: column; }
.sm-shell .sm-cmt-on > .sm-o-cmt { order: 1; }
.sm-shell .sm-cmt-on > .sm-o-qty { order: 2; }
.sm-cmthint { margin: 0 0 10px; border: 1px solid #ffd9c2; border-radius: 12px; background: #fff8f3; color: #5c534c; word-break: keep-all; }
.sm-cmthint__s { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 14px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; color: #191f28; -webkit-tap-highlight-color: transparent; }
.sm-cmthint__s::-webkit-details-marker { display: none; }
.sm-cmthint__s::marker { content: ""; }
.sm-cmthint__a { flex: 0 0 auto; width: 8px; height: 8px; margin-right: 3px; border: solid #8b95a1; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; }
.sm-cmthint[open] .sm-cmthint__a { transform: translateY(3px) rotate(-135deg); }
.sm-cmthint__l { margin: 0; padding: 0 14px 12px 28px; font-size: 13px; line-height: 1.65; color: #5c534c; }
.sm-cmthint__l b { color: #191f28; font-weight: 700; }

/* "[서비스 정상 가동중] 체크시간" 띠는 실제 상태 점검이 아니므로 숨긴다 (요소는 그대로 두어 패널 스크립트 호환 유지) */
.sm-shell .content-notify.neworder_notify { display: none !important; }

/* PC 사이드바 로고: 조금 키우고, 아래 계정 카드/메뉴 아이콘과 왼쪽 선을 맞춘다 */
@media (min-width: 1024px) {
  .sm-shell .sm-side__head { padding: 26px 18px 18px 22px; }
  .sm-shell .sm-side__head .sm-brand__sns,
  .sm-shell .sm-side__head .sm-brand__mong { font-size: 30px; }
}