/* 알림판 — 헤더의 메가폰과 오른쪽에서 덮는 게시판.
   메뉴 패널과 같은 층에 살지만 겹쳐 뜨지는 않는다. */

.notice-panel[hidden], .notice-backdrop[hidden], .notice-row-body[hidden],
.site-notice-dot[hidden] { display: none !important; }

/* 헤더에 아이콘이 둘이 되면 space-between 이 셋을 흩뿌린다.
   로고만 왼쪽에 붙이고 나머지는 오른쪽으로 민다. */
.site-header:has(.site-notice-button) { justify-content: flex-start; gap: 2px; }
.site-header:has(.site-notice-button) .site-logo { flex-shrink: 0; }
/* 제목 자막(티커)은 뺐다. 메가폰이 남는 폭을 먹으며 아이콘을 오른쪽으로 민다. */
.site-header:has(.site-notice-button) .site-notice-button { margin-left: auto; }

.site-notice-button {
  position: relative; flex-shrink: 0;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; color: #3a332a; cursor: pointer;
}
.site-notice-button svg { width: 21px; height: 21px; filter: drop-shadow(0 1px 2px rgba(255,255,255,.75)); }
.site-notice-button:focus-visible { outline: 2px solid rgba(69,90,118,.4); outline-offset: 2px; border-radius: 10px; }

/* 안 읽은 글이 있을 때만 켠다. 늘 켜 두면 아무 뜻이 없다. */
.site-notice-dot {
  position: absolute; top: 8px; right: 8px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--accent, #a6533e);
  box-shadow: 0 0 0 2px rgba(255,254,251,.98);
}

.notice-backdrop { position: fixed; inset: 0; z-index: 88; background: rgba(28,24,20,.36); }

