/* 계정 화면(ac1): 흰 면 하나 + 캡슐 전환. account.js가 찾는 id·클래스·data 속성은 그대로 두고 겉모습만 바꾼다.
   이 페이지의 CSP는 style-src 'self'라서 HTML 안의 style 속성을 쓰지 않는다. */
.account-layout{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:64px;align-items:start;padding-block:72px 0}
.account-intro h1{margin:0;font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.account-lede{margin:10px 0 0;font-size:17px;color:var(--ink-2);max-width:420px}
.account-note{margin:8px 0 0;font-size:14px;color:var(--muted)}
.account-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

.account-card{background:var(--surface);border-radius:var(--r-surface);box-shadow:var(--sh-1),var(--hair);padding:24px;min-width:0}
.account-card[aria-busy="true"]{cursor:progress}
.account-loading{margin:0;color:var(--muted);font-size:15px}
.account-card h2{margin:0 0 6px;font-size:22px;font-weight:700;line-height:1.4;outline:none}
.account-card h3{margin:0 0 4px;font-size:16px;font-weight:700}
.form-description{margin:0 0 18px;font-size:15px;color:var(--ink-2)}
.form-description strong{color:var(--ink)}

/* login / signup switch: the segmented capsule (the white thumb slides) */
.account-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:12px;background:var(--field);margin:0 0 24px}
.account-tabs::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 2);border-radius:9px;background:var(--surface);box-shadow:var(--sh-1),var(--hair);transition:transform 260ms var(--ease-open)}
.account-tabs:has(#signup-tab[aria-current="page"])::before{transform:translateX(100%)}
.account-tabs a{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;height:36px;border-radius:9px;font-size:14px;font-weight:600;color:var(--ink-2)}
.account-tabs a[aria-current="page"]{color:var(--ink)}

.account-card form{margin:0}
.account-card label:not(.account-checkbox){display:block;margin:0 0 6px;font-size:14px;font-weight:600}
.account-card input:not([type="checkbox"]),.account-card textarea{display:block;width:100%;height:44px;margin:0 0 14px;border:0;border-radius:var(--r-row);background:var(--field);color:var(--ink);padding:0 14px;font:16px var(--f-body)}
.account-card textarea{height:auto;min-height:96px;padding:10px 14px;line-height:1.6;resize:vertical}
.account-card input::placeholder{color:var(--muted)}
.account-card input:focus,.account-card textarea:focus{outline:1.5px solid var(--accent);outline-offset:0}
.account-card input:disabled,.account-card textarea:disabled{opacity:.6}
.password-field{position:relative}
.password-field input{padding-right:76px!important}
.password-toggle{position:absolute;top:4px;right:4px;height:36px;padding:0 14px;border:0;border-radius:18px;background:var(--surface);box-shadow:var(--sh-1),var(--hair);font-size:14px;font-weight:600;cursor:pointer}
.field-hint{margin:-6px 0 14px;font-size:14px;color:var(--muted)}
.field-hint a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.signup-options{border:0;margin:0 0 6px;padding:0;min-width:0}
.account-checkbox{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;font-size:15px;color:var(--ink-2);cursor:pointer}
.account-checkbox input{flex:none;width:20px;height:20px;margin:3px 0 0;accent-color:var(--accent)}
.account-checkbox a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.privacy-notice{margin:4px 0 8px;font-size:14px;color:var(--muted)}

.account-primary,.account-outline{display:flex;align-items:center;justify-content:center;width:100%;height:48px;margin:10px 0 0;border:0;border-radius:24px;font-size:16px;font-weight:600;cursor:pointer;
  transition:scale 180ms var(--ease-open),box-shadow 150ms ease-out}
.account-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--sh-accent)}
.account-primary:hover{box-shadow:var(--sh-accent-2)}
.account-outline{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1),var(--hair)}
.account-outline:hover{box-shadow:var(--sh-2),var(--hair)}
.account-primary:active,.account-outline:active{scale:.97;transition-duration:150ms}
.account-primary:disabled,.account-outline:disabled{opacity:.55;cursor:default;scale:1}
.account-danger{color:var(--bad-ink)}
.account-secondary,.verification-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin-top:14px}
.link-button,.back-button{border:0;background:none;padding:8px 2px;font-size:14px;font-weight:600;color:var(--ink-2);cursor:pointer;text-underline-offset:3px}
.link-button:hover,.back-button:hover{color:var(--ink);text-decoration:underline}
.link-button:disabled{opacity:.55;cursor:default;text-decoration:none}
.back-button{margin:-6px 0 8px -2px}
.app-login-note{margin:16px 0;padding:14px 16px;border-radius:var(--r-row);background:var(--field);font-size:15px;color:var(--ink-2)}
.app-login-note strong{display:block;color:var(--ink);margin-bottom:2px}
.app-login-note p{margin:0}
.app-login-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.signed-in-email{margin:0 0 4px;font-size:17px;font-weight:600;overflow-wrap:anywhere}
.account-message{margin:16px 0 0;padding:12px 16px;border-radius:var(--r-row);background:var(--accent-soft);color:var(--ink);font-size:15px;outline:none}
.account-message[data-kind="error"]{background:color-mix(in srgb,var(--bad) 12%,var(--surface))}
#pending-email{margin:4px 0 0}
.account-next-actions{display:flex;flex-wrap:wrap;gap:8px 20px;margin:4px 0 16px;font-size:15px;font-weight:600}
.account-next-actions a{color:var(--ink);text-underline-offset:3px}
.account-next-actions a:hover{text-decoration:underline}
.account-slots{margin:0 0 12px;padding:14px 0 2px;border-top:1px solid var(--line)}
.account-slots .field-hint{margin:0 0 8px}
.account-setting{border-top:1px solid var(--line)}
.account-setting:last-of-type{border-bottom:1px solid var(--line)}
.account-setting summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;font-size:16px;font-weight:600;cursor:pointer;list-style:none}
.account-setting summary::-webkit-details-marker{display:none}
.account-setting summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translateY(-3px);transition:transform 220ms var(--ease-open)}
.account-setting[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.account-setting[open]{padding-bottom:16px}
.account-setting .field-hint{margin:0 0 12px}
.optional-label{font-weight:500;color:var(--muted)}
.account-help{margin:20px 0 0;font-size:14px;color:var(--muted);text-align:center}
.account-help a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}

@media (max-width: 1023px){
  .account-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .account-card{max-width:480px}
}
@media (max-width: 759px){
  .account-layout{padding-top:32px}
  .account-intro h1{font-size:28px}
  .account-card{padding:20px}
}
@supports (corner-shape: superellipse(2)){
  .account-card,.account-primary,.account-outline{corner-shape:superellipse(1.6)}
}