:root {
  color-scheme: light;
  font: 400 15px/1.5 Pretendard, "Noto Sans KR", system-ui, sans-serif;
  background: #f6f8f9;
  color: #111d2c;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: 20px 12px max(20px, env(safe-area-inset-bottom)); }
main { max-width: 760px; margin: 0 auto; }
header, .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
header { justify-content: space-between; padding: 4px 4px 10px; }
h1, h2, p { margin: 0; }
h1 { font-size: 28px; }
h2 { font-size: 18px; }
.brand { font-size: 14px; font-weight: 700; }
a { color: #065b4b; text-underline-offset: 3px; }
button, select { min-height: 44px; font: inherit; border: 1px solid #dbe3e7; border-radius: 9px; padding: 8px 13px; background: #fff; color: #111d2c; }
button:not(:disabled) { cursor: pointer; }
button:disabled { opacity: .55; }
:is(button, select, input, a):focus-visible { outline: 2px solid #065b4b; outline-offset: 2px; }
.panel { padding: 16px; margin-block: 10px; background: #fff; border: 1px solid #e6ebee; border-radius: 14px; }
.panel h2 { margin-inline-end: auto; }
.panel > button { margin-block-start: 13px; }
.primary { background: #065b4b; color: #fff; font-weight: 700; border-color: #065b4b; }
.kakao { background: #fee500; border-color: #e2cb00; color: #141414; font-weight: 700; }
.subtle, .records p { color: #596676; font-size: 13px; margin-block-start: 5px; }
.time, .tag { border-radius: 6px; padding: 4px 8px; background: #e4fbf2; color: #065b4b; font-size: 12px; font-weight: 650; }
.tag.review { color: #7a480d; background: #fff2cf; }
.tag.hidden { color: #4b5563; background: #edf0f3; }
.records { padding: 0; margin: 10px 0 0; list-style: none; }
.records li { border-block-start: 1px solid #e6ebee; padding-block: 11px; }
.records .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-start: 7px; }
.records a { display: inline-flex; align-items: center; min-height: 44px; }
.records strong { display: block; margin-block-start: 5px; }
#notice:not(:empty) { color: #782626; padding: 10px 12px; border-radius: 9px; background: #fff2f2; }
.newsletter-form { margin-block-start: 14px; }
.newsletter-form fieldset { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.newsletter-field { display: grid; gap: 5px; min-width: 0; font-weight: 650; }
.newsletter-field :is(input, select) { min-width: 0; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #dbe3e7; border-radius: 9px; background: #fff; color: inherit; font: inherit; font-weight: 400; }
.newsletter-schedule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.newsletter-toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; width: fit-content; }
.newsletter-toggle input { width: 19px; height: 19px; margin: 0; accent-color: #065b4b; }
.newsletter-toggle:has(input:not(:disabled)) { cursor: pointer; }
.newsletter-toggle:has(input:disabled) { color: #596676; }
.newsletter-form .subtle { margin-block-start: -8px; }
.newsletter-form button { justify-self: start; }
.form-notice:not(:empty) { margin-block-start: 10px; padding: 8px 10px; border-radius: 8px; background: #f1f5f7; font-size: 13px; }
.form-notice[data-state="error"] { color: #782626; background: #fff2f2; }
.form-notice[data-state="saved"] { color: #065b4b; background: #e4fbf2; }
.newsletter-history { margin-block-start: 16px; }
.newsletter-history h3 { margin: 0; font-size: 15px; }
.access-group { margin-block-start: 17px; }
.access-group h3 { margin: 0; font-size: 15px; }
.access-form { margin-block-start: 9px; }
.search-form, .invite-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.invite-fields { padding: 0; margin: 0; border: 0; min-width: 0; }
.admin-field { display: grid; gap: 4px; min-width: 0; font-size: 13px; font-weight: 650; }
.access-form .admin-field:first-child { flex: 1 1 210px; }
.admin-field :is(input, select) { min-width: 0; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid #dbe3e7; border-radius: 9px; background: #fff; color: inherit; font: inherit; font-size: 15px; font-weight: 400; }
.records .actions .admin-field { max-width: 100%; }
.records .actions.access-actions { align-items: end; }
.invite-shell { max-width: 480px; }
.invite-panel .form-notice:not(:empty) { margin-block-start: 0; }
.invite-panel a { display: inline-flex; align-items: center; min-height: 44px; margin-block-start: 8px; }
@media(max-width: 520px) { .primary, .kakao { width: 100%; } }
@media(max-width: 420px) { .newsletter-schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); } }