/* ============================================================
   Vita 365 — 계정 hub and its own screens

   Source: design/ui-redesign-prototype:demo/mypage.html.

   The hub links out to screens it does not own — bookings, messages,
   billing — and those keep their markup and get the v2 skin from
   account-v2.css.

   What it DOES own now lives under /mypage/me/*: 프로필, 알림 and
   로그인 및 보안, the three screens /mypage/profile was dismantled
   into. They share this stylesheet with the hub rather than the
   account-v2 skin, because they are built from the hub's own
   vocabulary — .me-group rows, .me-sw switches — not the .mp-card
   forms the older screens use.

   Shared v2 rules come from /assets/vita-v2.css; every rule here
   requires an ancestor `.v2`.
   ============================================================ */

.v2 .me-wrap {
  background: var(--v2-bg); font-family: var(--v2-font); color: var(--v2-ink);
  min-height: 100vh; min-height: 100dvh;
  padding: calc(var(--v2-safe-top) + 18px) 20px 40px;
}
@media (min-width: 881px) { .v2 .me-wrap { max-width: 620px; } }

.me-title { font-size: var(--v2-fs-title); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 18px; }

/* ─── Identity card ─────────────────────────────────────────── */
/* The whole card is the link into 프로필 — it shows exactly what that
   screen edits, so a pencil in the corner was a smaller target for the
   same destination. */
.me-id {
  display: flex; align-items: center; gap: 14px;
  background: var(--v2-surface); border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-sh-card); padding: 18px;
  color: inherit; text-decoration: none;
}
.me-id:active { background: var(--v2-surface-2); }
.me-id .av {
  width: 52px; height: 52px; border-radius: var(--v2-r-pill); flex-shrink: 0;
  background: var(--v2-brand-tint); border: 1px solid var(--v2-brand-tint-2);
  color: var(--v2-brand-ink); display: grid; place-items: center;
  font-weight: 700; font-size: var(--v2-ic-lg);
}
.me-id .b { flex: 1; min-width: 0; }
.me-id .nm { font-size: var(--v2-fs-h3); font-weight: 700; }
.me-id .em {
  font-size: var(--v2-fs-caption); color: var(--v2-ink-3); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-id .edit {
  width: 38px; height: 38px; border-radius: var(--v2-r-pill); flex-shrink: 0;
  background: var(--v2-surface-2); color: var(--v2-ink-2); border: none;
  display: grid; place-items: center; font-size: var(--v2-fs-section);
}

/* ─── Membership card ───────────────────────────────────────── */
/* The gap belongs to the SLOT, not to one of the two skins that fill it.
   me.js swaps this container's class to .me-group when there is no live
   subscription (the row that says so is a row, not a card), and the 12px
   used to live on .me-plan — so the no-subscription state lost it and sat
   flush against the identity card above, reading as one control with it. */
.v2 .me-id + #me-plan { margin-top: 12px; }
.me-plan {
  background: var(--v2-surface); border-radius: var(--v2-r-xl);
  box-shadow: var(--v2-sh-card); padding: 20px;
}
.me-plan-top { display: flex; align-items: flex-start; gap: 16px; }
.me-plan .badge {
  display: inline-block; font-size: var(--v2-fs-micro); font-weight: 700;
  color: var(--v2-brand-ink); background: var(--v2-brand-tint);
  padding: 4px 10px; border-radius: var(--v2-r-pill);
}
.me-plan h3 { font-size: var(--v2-fs-section); font-weight: 700; letter-spacing: -0.02em; margin: 9px 0 0; }
.me-plan .price { font-size: var(--v2-fs-caption); color: var(--v2-ink-3); margin-top: 4px; }
.me-plan .ring {
  width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0; margin-left: auto;
  display: grid; place-items: center; position: relative;
}
.me-plan .ring::before {
  content: ''; position: absolute; inset: 8px; border-radius: 50%; background: var(--v2-surface);
}
.me-plan .ring span {
  position: relative; font-size: var(--v2-fs-h3); font-weight: 700;
  letter-spacing: var(--v2-num-tracking);
}
.me-plan .ring small { font-size: var(--v2-fs-micro); color: var(--v2-ink-3); font-weight: 500; display: block; }
.me-plan-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 16px;
  padding-top: 14px; border-top: 1px solid var(--v2-line);
  font-size: var(--v2-fs-caption); color: var(--v2-ink-2);
}
.me-plan-foot i { font-size: 17px; color: var(--v2-ink-3); }
.me-plan-foot a {
  margin-left: auto; color: var(--v2-brand-ink); font-weight: 600; text-decoration: none;
}
/* In the app the footer IS the control — it opens the cancel sheet, because
   there is no /mypage/billing to link to. Same row, rendered as a button. */
