@charset "utf-8";
/****************************************************************************************************************
	Custella UI — shared look for cards, modals, buttons and inputs. Values come from tokens.css.
	Load after contents.css. Selectors wrapped in :where() keep base specificity, so screen-specific
	rules (e.g. .fds-pop .layerPop-area) still win.
****************************************************************************************************************/

.layerPop-wrap {background-color:rgba(15,23,42,.45);}

/* 01. Page card (lite layout) */
[data-modal-key="page"] {height:auto;background:linear-gradient(180deg, #eef1ff 0%, var(--color-page-bg) 420px, #f9fafc 100%);}
[data-modal-key="page"] > .layerPop-area {border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);}
[data-modal-key="page"] .layerPop-large-tit {color:var(--color-text);font-size:24px;font-weight:700;line-height:1.35;}
[data-modal-key="page"] .layerPop-small-tit {color:var(--color-text);font-size:18px;font-weight:700;}

/* 02. Modal */
:where(.layerPop-wrap:not([data-modal-key="page"])) > .layerPop-area {border:none;border-radius:var(--radius-xl);box-shadow:var(--shadow-modal);padding:40px 36px 32px;}
:where(.layerPop-wrap) .layerPop-medium-tit {color:var(--color-text);font-size:20px;font-weight:700;line-height:1.4;}
:where(.layerPop-wrap) .layerPop-default-txt {color:var(--color-text-sub);font-size:14px;line-height:1.6;word-break:keep-all;}
:where(.layerPop-wrap) .layerPop-default-txt b {color:var(--color-text);}
:where(.layerPop-wrap) .figure-area img {max-width:100%;}
.layerPop-contents .layerPop-medium-tit {margin:12px 0 12px;}
.layerPop-footer {padding-top:28px;}
.layerPop-footer[data-column-value="2"] {display:flex;gap:8px;}
.layerPop-footer[data-column-value="2"] [class*="-btn"] {flex:1 1 0;min-width:0;max-width:none;padding-left:12px;padding-right:12px;}
.layerPop-footer[data-column-value="2"] [class*="-btn"] + [class*="-btn"] {margin-left:0;}

/* 03. Tabs */
.tab-list {border-bottom:1px solid var(--color-border);}
.tab-list li {color:var(--color-disabled-text);font-size:15px;font-weight:600;}
.tab-list .tab-list-btn,
.tab-list .tab-function-btn {padding:12px 0;width:100%;}
.tab-list [data-tab-action="active"] {color:var(--color-primary);border-bottom:2px solid var(--color-primary);margin-bottom:-1px;}
.layerPop-contents [data-tab-action="active"] {color:var(--color-primary);}
.layerPop-contents .tab-article {margin-top:24px;}

/* 04. Text */
.form-small-tit {color:var(--color-text-label);font-size:13px;font-weight:600;}
.form-default-txt {color:var(--color-text-sub);font-size:14px;line-height:1.6;word-break:keep-all;}
.form-default-txt .output-form {color:var(--color-text);font-weight:600;}
.form-guide-txt {color:var(--color-text-muted);font-size:12.5px;line-height:1.5;}
.form-validation-txt {color:var(--color-danger);font-size:12.5px;line-height:1.5;margin-top:6px;}
.form-alert-txt {background:var(--color-danger-soft);border:1px solid var(--color-danger-line);border-radius:var(--radius-md);color:var(--color-danger);font-size:13px;line-height:1.5;margin-bottom:24px;padding:12px 14px;text-align:left;word-break:keep-all;}
.form-alert-txt:before {width:18px;height:18px;margin-right:8px;vertical-align:-4px;}
.form-alert-txt .form-default-txt {color:var(--color-danger);font-size:12px;text-align:left;}

/* 05. Inputs (42px → 48px; icons positioned on the input follow) */
.input-form {border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);color:var(--color-text);font-size:15px;height:var(--control-height);line-height:var(--control-height);padding:0 16px;transition:border-color .15s, box-shadow .15s;}
.input-form::placeholder {color:var(--color-disabled-text);}
.input-form:focus {border-color:var(--color-primary);box-shadow:var(--focus-ring);outline:none;}
.input-form.invalid {border-color:var(--color-danger);}
.input-form[disabled], .input-form[readonly] {background:var(--color-surface-subtle);color:var(--color-text-muted);}
.password-field .password-icon-btn,
.refresh-field .refresh-icon-btn,
.addressSearch-field .inquiry-submit-btn,
.combination-field [class*="-btn"],
.combination-field .form-time-text {height:var(--control-height);line-height:var(--control-height);}
.combination-field .sendCode-function-btn {color:var(--color-primary);font-size:13px;}
.combination-field [class*="-btn"][disabled] {color:var(--color-disabled-text);}
.combination-field .form-time-text {color:var(--color-danger);font-size:13px;right:86px;}
.combination-field .input-form {padding-right:150px;}
.select-field .select-function-btn {border-color:var(--color-border-strong);border-radius:var(--radius-sm);height:var(--control-height);line-height:var(--control-height);}

