:root {
  color-scheme: light;
  font: 400 15px/1.6 Pretendard, "Noto Sans KR", system-ui, sans-serif;
  color: #111d2c;
  background: #f6f8f9;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: clamp(12px, 4vw, 28px); }
h1, h2, p { margin: 0; }
a { color: #065b4b; text-underline-offset: 3px; }

.account {
  max-width: 440px;
  margin: clamp(6px, 5vw, 42px) auto;
  padding: clamp(17px, 5vw, 30px);
  border: 1px solid #e6ebee;
  border-radius: 20px;
  background: #fff;
}

.header, .account-actions, .newsletter-heading, .policy, .dialog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
.header, .newsletter-heading { justify-content: space-between; }
.brand, .admin-link, .policy a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.brand { font-weight: 760; text-decoration: none; }
.account-actions { justify-content: flex-end; gap: 4px 6px; }
.admin-link { padding-inline: 8px; font-weight: 720; text-decoration: none; }
.admin-link:hover { text-decoration: underline; }
.brand:hover, .text-action:hover { text-decoration: underline; }
h1 { margin-block: 8px 18px; font-size: clamp(25px, 6vw, 31px); line-height: 1.25; letter-spacing: -.04em; }
h2 { font-size: 18px; letter-spacing: -.025em; }

button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #d9e3e7;
  border-radius: 9px;
  background: #fff;
  color: inherit;
  font: inherit;
  font-weight: 720;
}
button:not(:disabled) { cursor: pointer; }
button:disabled { opacity: .56; }
:is(a, button):focus-visible { outline: 2px solid #065b4b; outline-offset: 3px; }
.providers { display: grid; gap: 9px; }
.provider { min-height: 48px; }
.kakao { background: #fee500; border-color: #fee500; color: #171717; }
.naver { background: #03c75a; border-color: #03c75a; color: #072416; }

.notice { padding: 8px 10px; margin-block-end: 12px; border-radius: 8px; background: #edf9f4; color: #065b4b; }
.notice:empty { padding: 0; margin: 0; }
.notice.error { background: #fff2f2; color: #782626; }
.newsletter { display: grid; gap: 10px; padding: 15px; border-radius: 13px; border: 1px solid #e6ebee; }
.newsletter p, #delete-note { color: #596676; }
.newsletter p.consent { font-size: 13px; }
.status { padding: 3px 8px; border-radius: 6px; background: #eef2f3; color: #495565; font-size: 13px; font-weight: 680; }
.status.active { background: #e4fbf2; color: #065b4b; }
.primary { color: #fff; background: #065b4b; border-color: #065b4b; }
.text-action { border: 0; color: #065b4b; }
.delete-action { margin-block-start: 10px; color: #782626; }
.policy { gap: 4px 16px; border-block-start: 1px solid #e6ebee; margin-block-start: 18px; }
.policy a { font-size: 13px; }

dialog {
  width: min(400px, calc(100% - 24px));
  padding: 18px;
  border: 1px solid #e6ebee;
  border-radius: 14px;
  color: inherit;
  background: #fff;
}
dialog::backdrop { background: #111d2c70; }
#delete-note { margin-block: 6px 15px; }
.dialog-actions { justify-content: flex-end; }
.danger { color: #fff; background: #782626; border-color: #782626; }