/* Shared Identity presentation. Active only for the user's light color scheme. */
@media (prefers-color-scheme: light) {
  html:root { color-scheme: light; --canvas:#f6f9fe; --panel:#ffffff; --elevated:#f1f6fd; --line:#ceddeb; --ink:#17283e; --body:#304761; --muted:#526b86; --faint:#687e97; --brand:#2768c0; --brand-hover:#1f58aa; --brand-soft:#e8f2ff; --success:#176b52; --error:#ad2945; --primary:#246cdb; --primary-hover:#1d5fc9; --input-line:#cadbea; --auth-bg:#f6f9fe; --shadow:0 16px 48px #345b8512; background:#f6f9fe; }
  html body, html body.auth-page { background:radial-gradient(ellipse at 24% 8%,#eaf3ff66,transparent 55%),#f6f9fe; color:var(--body); }
  html body::before, html body::after { background:none; opacity:0; }
  html :is(h1,h2,h3,legend), html .form-panel h1 { color:var(--ink); }
  html :is(.eyebrow,.form-panel .eyebrow,.admin-nav a) { color:var(--brand); }
  html .site-header { background:#fafdffe8; border-color:#dbe6f2; }
  html :is(.wordmark img,.auth-logo img,.error-brand,img[src$="/brand-lockup.svg"]) { content:url("/story-v2-assets/brand-lockup-light-v1.svg"); filter:none; }
  html img[src$="/srain-symbol.svg"] { content:url("/story-v2-assets/srain-symbol-light-v1.svg"); filter:none; }
  html :is(.product-name,.header-link,.site-footer,.auth-page .site-footer,.site-footer a,.site-footer span:first-child,.back-link,.subtle-link,.auth-note) { color:var(--muted); }
  html :is(.site-footer,.admin-nav,.panel-bottom,.steps) { border-color:var(--line); }
  html :is(.form-panel,.auth-page .form-panel) { background:linear-gradient(125deg,#fffffffa,#f8fbfff2); border-color:#cfdfef; box-shadow:0 18px 50px #325d8916,inset 0 1px #fff; backdrop-filter:blur(22px) saturate(115%); -webkit-backdrop-filter:blur(22px) saturate(115%); }
  html .form-panel::before { background:linear-gradient(135deg,#fff,#d9e6f5 36%,#d0e5f7 72%,#fff); filter:none; }
  html .form-panel::after { border-color:#fff; background:radial-gradient(ellipse at 0 0,#ffffff99,transparent 72%) 0 0/132px 88px no-repeat; box-shadow:inset 0 1px 2px #fff; }
  html :is(.identity-panel,.settings-panel,.service-card,.consent-card,.empty-state) { background:linear-gradient(125deg,#fffffffa,#f6fafff2); border-color:#d4e1ef; box-shadow:0 8px 24px #345b8509,inset 0 1px #fff; }
  html .avatar { background:#eaf3ff; border-color:#d0e0f2; }
  html :is(.panel-heading>p:last-child,.muted,.page-heading p:not(.eyebrow),.section-heading p,.service-card p,.consent-card p,.identity-panel dt,.empty-state p,.consent-card details,.panel-bottom,.panel-bottom a,.field label,.policy-form>label,.field-hint,.field-help>.field-hint,.auth-page .field-help>.field-hint,.label-note) { color:var(--muted); }
  html :is(.identity-panel dd,.empty-state strong,.consent-brand strong) { color:var(--ink); }
  html :is(.auth-tabs a,.password-toggle,.motion-field label,.login-lifetime label,.consent-brand) { color:#405c7b; }
  html .auth-tabs a[aria-current=page] { color:#1c5cae; }
  html .auth-tabs a::after { background:#2c73cd; box-shadow:none; }
  html input:not([type=checkbox]):not([type=hidden]), html select, html textarea,
  html .motion-field input:not([type=hidden]), html .settings-panel select { color:var(--ink); background:#ffffff; border-color:#cbdbea; box-shadow:inset 0 1px 2px #294a6d05; caret-color:#246cdb; }
  html :is(input,textarea)::placeholder { color:#647c97; }
  html .motion-field input:focus, html input:not([type=checkbox]):focus, html select:focus, html textarea:focus { background:#fff; border-color:#397dce; box-shadow:0 0 0 3px #377dcc14; }
  html .motion-field input:is(:focus,:not(:placeholder-shown))+label { color:#2c5e99; }
  html .motion-field input:-webkit-autofill { -webkit-text-fill-color:#17283e; box-shadow:0 0 0 1000px #f3f8ff inset; caret-color:#246cdb; border-color:#a9c8e8; }
  html input[type=checkbox] { color-scheme:light; accent-color:#246cdb; }
  html .password-toggle:hover { color:#1c5cae; background:#e9f2fd; }
  html .login-lifetime p { color:#526b86; }
  /* Includes the popup's dynamically created '취소하고 돌아가기' button. */
  html .button:not(.primary), html .auth-page .button:not(.primary) { color:#31557d; background:#f8fbff; border-color:#bfd2e7; box-shadow:inset 0 1px #fff; }
  html .button:not(.primary):hover, html .auth-page .button:not(.primary):hover { color:#204d83; background:#eaf3ff; border-color:#8eb4db; }
  html .button.primary, html .auth-page .button.primary { color:#fff; background:#246cdb; border-color:#3279df; box-shadow:0 4px 14px #246cdb18,inset 0 1px #ffffff40; }
  html .button.primary:hover, html .auth-page .button.primary:hover { color:#fff; background:#1d5fc9; border-color:#1d5fc9; }
  html .button:disabled { opacity:1; color:#6a819c; background:#f0f6fd; border-color:#d4e1f0; box-shadow:none; }
  html .status-tag { color:#496784; background:#eaf2fc; }
  html :is(.status-tag.active,.status-text,.field-hint[data-result=available],.validation-message[data-result=available]) { color:#176b52; }
  html .status-tag.active { background:#e7f6ef; }
  html :is(.validation-message,.field-hint[data-result=unavailable]) { color:#ad2945; }
  html .check-row { color:var(--body); background:#fbfdff; border-color:#d2e0ef; }
  html .check-row:has(input:checked) { background:#eaf3ff; border-color:#7ca8d9; }
  html .check-row small { color:#526b86; }
  html .security-picker-trigger, html .security-choice, html .security-picker-mfa button { color:#36577a; background:linear-gradient(125deg,#fffffff5,#eff6fff2); border-color:#bdd2e9; box-shadow:0 8px 24px #315a8310,inset 0 1px #fff; }
  html .security-choice[aria-checked=true], html .security-picker-mfa button[aria-pressed=true] { color:#175cae; background:#e6f1ff; border-color:#82addd; box-shadow:0 8px 24px #315a8310,inset 0 1px #fff; }
  html .security-choice:hover { border-color:#6a9ed7; box-shadow:0 8px 24px #315a8318,inset 0 1px #fff; }
  html .notice { color:#405f7e; background:#f0f6fd; border-color:#c7dcee; }
  html .notice.error, html .srain-toast.error { color:#a72c47; background:#fff3f6; border-color:#eac6d0; }
  html .notice.success, html .srain-toast.success { color:#176b52; background:#edf9f3; border-color:#bddfce; }
  html :is(.srain-toast,dialog,.srain-notice) { color:#304761; background:linear-gradient(135deg,#fffffff5,#f0f7fff5); border-color:#bbd2e9; box-shadow:0 18px 56px #294f7926,inset 0 1px #fff; }
  html :is(dialog,.srain-notice)::backdrop { background:#28496d33; backdrop-filter:blur(6px); }
  html :is(dialog,.srain-notice) h2 { color:#17283e; }
  html :is(dialog,.srain-notice) p { color:#526b86; }
  html .srain-toast button { color:#45698e; }
  html .srain-notice button { color:#fff; background:#246cdb; border-color:#3279df; box-shadow:inset 0 1px #ffffff40; }
  html .error-shell { color:#17283e; background:linear-gradient(135deg,#fffffffa,#f3f8fff5); border-color:#cadff1; box-shadow:0 18px 54px #345b851a,inset 0 1px #fff; }
  html .error-code { color:#356da6; }
  html .error-description { color:#526b86; }
  html .error-signature { color:#667e98; }
  html .error-art::before, html .error-art::after { border-color:#aacbe94d; }
  html .error-actions button, html .error-actions a { color:#fff; background:#246cdb; border-color:#3279df; }
  html :is(a,button,input,select,textarea):focus-visible { outline-color:#276bbf; }
  html :is(.password-toggle,.security-picker-trigger,.security-choice,.security-picker-mfa button,.login-lifetime input,.srain-notice button):focus-visible { outline-color:#276bbf; }
}

/* Retain the original optical layers on login and registration in light mode. */
@media (prefers-color-scheme: light) {
  html body.auth-page:has(.auth-tabs) {
    background:radial-gradient(ellipse at 22% 15%,#dce8ff80,transparent 48%),radial-gradient(ellipse at 83% 86%,#c5edf766,transparent 45%),#f3f7fd;
  }
  html body.auth-page:has(.auth-tabs)::before {
    background:linear-gradient(105deg,#cbd4f780,#dfedff33 42%,#8fd9ed99);
    opacity:.65;
  }
  html body.auth-page:has(.auth-tabs)::after {
    background:radial-gradient(ellipse 420px 440px at 50% 53%,transparent 30%,#f6f9fe40 100%);
    opacity:1;
  }
  html .auth-page:has(.auth-tabs) .form-panel {
    background:radial-gradient(ellipse at 0 0,#ffffff55,transparent 46%),linear-gradient(125deg,#ffffff38,#e2f0ff24 48%,#f5fcff42);
    border-color:#b4d4ed99;
    box-shadow:0 24px 65px #35587526,-8px -8px 24px -14px #ffffffb3,9px 12px 25px -16px #7bcaff99,
      inset 0 2px 2px #fffffff0,inset 2px 0 3px #e7f2ffad,inset 0 -2px 2px #c3eafff0,inset -2px 0 2px #96d7fcb3,
      inset 0 0 0 5px #d7eaff26,inset 0 0 22px #d9f0ff1a;
    backdrop-filter:blur(28px) saturate(155%);
    -webkit-backdrop-filter:blur(28px) saturate(155%);
  }
  html .auth-page:has(.auth-tabs) .form-panel::before {
    background:linear-gradient(135deg,#fff 0%,#f6f4ff 9%,#a6c8e5aa 23%,#aed6f51c 41%,#a5dfff8c 64%,#e7faff 86%,#fff 98%);
    filter:drop-shadow(0 0 2px #d4f0ff99);
  }
  html .auth-page:has(.auth-tabs) .form-panel::after {
    border-color:#ffffffa3;
    background:radial-gradient(ellipse at 0 0,#ffffffa3 0%,#e9f5ff40 36%,transparent 72%) 0 0/132px 88px no-repeat,
      linear-gradient(131deg,#ffffff33 1%,#e6f2ff14 13%,transparent 22%,transparent 68%,#c7f2ff14 85%,transparent 97%);
    box-shadow:inset 1px 1px 2px #ffffffad,inset -1px -1px 2px #b4e5ff80;
  }
  html .auth-page:has(.auth-tabs) .motion-field input:not([type=hidden]) {
    background:linear-gradient(135deg,#ffffff6b,#edf7ff33);
    border-color:#a8c5df99;
    box-shadow:inset 0 1px 2px #ffffff99,inset 0 -1px 1px #7299bf1f;
  }
  html .auth-page:has(.auth-tabs) .motion-field input:focus {
    background:linear-gradient(135deg,#ffffff99,#edf7ff55);
    border-color:#6b9ed1;
    box-shadow:0 0 0 3px #377dcc14,inset 0 1px 2px #ffffffb3;
  }
  html .auth-page:has(.auth-tabs) .button:not(.primary) {
    background:linear-gradient(135deg,#ffffff73,#e4f2ff33);
    border-color:#aecbe399;
    box-shadow:inset 0 1px 1px #ffffffd9,inset 0 -1px 1px #b9ddf873;
  }
  html .auth-page:has(.auth-tabs) .button:not(.primary):hover {
    background:linear-gradient(135deg,#ffffff99,#dceeff66);
    border-color:#8eb4db;
  }
  html .auth-page:has(.auth-tabs) .button.primary {
    background:linear-gradient(135deg,#3987e9eb,#2169c9f0);
    border-color:#9dceffc2;
    box-shadow:inset 0 1px 1px #d8eeff99,inset 0 -1px 1px #2462ad40,0 4px 18px #246cdb26;
  }
  html .auth-page:has(.auth-tabs) .button.primary:hover {
    background:linear-gradient(135deg,#3986e6f5,#1c61c0f5);
  }
  html .auth-page:has(.auth-tabs) .button:disabled {
    opacity:.5;
  }
  html .auth-page:has(.auth-tabs) .auth-tabs a::after {
    box-shadow:0 0 7px #589bd940;
  }
}