button.me-plan-foot {
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: var(--v2-font); font-size: var(--v2-fs-caption);
  text-align: left; padding: 14px 0 0;
}
.me-plan-foot .lk {
  margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  color: var(--v2-brand-ink); font-weight: 600;
}
.me-plan-foot .lk i { font-size: var(--v2-ic-md); }

/* ─── Subscription sheet ────────────────────────────────────── */
.me-sheet-back {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(20, 28, 24, .45);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
@media (min-width: 560px) { .me-sheet-back { align-items: center; padding: 20px; } }
.me-sheet {
  background: var(--v2-surface); color: var(--v2-ink);
  width: 100%; max-width: 460px;
  border-radius: var(--v2-r-xl) var(--v2-r-xl) 0 0;
  padding: 22px 20px calc(20px + var(--v2-safe-bot, env(safe-area-inset-bottom, 0px)));
}
@media (min-width: 560px) { .me-sheet { border-radius: var(--v2-r-xl); padding-bottom: 20px; } }
.me-sheet h2 {
  font-size: var(--v2-fs-section); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 14px;
}
.me-sheet-plan {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  background: var(--v2-surface-2); border-radius: var(--v2-r-md);
  padding: 12px 14px;
}
.me-sheet-plan strong { font-size: var(--v2-fs-body); font-weight: 700; }
.me-sheet-plan span { font-size: var(--v2-fs-caption); color: var(--v2-ink-3); }
.me-sheet-body {
  font-size: var(--v2-fs-caption); color: var(--v2-ink-2);
  line-height: var(--v2-lh-loose); margin: 12px 0 0;
}
.me-sheet-msg {
  display: none; margin-top: 12px; padding: 10px 13px;
  border-radius: var(--v2-r-md); background: #FCF0EE; color: var(--v2-bad);
  font-size: var(--v2-fs-caption); line-height: var(--v2-lh-loose);
}
.me-sheet-msg.show { display: block; }
.me-sheet-acts {
  display: flex; gap: 10px; margin-top: 18px;
}
.me-sheet-acts .me-btn { flex: 1; }

/* ─── Grouped rows ──────────────────────────────────────────── */
.me-sec { margin-top: 26px; }
.me-sec h2 {
  font-size: var(--v2-fs-caption); font-weight: 700; color: var(--v2-ink-3);
  margin: 0 4px 10px; letter-spacing: .01em;
}
.me-group {
  background: var(--v2-surface); border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-sh-card); overflow: hidden;
}
.me-item {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px; width: 100%;
  border: none; background: none; font-family: var(--v2-font); text-align: left;
  color: inherit; text-decoration: none; cursor: pointer; font-size: var(--v2-fs-body);
}
.me-item + .me-item { border-top: 1px solid var(--v2-line); }
.me-item:active { background: var(--v2-surface-2); }
.me-item .ic {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: var(--v2-ic-lg);
  background: var(--v2-surface-2); color: var(--v2-ink-2);
}
.me-item .t { flex: 1; min-width: 0; font-weight: 600; }
.me-item .val {
  font-size: var(--v2-fs-caption); color: var(--v2-ink-3); flex-shrink: 0;
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-item .pill {
  background: var(--v2-brand-btn); color: #fff; border-radius: var(--v2-r-pill);
  font-size: var(--v2-fs-micro); font-weight: 700; padding: 3px 9px; flex-shrink: 0;
}
.me-item .chev { color: var(--v2-line-2); font-size: var(--v2-ic-md); flex-shrink: 0; }

/* Destructive row — account deletion is an App Store requirement and
   has to stay reachable, so it is styled, not hidden. */
.me-item.danger .t, .me-item.danger .ic { color: var(--v2-bad); }
.me-item.danger .ic { background: #FCF0EE; }

/* Toggle switch */
.me-sw {
  width: 46px; height: 28px; border-radius: 999px; border: none; flex-shrink: 0;
  background: var(--v2-line-2); position: relative; cursor: pointer;
  transition: background .18s ease;
}
.me-sw::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  transition: transform .18s ease;
  box-shadow: 0 1px 3px rgba(20,35,30,.24);
}
.me-sw[aria-pressed="true"] { background: var(--v2-brand-btn); }
.me-sw[aria-pressed="true"]::before { transform: translateX(18px); }
.me-sw[disabled] { opacity: .5; cursor: default; }

/* Language / unit segmented pickers, inline in their row. */
.me-seg { display: flex; gap: 5px; flex-shrink: 0; }
/* …and it has to stay on one line with its label, at every width.
   Measured at 375px: the row has 271px inside its padding, and
   icon + "Language" + 한국어/EN/中文 wants 293. Twenty-two pixels, and
   since the picker cannot shrink it was the LABEL that gave — the row
   read "Langu".

   Two earlier attempts wrapped instead, and wrapping is the wrong
   answer here: the first took the label down with the picker (icon
   alone on line one, label on line two, buttons on line three), and
   even the corrected version left these two rows twice the height of
   every row above them.

   So the picker gets tighter instead. Horizontal padding 11px → 7px
   across three pills is 24px back — one more than the row was short.
   Vertical padding is untouched: it is what gives the pills their
   tap height. 단위 (kg·cm / lb·ft) already fit with 45px to spare and
   is only here to keep the two rows identical. */
@media (max-width: 420px) {
  .me-item.is-seg .me-seg { gap: 4px; }
  .me-item.is-seg .me-seg button { padding: 6px 7px; }
}
.me-seg button {
  border: 1.5px solid var(--v2-line-2); background: var(--v2-surface);
  color: var(--v2-ink-2); border-radius: var(--v2-r-pill);
  font-family: var(--v2-font); font-size: var(--v2-fs-label); font-weight: 600;
  padding: 6px 11px; cursor: pointer;
}
.me-seg button[aria-pressed="true"] {
  background: var(--v2-brand-btn); border-color: var(--v2-brand-btn); color: #fff;
}

/* Two rows of fine print, mirroring /mypage/profile's footer: the build
   number (app only) over the three legal documents. Separators are drawn
   rather than typed so the row survives translation without a stray "|"
   at a line break. */
.me-foot {
  text-align: center; font-size: var(--v2-fs-micro); color: var(--v2-ink-3);
  line-height: var(--v2-lh-loose); margin-top: 26px;
}
.me-foot-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.me-foot-row:empty { display: none; }
.me-foot-legal { margin-top: 6px; }
.me-foot-legal a { color: var(--v2-ink-3); text-decoration: underline; }
.me-foot-legal a:hover { color: var(--v2-ink-2); }
.me-foot-sep {
  width: 1px; height: 10px; background: var(--v2-line-2); display: inline-block;
}
.me-foot-version[hidden] { display: none; }

/* ============================================================
   Sub-screens: /mypage/me/profile, /notifications, /security
   ============================================================ */

/* The back link is `.v2-back` in assets/vita-v2.css — shared, because
   예약 · 메시지 · 결제 need exactly the same control and do not load
   this file. */

/* A sentence under the h1, for the screens that need to say what they
   are before the first control. */
.me-lede {
  font-size: var(--v2-fs-caption); color: var(--v2-ink-3);
  line-height: var(--v2-lh-loose); margin: -10px 0 18px;
}

/* Secondary line inside a row's label — what the switch actually does.
   Every switch on the 알림 screen names a real sender, and naming it is
   the whole point: the four toggles this replaced said "예약 SMS" and
   "마케팅" while no sender read either one. */
.me-item .t small {
  display: block; margin-top: 3px;
  font-size: var(--v2-fs-caption); font-weight: 500; color: var(--v2-ink-3);
  line-height: var(--v2-lh-loose);
}
/* A row whose switch is off because its master is off. Dimmed, not
   hidden — the member should still see what they have turned off. */
.me-item.is-muted .t, .me-item.is-muted .ic { opacity: .45; }

/* ─── Forms ─────────────────────────────────────────────────── */
.me-form { display: block; }
.me-field { padding: 13px 16px; }
.me-field + .me-field { border-top: 1px solid var(--v2-line); }
/* Not `.me-field > label`: the two-up rows wrap each field in a <div>,
   so a direct-child selector missed exactly those labels and they drew
   at the browser default while their neighbours drew at caption size.
   :not(.me-check) keeps the consent rows, which are labels wrapping a
   checkbox and lay themselves out. */
.me-field label:not(.me-check) {
  display: block; margin-bottom: 6px;
  font-size: var(--v2-fs-caption); font-weight: 600; color: var(--v2-ink-2);
}
.me-in {
  width: 100%; box-sizing: border-box;
  background: var(--v2-surface); color: var(--v2-ink);
  border: 1.5px solid var(--v2-line-2); border-radius: var(--v2-r-md);
  font-family: var(--v2-font); font-size: var(--v2-fs-control);
  padding: 11px 13px;
}
.me-in:focus { border-color: var(--v2-brand-strong); outline: none; }
.me-in[disabled] { background: var(--v2-surface-2); color: var(--v2-ink-3); }
/* iOS gives date inputs a fixed intrinsic width that ignores width:100%
   and overflows the field. */
.me-in[type="date"] { -webkit-appearance: none; appearance: none; }
.me-hint {
  margin: 5px 0 0; font-size: var(--v2-fs-micro); color: var(--v2-ink-3);
  line-height: var(--v2-lh-loose);
}
.me-duo { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 520px) { .me-duo { grid-template-columns: 1fr; } }

.me-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 16px 16px;
}
.me-btn {
  border: none; border-radius: var(--v2-r-md); cursor: pointer;
  background: var(--v2-brand-btn); color: #fff;
  font-family: var(--v2-font); font-size: var(--v2-fs-body); font-weight: 700;
  padding: 12px 20px;
}
.me-btn.ghost { background: var(--v2-surface-2); color: var(--v2-ink); }
.me-btn.danger { background: var(--v2-bad); }
.me-btn[disabled] { opacity: .5; cursor: default; }

.me-msg {
  display: none; margin: 0 16px 14px; padding: 10px 13px;
  border-radius: var(--v2-r-md); font-size: var(--v2-fs-caption);
  line-height: var(--v2-lh-loose);
}
.me-msg.show { display: block; }
.me-msg.ok   { background: var(--v2-brand-tint); color: var(--v2-brand-ink); }
.me-msg.err  { background: #FCF0EE; color: var(--v2-bad); }
.me-msg.warn { background: var(--v2-surface-2); color: var(--v2-ink-2); }

/* Consent checkboxes on the "add email + password" form. */
.me-check {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 0; font-size: var(--v2-fs-caption); line-height: var(--v2-lh-loose);
}
.me-check input { margin-top: 2px; accent-color: var(--v2-brand-btn); flex-shrink: 0; }
.me-check a { color: var(--v2-brand-ink); }