/* 06. Buttons */
.main-submit-btn, .main-function-btn, .main-link-btn, a.main-link-btn,
.general-submit-btn, a.general-submit-btn, .general-function-btn, a.general-function-btn, .general-link-btn, a.general-link-btn,
.side-submit-btn, .side-function-btn, a.side-function-btn, .side-link-btn, a.side-link-btn {border-radius:var(--radius-md);font-size:16px;font-weight:600;height:var(--control-height);line-height:var(--control-height);transition:background-color .15s, border-color .15s, color .15s;}
.main-submit-btn:hover, a.main-submit-btn:hover,
.main-function-btn:hover, a.main-function-btn:hover,
.main-link-btn:hover, a.main-link-btn:hover {background-color:var(--color-primary-hover);}
.main-submit-btn[disabled], a.main-submit-btn[disabled], .main-submit-btn[disabled]:hover, a.main-submit-btn[disabled]:hover,
.main-function-btn[disabled], a.main-function-btn[disabled], .main-function-btn[disabled]:hover, a.main-function-btn[disabled]:hover,
.main-link-btn[disabled], a.main-link-btn[disabled], .main-link-btn[disabled]:hover, a.main-link-btn[disabled]:hover {background-color:var(--color-disabled-bg);color:var(--color-disabled-text);cursor:default;opacity:1;}
.general-submit-btn, a.general-submit-btn, .general-function-btn, a.general-function-btn, .general-link-btn, a.general-link-btn {background-color:var(--color-surface);border:1px solid var(--color-border-strong);color:var(--color-text-label);}
.general-submit-btn:hover, a.general-submit-btn:hover, .general-function-btn:hover, a.general-function-btn:hover, .general-link-btn:hover, a.general-link-btn:hover {background-color:var(--color-surface-subtle);border-color:#98a2b3;}
.general-submit-btn[disabled], a.general-submit-btn[disabled], .general-submit-btn[disabled]:hover, a.general-submit-btn[disabled]:hover,
.general-function-btn[disabled], a.general-function-btn[disabled], .general-function-btn[disabled]:hover, a.general-function-btn[disabled]:hover,
.general-link-btn[disabled], a.general-link-btn[disabled], .general-link-btn[disabled]:hover, a.general-link-btn[disabled]:hover {background-color:var(--color-surface-subtle);border-color:var(--color-border);color:var(--color-disabled-text);opacity:1;}

/* 07. Link row under cards (비밀번호 재설정 | 회원가입 | ...) */
.layerPop-link-footer {color:var(--color-text-sub);font-size:14px;}
.layerPop-link-footer [class*="-link-btn"] {color:var(--color-text);}
.layerPop-link-footer [class*="-link-btn"] + [class*="-link-btn"]:before {background-color:#cbd5e1;}

/* 08. Choice cards (회원 분류 등) */
.options-function-btn {border:1px solid var(--color-border);border-radius:var(--radius-lg);transition:border-color .15s, box-shadow .15s;}
.options-function-btn:hover {border-color:var(--color-primary);box-shadow:var(--focus-ring);}

/* 09. Terms agreement (FR0002005-01) */
[data-modal-value="FR0002005-01"] .list-header .checkbox-field .check-label {color:var(--color-text);font-size:15px;font-weight:600;}
[data-modal-value="FR0002005-01"] .default-list .check-label {color:var(--color-text-label);font-size:13.5px;line-height:1.5;}
[data-modal-value="FR0002005-01"] .default-list li {padding:6px 0;}
[data-modal-value="FR0002005-01"] .default-list [data-btn-style="modal"] {color:var(--color-text-muted);font-size:12.5px;}
[data-modal-value="FR0002005-01"] .list-wrap + .list-default-txt {color:var(--color-text-muted);font-size:12.5px;margin-top:10px;}

/* 10. Pre-login accent — purple CTA, lavender page, card band from the logo red (#e43c82) through the CTA purple to blue.
	ui.css is loaded by lite-wrap only, so overriding the primary tokens on body leaves logged-in screens blue. */
body {--color-primary:#9543e6;--color-primary-hover:#8236d6;--color-primary-soft:#f7f1fe;--color-primary-line:#e6d6fb;--color-primary-disabled:#cfaaf3;--color-page-bg:#f4f2f7;--focus-ring:0 0 0 3px rgba(149,67,230,.14);--card-band:linear-gradient(90deg, #e43c82 0%, #9543e6 50%, #2b3ed8 100%);}
[data-modal-key="page"] {background:var(--color-page-bg);}
[data-modal-key="page"] > .layerPop-area {background:var(--card-band) top/100% 4px no-repeat, var(--color-surface);border-color:#ebe9ee;box-shadow:0 12px 32px rgba(40,24,72,.06);}
.input-form {border-color:#e2e2e4;}
.main-submit-btn, a.main-submit-btn, .main-function-btn, a.main-function-btn, .main-link-btn, a.main-link-btn {background-color:var(--color-primary);}
[data-modal-key="page"] :is(.layerPop-area, .layerPop-default-txt) :is(.home-link-btn, .signIn-link-btn, .terms-link-btn, .support-link-btn, .privacyPolicy-link-btn) {color:var(--color-primary);}
[data-modal-key="page"] .default-lite-footer {background:transparent;border-top-color:#e6e3ea;}
[data-modal-key="page"] .footer-support-email .support-link-btn {color:var(--color-primary);text-decoration:none;}
.footer-trust-pills li {background:var(--color-surface);}

/* 11. Pre-login card layout — logo on top, left-aligned forms, centered result cards (references 10/20) */
[data-modal-key="page"] > .layerPop-area {padding:52px 48px 52px;text-align:left;}
[data-modal-key="page"] > .layerPop-area + .layerPop-default-txt {display:none;}
.lite-brand-link {display:inline-block;margin-bottom:28px;vertical-align:top;}
.lite-brand-link img {display:block;height:30px;width:auto;}
[data-modal-key="page"] .layerPop-contents {text-align:left;}
[data-modal-key="page"] .layerPop-large-tit {margin-bottom:28px;text-align:left;}
[data-modal-key="page"] .terms-large-tit {text-align:left;}
[data-modal-key="page"] .main-submit-btn[disabled], [data-modal-key="page"] .main-submit-btn[disabled]:hover,
[data-modal-key="page"] .main-function-btn[disabled], [data-modal-key="page"] .main-function-btn[disabled]:hover {background-color:var(--color-primary-disabled);color:#ffffff;}
[data-modal-key="page"] .layerPop-link-footer {margin-top:20px;text-align:left;}
[data-modal-key="page"] .layerPop-link-footer .layerPop-default-txt {color:var(--color-text);font-size:14px;}
[data-modal-key="page"] .layerPop-link-footer [class*="-link-btn"] {font-size:14px;text-underline-offset:3px;}
[data-modal-key="page"] .layerPop-link-footer [class*="-link-btn"]:has(+ [class*="-link-btn"]),
[data-modal-key="page"] .layerPop-link-footer [class*="-link-btn"] + [class*="-link-btn"] {color:var(--color-text);text-decoration:none;}
[data-modal-key="page"] .layerPop-link-footer [class*="-link-btn"]:hover {color:var(--color-primary);}
[data-modal-key="page"] .layerPop-link-footer [class*="-link-btn"] + [class*="-link-btn"]:before {background-color:#d9d6de;height:12px;vertical-align:-1px;}

/* Result cards (icon + title + button): signUpComplete, resetPasswordComplete, accountLocked, 404 */
[data-modal-key="page"] > .layerPop-area:has(> .layerPop-contents > .figure-area) {text-align:center;}
[data-modal-key="page"] > .layerPop-area:has(> .layerPop-contents > .figure-area) .lite-brand-link {margin-bottom:36px;}
[data-modal-key="page"] > .layerPop-area:has(> .layerPop-contents > .figure-area) .layerPop-contents,
[data-modal-key="page"] > .layerPop-area:has(> .layerPop-contents > .figure-area) .layerPop-link-footer {text-align:center;}
[data-modal-key="page"] .layerPop-contents > .figure-area {display:block;height:60px;margin:0 auto 20px;width:60px;}
[data-modal-key="page"] .layerPop-contents > .figure-area img {display:block;height:100%;width:100%;}
[data-modal-key="page"] .layerPop-contents > .figure-area ~ .layerPop-medium-tit {font-size:22px;margin:0 0 12px;}
[data-modal-key="page"] .layerPop-contents > .figure-area ~ .layerPop-default-txt {color:var(--color-text-label);font-size:14.5px;margin-top:0;}
[data-modal-key="page"] .layerPop-contents > .figure-area ~ .layerPop-default-txt:empty {display:none;}
[data-modal-key="page"] .layerPop-contents > .figure-area ~ .layerPop-default-txt[data-interpolation] {color:var(--color-text-muted);font-size:13px;margin-top:14px;}

/* Choice cards (가입 유형 선택 · 거주 구분) */
[data-modal-key="page"] .options-radio-field {display:flex;gap:14px;margin-top:0;}
[data-modal-key="page"] .options-radio-field .options-function-btn {align-items:center;background:var(--color-surface);border:1px solid #ebe9ee;border-radius:16px;color:var(--color-text);display:flex;flex:1 1 0;flex-direction:column;font-size:16px;height:auto;justify-content:center;margin:0;min-height:192px;min-width:0;padding:34px 12px 30px;width:auto;}
[data-modal-key="page"] .options-radio-field .options-function-btn:hover {background:var(--color-primary-soft);border-color:var(--color-primary);box-shadow:none;}
[data-modal-key="page"] .options-radio-field .options-function-btn .figure-area {display:block;height:58px;margin:0 0 18px;width:58px;}
[data-modal-key="page"] .options-function-btn .figure-area img {display:block;height:100%;width:100%;}
[data-modal-key="page"] .options-function-btn .options-tit {display:block;font-size:17px;font-weight:700;line-height:1.3;}
[data-modal-key="page"] .options-function-btn .options-sub-txt {color:var(--color-text-muted);display:block;font-size:12.5px;font-weight:400;line-height:1.4;margin-top:8px;}
[data-modal-key="page"] .layerPop-contents:has(.options-radio-field) + .layerPop-link-footer {margin-top:40px;}

/* Checkboxes */
[data-modal-key="page"] .checkbox-field .check-label {line-height:20px;padding-left:28px;}
[data-modal-key="page"] .checkbox-field .check-label:before,
[data-modal-key="page"] .checkbox-field .check-label:after {top:1px;}
[data-modal-key="page"] .checkbox-field .check-label:before {background:var(--color-surface);border:1.5px solid #dcd8e2;border-radius:5px;height:18px;width:18px;}
[data-modal-key="page"] .checkbox-field .check-form:checked + .check-label:before,
[data-modal-key="page"] .checkbox-field .check-form[checked="checked"] + .check-label:before {background-color:var(--color-primary);border-color:var(--color-primary);}

/* Terms agreement (FR0002005-01): 전체 동의 box, list, note */
[data-modal-value="FR0002005-01"] .list-wrap .list-header {background:#f7f5fa;border:1px solid #eeebf2;border-radius:12px;margin-bottom:10px;padding:18px 16px;}
[data-modal-value="FR0002005-01"] .list-wrap .list-article {border-top:none;border-bottom:1px solid #eeebf2;padding:4px 16px 14px;}
[data-modal-value="FR0002005-01"] .list-wrap .checkbox-field {margin:0;}
[data-modal-value="FR0002005-01"] .default-list li,
[data-modal-value="FR0002005-01"] .list-wrap .list-article li + li {align-items:center;display:flex;gap:12px;justify-content:space-between;margin:0;padding:9px 0;}
[data-modal-value="FR0002005-01"] .default-list .check-label {color:var(--color-text);font-size:14px;}
[data-modal-value="FR0002005-01"] .default-list .check-label b {color:var(--color-text);font-weight:700;}
[data-modal-value="FR0002005-01"] .default-list [data-btn-style="modal"],
[data-modal-value="FR0002005-01"] .default-list [data-btn-style="modal"]:hover {background:none;color:var(--color-text-sub);flex:none;float:none;font-size:13px;font-weight:400;height:auto;line-height:1.4;margin:0;padding:0;text-decoration:underline;text-underline-offset:3px;width:auto;}
[data-modal-value="FR0002005-01"] .list-wrap + .list-default-txt {color:var(--color-text-muted);font-size:12px;margin-top:16px;text-align:left;}

@media screen and (max-width:750px) { /* --bp-sm */
	:where(.layerPop-wrap:not([data-modal-key="page"])) > .layerPop-area {padding:28px 22px 22px;}
	[data-modal-key="page"] > .layerPop-area {padding:40px 24px 40px;}
	[data-modal-key="page"] .layerPop-large-tit {font-size:22px;}
	[data-modal-key="page"] .options-radio-field .options-function-btn {min-height:168px;padding:26px 8px 22px;}
}