/* 회원: 위쪽 줄 로그인·계정 메뉴 · 창(동의·오류 보고·내 제보·탈퇴) · 항목 아래 “오류 보고 / 개선 요청”
   새 색·서체 없이 tokens.css 값과 기존 부품(칩·알약·.links a)의 모양을 그대로 쓴다. */

/* 위쪽 줄 오른쪽 끝 자리: 언어 링크 다음 칸(암묵 열). 숨겨져 있으면 칸을 만들지 않아 배치가 그대로다. */
.top-item{grid-row:1;grid-column:5;position:relative;display:flex;align-items:center;justify-self:end}
.top-item[hidden]{display:none}

.acct-login{display:inline-flex;align-items:center;height:34px;padding:0 14px;border:1.5px solid var(--ink);border-radius:17px;background:var(--card);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.acct-login:hover{background:var(--ink);color:var(--card)}
.acct-short{display:none}

.acct-btn{display:inline-flex;align-items:center;gap:8px;height:38px;max-width:220px;padding:0 12px 0 4px;border:1.5px solid var(--rule);border-radius:19px;background:var(--card);font-size:14px;font-weight:700;white-space:nowrap}
.acct-btn:hover{border-color:var(--ink-2)}
.acct-btn[aria-expanded="true"]{border-color:var(--ink);background:var(--signal-soft);box-shadow:inset 0 0 0 1px var(--ink)}
.acct-avatar{flex:none;display:block;width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--paper-2)}
.acct-initial{display:grid;place-items:center;background:var(--ink);color:var(--card);font-size:13px;font-weight:700}
.acct-name{min-width:0;overflow:hidden;text-overflow:ellipsis}

.acct-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:272px;max-width:calc(100vw - 32px);padding:4px 0 6px;border:1.5px solid var(--ink);border-radius:6px;background:var(--card);box-shadow:var(--shadow)}
.acct-who{display:grid;gap:1px;padding:10px 14px 10px;border-bottom:1px solid var(--rule-2);margin-bottom:4px}
.acct-who b{font-size:14px;font-weight:700}
.acct-who span{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.acct-pop [role^="menuitem"]{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:6px 14px;border:0;background:none;text-align:left;font-size:14px;font-weight:700}
.acct-pop [role^="menuitem"]:hover{background:var(--paper-2)}
.acct-pop [role^="menuitem"]:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.acct-pop [role^="menuitem"] small{display:block;font-size:12px;font-weight:600;color:var(--muted)}
.acct-state{flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid var(--rule);border-radius:11px;font-size:12px;font-weight:700;color:var(--muted)}
[aria-checked="true"]>.acct-state{border-color:transparent;background:var(--ink);color:var(--card)}
.acct-sep{height:1px;margin:4px 0;background:var(--rule-2)}
.acct-pop a[role="menuitem"]{text-decoration:none;color:inherit}
.acct-pop .acct-stats{font-weight:700}
.acct-pop .acct-quiet{color:var(--muted);font-weight:600;font-size:13px}
.acct-msg{margin:4px 14px 2px;font-size:13px;color:var(--ink-2)}
.acct-msg[hidden]{display:none}

/* 항목 아래 작은 동작 */
.item-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:10px}
.offer .item-actions{margin-top:8px}
.fb-open{padding:2px 0;border:0;background:none;font-size:13px;font-weight:700;color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--rule)}
.fb-open:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* 창 */
html.dlg-open{overflow:hidden}
.dlg-scrim{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:var(--scrim);overflow-y:auto}
.dlg{width:min(540px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;padding:18px 22px 20px;border:1.5px solid var(--ink);border-radius:6px;background:var(--card);box-shadow:var(--shadow);overscroll-behavior:contain}
.dlg:focus{outline:none}
.dlg-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;padding-bottom:10px;border-bottom:3px solid var(--ink)}
.dlg-head h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.dlg-x{flex:none;display:grid;place-items:center;width:34px;height:34px;margin:-3px -8px 0 0;border:0;border-radius:17px;background:none}
.dlg-x:hover{background:var(--paper-2)}
.dlg-x svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.dlg-lede{margin:0 0 12px;font-size:15px;color:var(--ink-2)}
.dlg-done{font-weight:700;color:var(--ink)}
.dlg-note{margin:6px 0 0;font-size:13px;color:var(--muted)}
.dlg-target{margin:0 0 12px;font-size:14px;font-weight:700}
.dlg-list{margin:0 0 4px;padding-left:18px;font-size:14px}
.dlg-list li{padding:2px 0}
.dlg-form fieldset{margin:0 0 14px;padding:0;border:0;min-width:0}
.dlg-form legend{margin:0 0 6px;padding:0;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink-2)}
.dlg-check{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 10px;padding:9px 0;border-bottom:1px solid var(--rule-2)}
.dlg-check label{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;cursor:pointer}
.dlg-check a{font-size:13px;font-weight:700;color:var(--muted);text-underline-offset:3px}
.dlg-check a:hover{color:var(--ink)}
.dlg-form input[type="checkbox"],.dlg-form input[type="radio"]{flex:none;width:18px;height:18px;margin:0;accent-color:var(--ink)}
.dlg-sum{display:grid;grid-template-columns:64px 1fr;gap:4px 10px;margin:10px 0 0;padding:10px 12px;border-radius:4px;background:var(--paper-2);font-size:13px}
.dlg-sum dt{font-weight:700;color:var(--ink-2)}
.dlg-sum dd{margin:0}
.dlg-err{margin:0 0 4px;padding:8px 12px;border-radius:4px;background:var(--signal-soft);font-size:14px;font-weight:700;color:var(--ink)}
.dlg-err[hidden]{display:none}
.dlg-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border:1.5px solid var(--ink);border-radius:20px;background:var(--card);font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--paper-2)}
.btn-main{background:var(--ink);color:var(--card)}
.btn-main:hover{background:var(--ink-2)}
.btn:disabled{opacity:.5;cursor:default}

