/* auth.css — 로그인 시트 · 헤더 프로필 · 로그인 유도 영역 */

#login {
  width: min(400px,calc(100% - 32px));
  padding: 30px 26px 22px;
  text-align: center;
}

#login h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 780;
  letter-spacing: -.6px;
}

#login p.sub {
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.pvbtn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 11px;
  padding: 14px;
  font-size: 14px;
  font-weight: 650;
  margin-bottom: 9px;
}

.pvbtn:hover {
  filter: brightness(.97);
}

.pvbtn i {
  font-style: normal;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
}

.pv-apple {
  background: #000;
  border-color: #000;
  color: #fff;
}

.pv-apple i {
  color: #fff;
  font-size: 16px;
}

.pv-google i {
  background: #fff;
  color: #4285f4;
  border: 1px solid var(--line);
  font-size: 13px;
}

#login .cancel {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  padding: 8px;
}

#login .mocknote {
  margin: 18px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  background: #f3f3ec;
  border-radius: 9px;
  padding: 11px 12px;
  text-align: left;
}

/* ── 헤더 계정 영역 ──────────────────────────────────────────────────────
   헤더의 맨 오른쪽 끝. 로그인 전에는 진한 '로그인' 버튼, 로그인 후에는
   아바타 칩 하나로 줄이고 로그아웃은 칩을 눌러 나오는 메뉴에 둡니다.    */
.me {
  display: flex;
  align-items: center;
  flex: none;
  padding-left: 16px;                   /* .headend의 gap과 같은 값 — 구분선 좌우 대칭 */
  border-left: 1px solid var(--line);   /* 여기부터 내 계정 */
}

/* 로그인 전 — 이 화면에서 가장 진한 버튼 */
.signin {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: 9px;
  padding: 11px 19px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.signin:hover {
  background: #3a3d34;
  border-color: #3a3d34;
}

/* 로그인 후 — 아바타 칩 + 펼침 메뉴 */
.acct {
  position: relative;
  /* summary가 가진 좌측 여백(5px)만큼 당겨, 아바타가 구분선에서
     반대편 버튼과 같은 거리에 놓이게 합니다 */
  margin-left: -5px;
}

.acct > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 9px 5px 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  list-style: none;
}

.acct > summary::-webkit-details-marker {
  display: none;
}

.acct > summary:hover,
.acct[open] > summary {
  background: #efeee7;
  border-color: #e2e2d8;
}

.acct .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--yellow);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #3a3512;
  flex: none;
}

.acct .who {
  font-size: 13px;
  font-weight: 650;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acct .caret {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
  color: var(--muted);
  flex: none;
}

.acct[open] .caret {
  transform: rotate(180deg);
}

.acctmenu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10;
  min-width: 172px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 30px #0000001f;
}

.acctmenu .name {
  display: block;
  padding: 9px 11px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

.acctmenu .name b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.acctmenu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 11px;
  border-radius: 8px;
  font-size: 13px;
}

.acctmenu button:hover {
  background: #f1f1ea;
}

.acctmenu button.out {
  color: #a33a3a;
}

.acctmenu button.out:hover {
  background: #fbeeee;
}

.gate {
  text-align: center;
  padding: 56px 20px;
  border: 1px dashed #d8d9ce;
  border-radius: 14px;
  max-width: 640px;
  margin-inline: auto;
}

.gate h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.gate p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.8;
  margin: 0 0 20px;
}

/* ── 로그인 전 안내 ─────────────────────────────────────────────────────
   히어로 검색창 아래. 로그인 버튼만 있고 '왜 눌러야 하는지'가 없어서
   비어 있던 자리에 답을 둡니다. 로그인하면 사라집니다.          */
.signup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding: 15px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.signup .ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--yellow);
  color: #46400f;
}

.signup .ic svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
}

.signup .copy {
  flex: 1;
  min-width: 0;
}

.signup .brief {
  display: none;   /* 좁은 화면에서만 씁니다 (responsive.css) */
}

.signup strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.04em;
}

.signup p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
}

.signup .go {
  flex: none;
  padding: 11px 16px;
  border: 1px solid #e8d94a;
  border-radius: 9px;
  background: var(--yellow);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.signup .go:hover {
  filter: brightness(.95);
}