.notice-panel {
  position: fixed; top: 0; right: max(0px, calc((100% - var(--app-max-width)) / 2)); bottom: 0; z-index: 89;
  width: min(100%, 420px);
  display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--card, #fffdf9);
  box-shadow: -12px 0 40px rgba(28,24,20,.16);
  animation: notice-in .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes notice-in { from { transform: translateX(16px); opacity: .4 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .notice-panel { animation: none } }
body.notice-open { overflow: hidden; }

.notice-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 16px 14px 20px;
}
.notice-head strong { color: var(--ink, #25221e); font: 700 17px/1.3 var(--serif, serif); letter-spacing: -.02em; }
.notice-close {
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted, #8c8378); font: 300 22px/1 var(--sans, sans-serif); cursor: pointer;
}

.notice-tabs { display: flex; gap: 4px; padding: 0 16px; border-bottom: 1px solid var(--line, #ddd4c8); }
.notice-tabs button {
  padding: 9px 12px 11px; border: 0; background: transparent;
  color: var(--muted, #8c8378); font: 600 14px/1.4 var(--sans, sans-serif); letter-spacing: -.02em; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.notice-tabs button[aria-selected="true"] { color: var(--accent, #a6533e); border-bottom-color: var(--accent, #a6533e); }

.notice-body { flex: 1; overflow-y: auto; padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.notice-empty { padding: 32px 4px; color: var(--muted, #8c8378); font: 400 14px/1.6 var(--sans, sans-serif); text-align: center; }

.notice-row { border-bottom: 1px solid color-mix(in srgb, var(--line, #ddd4c8) 60%, transparent); }
.notice-row-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px;
  width: 100%; padding: 14px 2px; border: 0; background: transparent; text-align: left; cursor: pointer;
}
.notice-tag {
  padding: 3px 7px; border-radius: 5px;
  background: var(--accent-soft, #f2dfd6); color: var(--accent, #a6533e);
  font: 700 10px/1.5 var(--sans, sans-serif); font-style: normal; letter-spacing: .02em; white-space: nowrap;
}
.notice-row-title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--ink, #25221e); font: 500 14px/1.5 var(--sans, sans-serif); letter-spacing: -.025em;
}
.notice-row.is-pinned .notice-row-title { font-weight: 700; }
.notice-row.is-open .notice-row-title { white-space: normal; color: var(--accent, #a6533e); }
.notice-row-date { color: color-mix(in srgb, var(--muted, #8c8378) 80%, transparent); font: 500 11px/1.5 var(--sans, sans-serif); font-variant-numeric: tabular-nums; }

.notice-row-body { padding: 0 2px 16px; }
.notice-row-body p { margin: 0 0 10px; color: color-mix(in srgb, var(--ink, #25221e) 78%, transparent); font: 400 14px/1.75 var(--sans, sans-serif); letter-spacing: -.02em; white-space: pre-line; }
.notice-row-body p:last-child { margin-bottom: 0; }

/* 메뉴가 열려 있으면 알림판 버튼은 물러난다. 둘이 겹쳐 뜨면 닫을 곳을 못 찾는다. */
body.site-menu-locked .site-notice-button { display: none; }

/* A paper reading panel: titles remain readable even before expanding. */
.site-notice-button { border-radius: 12px; }
.site-notice-button:hover,.site-notice-button[aria-expanded=true] { background: var(--ui-soft,#f5efe5); color: var(--ui-action,#55312d); }
.notice-panel { box-sizing: border-box; border-left: 1px solid var(--ui-line,#ded5c7); background: var(--ui-surface,#fffdf8); }
.notice-head { padding: 22px 18px 16px 24px; }
.notice-head strong { font-size: 24px; color: var(--ui-ink,#302b26); }
.notice-close { border-radius: 12px; background: var(--ui-soft,#f5efe5); color: var(--ui-muted,#72685c); }
.notice-tabs { gap: 4px; margin: 0 20px 16px; padding: 4px; border: 1px solid var(--ui-line,#ded5c7); border-radius: 14px; background: var(--ui-soft,#f5efe5); }
.notice-tabs button { flex: 1; min-height: 44px; margin: 0; padding: 10px 8px; border: 0; border-radius: 10px; font-size: 13px; color: var(--ui-muted,#72685c); }
.notice-tabs button[aria-selected=true] { background: var(--ui-surface,#fffdf8); color: var(--ui-action,#55312d); box-shadow: 0 2px 5px #302b260a; }
.notice-body { padding: 0 20px calc(24px + env(safe-area-inset-bottom,0px)); overscroll-behavior: contain; }
.notice-row { margin-bottom: 10px; border: 1px solid var(--ui-line,#ded5c7); border-radius: 16px; overflow: hidden; }
.notice-row-head { grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; min-height: 72px; padding: 16px; }
.notice-row-head::after { content: '+'; grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--ui-muted,#72685c); font: 400 20px/1 var(--sans,sans-serif); }
.notice-row.is-open .notice-row-head::after { content: '−'; color: var(--ui-action,#55312d); }
.notice-tag { justify-self: start; grid-column: 1; padding: 3px 7px; background: var(--ui-soft,#f5efe5); color: var(--ui-action,#55312d); font-size: 11px; }
.notice-row-title { grid-column: 1; white-space: normal; overflow-wrap: anywhere; font-size: 14px; line-height: 1.65; color: var(--ui-ink,#302b26); }
.notice-row-date { grid-column: 1; color: var(--ui-muted,#72685c); font-size: 12px; }
.notice-row.is-open { border-color: #c9b6a0; background: #faf6ef; }
.notice-row.is-open .notice-row-title { color: var(--ui-action,#55312d); }
.notice-row-body { margin: 0 16px; padding: 16px 0 20px; border-top: 1px solid var(--ui-line,#ded5c7); }
.notice-row-body p { color: var(--ui-muted,#72685c); line-height: 1.9; overflow-wrap: anywhere; }
.notice-empty { margin: 0; padding: 40px 20px; border: 1px dashed var(--ui-line,#ded5c7); border-radius: 16px; background: var(--ui-soft,#f5efe5); color: var(--ui-muted,#72685c); line-height: 1.8; }
.notice-panel :is(button,a):focus-visible,.site-notice-button:focus-visible { outline: 2px solid var(--ui-action,#55312d); outline-offset: -3px; }
@media (max-width:360px) { .notice-tabs { margin-inline: 16px; }.notice-body { padding-inline: 16px; }.notice-head { padding-left: 20px; } }

/* 새소식 탭 */
.notice-tabs button { position: relative; }
.notice-tab-dot { position: absolute; top: 8px; right: calc(50% - 38px); width: 6px; height: 6px; border-radius: 50%; background: #d43c39; }
.notice-news-row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--ui-line, #e3dccf); color: inherit; text-decoration: none; }
.notice-news-row.is-unread { background: color-mix(in srgb, #d43c39 5%, transparent); }
.notice-news-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: #efe7d8; color: #7d4b3e; font: 700 16px/1 var(--serif, serif); }
.notice-news-icon.is-diary { background: #e6ecf3; color: #455a76; }
.notice-news-copy { display: grid; gap: 3px; min-width: 0; }
.notice-news-copy strong { font: 700 14px/1.4 var(--sans); letter-spacing: -.02em; word-break: keep-all; }
.notice-news-copy small { color: var(--ui-muted, #72685c); font: 400 12px/1.4 var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notice-news-date { color: var(--ui-muted, #72685c); font: 400 12px/1 var(--sans); white-space: nowrap; }
.notice-news-dot { position: absolute; top: 12px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: #d43c39; }
.notice-news-row.is-unread .notice-news-date { margin-right: 10px; }
.notice-login { display: grid; gap: 14px; justify-items: center; text-align: center; }
.notice-login-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 12px; background: #fee500; color: #191919; font: 700 14px/1 var(--sans); text-decoration: none; }

/* 10개를 넘는 목록의 쪽 이동 */
.notice-pager { display: flex; justify-content: center; align-items: center; gap: 6px; padding: 18px 0 8px; }
.notice-pager button { min-width: 34px; height: 34px; padding: 0 8px; border: 1px solid var(--ui-line, #e3dccf); border-radius: 10px; background: var(--ui-surface, #fff); color: var(--ui-ink, #302b26); font: 600 13px/1 var(--sans); cursor: pointer; }
.notice-pager button.is-current { border-color: #55312d; background: #55312d; color: #fff; }
.notice-pager button:disabled { opacity: .35; cursor: default; }