/* 오류 보고 */
.fb-kind{display:flex;flex-wrap:wrap;gap:6px 18px}
.fb-kind legend{width:100%}
.fb-kind label{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;cursor:pointer}
.fb-label{display:block;margin:0 0 6px;font-size:13px;font-weight:700;color:var(--ink-2)}
.dlg-form textarea{display:block;width:100%;min-height:136px;padding:10px 12px;border:1.5px solid var(--rule);border-radius:6px;background:var(--paper);font:inherit;font-size:15px;line-height:1.55;color:var(--ink);resize:vertical}
.dlg-form textarea:hover{border-color:var(--faint)}
.dlg-form textarea:focus{outline:none;border-color:var(--ink);background:var(--card)}
.fb-meta{display:flex;justify-content:space-between;gap:10px;margin:6px 0 10px;font-size:13px;color:var(--muted)}
.fb-meta .num{font-size:14px;font-weight:700}
.fb-meta .over{color:var(--ink)}

/* 내 제보 */
.mine{margin:10px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule-2)}
.mine li{padding:12px 0;border-bottom:1px solid var(--rule-2)}
.mine-h{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.mine-date{margin-left:auto;font-size:14px;font-weight:600;color:var(--muted)}
.mine-target{margin:8px 0 2px;font-size:13px;font-weight:700}
.mine-msg{margin:0;font-size:14px;color:var(--ink-2);white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.mine-note{margin:6px 0 0;padding:6px 10px;border-radius:4px;background:var(--paper-2);font-size:13px}
.mine-note b{margin-right:4px}

/* 좁은 데스크톱: 머리글 한 줄에 맞추려고 이름을 숨기고 사진만 둔다(이름은 메뉴 안에 있다) */
@media (min-width:901px) and (max-width:1320px){.acct-name{display:none}}
@media (min-width:901px) and (max-width:1100px){.acct-long{display:none}.acct-short{display:inline}}   /* 언어 링크와 한 줄에(버튼 이름은 aria-label) */
@media (max-width:900px){
  /* 위쪽 첫 줄(로고·국가) 오른쪽 끝에 놓는다. 로고 칸이 1fr이라 칸 사이를 줄여도 항목이 없을 때 모습은 같다. */
  .top{column-gap:12px}
  .top-item{grid-column:3}
  .acct-name{display:none}
  .acct-btn{height:34px;padding:0 3px}
  .acct-avatar{width:26px;height:26px}
}
@media (max-width:560px){
  .acct-long{display:none}
  .acct-short{display:inline}
  .acct-login{height:32px;padding:0 12px;font-size:13px}
  .dlg-scrim{place-items:end center;padding:8px}
  .dlg{max-height:calc(100dvh - 16px);padding:16px 16px 18px}
  .dlg-actions .btn{flex:1 1 auto}
  .dlg-sum{grid-template-columns:1fr;gap:0}
  .dlg-sum dd{margin-bottom:6px}
}