/* MemberPlus mobile app — brand tokens + shared reskin.
   Mirrors the design system used in the WEB admin (memberplus.css there)
   so both surfaces read as the same product. */

:root {
  --mp-bg: #f6f7f9;
  --mp-card: #ffffff;
  --mp-ink: #0a1b32;
  --mp-ink-muted: #64768a;
  --mp-ink-faint: #9aa8b4;
  --mp-line: #e6e8ec;
  --mp-field: #f0f1f4;
  --mp-field-focus: #e9f6f4;
  --mp-accent-1: #0bb8ac;
  --mp-accent-2: #6fd673;
  --mp-accent-solid: #12aa9d;
  --mp-accent-wash: #e6f7f4;
  /* app icon's own color (blue "M") -- used only for the login tagline's
     accent word, not the general product accent, which stays teal */
  --mp-accent-icon-blue: #1969d2;
  --mp-shadow: 0 24px 60px -20px rgba(10, 27, 50, 0.18);
  --mp-shadow-sm: 0 8px 20px -12px rgba(10, 27, 50, 0.14);
  --mp-radius-card: 18px;
  --mp-radius-field: 12px;
  --mp-font: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}

/* ---------- Mobile frame ----------
   The pages here are built mobile-first (percentage widths, no max-width),
   which is correct inside an actual phone-width WebView but stretches into
   an unreadably wide layout in a desktop browser -- our only way to
   preview/test this app locally. Capping body width is a no-op on a real
   phone (already narrower than the cap) and makes desktop preview honest. */
/* MDL's fixed-header layout positions some internal elements relative to
   the viewport rather than this (now-narrowed) body, which pushes the
   real <html> scrollWidth out past the frame and opens up a horizontal
   scrollbar. Clip it -- a mobile app should never scroll sideways. */
html {
  overflow-x: hidden;
  /* 이 앱은 고정 폭 모바일 화면이라 확대가 도움이 되지 않는다. 핀치는
     viewport 설정으로 막고, 더블탭 확대는 여기서 막는다. manipulation 은
     탭과 스크롤은 그대로 두고 더블탭 줌만 없애므로 조작감을 해치지 않는다. */
  touch-action: manipulation;
  /* iOS 가 가로/세로를 오갈 때 글자 크기를 임의로 키우는 것도 막는다. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.lightgray_body,
body.blue_body {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--mp-bg);
  font-family: var(--mp-font);
  box-shadow: 0 0 40px rgba(10, 27, 50, 0.08);
}

/* MDL's JS layout upgrade injects a new .mdl-layout__container as a direct
   child of <body> and gives it position:absolute; width:100%. With body
   itself position:static, that container had no positioned ancestor to
   size against, so "100%" resolved off the viewport instead of our
   480px frame -- every inner page (calendar, lists, everything using the
   default MDL layout) was rendering at full window width and getting
   clipped by the overflow-x:hidden above. Making body itself the
   positioned ancestor fixes the real cause in one place. */

body, input, textarea, select, button {
  font-family: var(--mp-font);
}

/* ---------- Login ----------
   Mirrors the WEB admin login exactly: a centered white card floating on
   a soft gray stage with a faint radial-gradient accent, rather than the
   flat full-bleed page this used to be -- the two apps read as different
   products when placed side by side otherwise. */
body.blue_body {
  background: var(--mp-bg);
}

.mp-login-stage {
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 20px;
  position: relative;
}

.mp-login-stage::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 420px at 82% 8%, rgba(111, 214, 115, 0.22), transparent 65%),
    radial-gradient(480px 380px at 6% 92%, rgba(11, 184, 172, 0.18), transparent 65%);
}

.mp-brandmark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.mp-brandmark .mp-wordmark {
  height: 40px;
  width: auto;
}

.mp-tagline {
  font-size: 13px;
  color: var(--mp-ink);
  white-space: nowrap;
  margin: 0;
}

.mp-tagline .mp-accent {
  color: var(--mp-accent-icon-blue);
  font-weight: 600;
}

.mp-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 380px;
  box-sizing: border-box;
  background: var(--mp-card);
  border: 1px solid var(--mp-line);
  border-radius: var(--mp-radius-card);
  box-shadow: var(--mp-shadow);
  padding: 32px 28px 28px;
}

.mp-card #messages {
  max-width: none;
  padding: 0;
  margin: 0 0 16px;
}

/* message.php wraps the alert in an MDL grid row, and its 8px padding
   stacked on the cell's own 8px margin below -- together they inset the
   alert 16px on each side, so it came out narrower than the fields it
   sits above and wrapped Korean lines that would otherwise fit. */
.mp-card > .mdl-grid {
  padding: 0;
}

.mp-field {
  position: relative;
  margin-bottom: 12px;
}

.mp-field input,
.mp-field select {
  width: 100%;
  height: 52px;
  border-radius: var(--mp-radius-field);
  border: 1.5px solid transparent;
  background: var(--mp-field);
  color: var(--mp-ink);
  padding: 0 16px;
  font-size: 14.5px;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mp-field input::placeholder {
  color: var(--mp-ink-faint);
}

.mp-field input:focus,
.mp-field select:focus {
  background: var(--mp-field-focus);
  border-color: var(--mp-accent-1);
}

.mp-btn-submit {
  display: block;
  width: 100%;
  height: 52px;
  border-radius: var(--mp-radius-field);
  border: none;
  background: var(--mp-accent-solid);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 14px 28px -12px rgba(11, 184, 172, 0.5);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.mp-btn-submit:hover {
  filter: brightness(1.04);
}

.mp-btn-submit:active {
  transform: translateY(1px);
}

.mp-btn-submit:focus-visible,
.mp-field input:focus-visible,
.mp-field select:focus-visible {
  outline: 2px solid var(--mp-accent-solid);
  outline-offset: 2px;
}

.mp-signup-sub {
  text-align: center;
  color: var(--mp-ink-muted);
  font-size: 13px;
  margin: -6px 0 20px;
}

.mp-signup-error {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--mp-radius-field);
  background: #fdecea;
  color: #c0392b;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}

.mp-signup-link {
  display: block;
  margin-top: 18px;
  text-align: center;
  color: var(--mp-ink-muted);
  font-size: 14px;
  text-decoration: none !important;
  /* On a narrow phone the two links share a row, and Korean breaks
     mid-word by default -- "회원가입" split across lines as "회원가 / 입".
     keep-all breaks at the space before it instead. */
  word-break: keep-all;
}

.mp-signup-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.mp-signup-links .mp-signup-link {
  margin-top: 0;
}

.mp-signup-sep {
  color: var(--mp-line);
  font-size: 12px;
}

.mp-signup-link:hover {
  color: var(--mp-accent-solid);
}

/* "처음이신가요?" is the prompt and "회원가입" is the action it offers, so
   the action gets the weight. Colour is left to the link, which keeps the
   pair reading as one line and lets the hover state carry both halves. */
.mp-signup-strong {
  font-weight: 700;
}

/* ---------- Home ---------- */

body.lightgray_body {
  background: var(--mp-bg);
}

.main_container {
  background: var(--mp-bg);
}

.main_container .top_a {
  height: 132px;
  border-bottom: none;
  background-color: var(--mp-ink);
  background-blend-mode: multiply;
}

.main_container .top_a .logo {
  display: none;
}

.main_container .top_a .top_title {
  top: 64px;
  font-weight: 700;
  font-size: 1.05em;
  color: #ffffff !important;
}

.main_container .top_a .notice {
  bottom: 14px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  padding: 0 14px !important;
  width: calc(92.8% - 28px) !important;
}

.main_container .top_a .notice .cont .subject {
  color: #ffffff !important;
  font-weight: 600;
}

.main_container .top_a .notice .cont .date {
  color: rgba(255, 255, 255, 0.7) !important;
}

.main_container .top_a .notice .title {
  color: rgba(255, 255, 255, 0.85) !important;
  line-height: 30px;
}

.main_container .my_card {
  margin-top: -34px;
  border: none;
  border-radius: var(--mp-radius-card);
  box-shadow: 0 20px 40px -20px rgba(10, 27, 50, 0.35);
  padding: 14px;
  position: relative;
  z-index: 2;
}

.main_container .my_card .title {
  display: none;
}

.main_container .my_card .pic {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  background-color: var(--mp-field);
  background-size: cover;
}

.main_container .my_card .info {
  width: calc(100% - 76px - 14px);
  padding-left: 14px;
}

.main_container .my_card .info .row_top {
  border-bottom: none;
  padding-bottom: 2px;
}

.main_container .my_card .info .row_top .name {
  color: var(--mp-ink);
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.main_container .my_card .info .row_top .name a {
  color: var(--mp-accent-solid);
}

.main_container .my_card .info .detail {
  padding-top: 4px;
}

.main_container .my_card .info .detail dl dt {
  color: var(--mp-ink-faint);
  font-size: 0.78em;
  font-weight: 600;
}

.main_container .my_card .info .detail dl dd {
  color: var(--mp-ink);
  font-size: 0.85em;
  font-weight: 600;
}

.main_container .main_nav {
  margin-top: 18px;
  padding: 0 3.6%;
}

.main_container .main_nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.main_container .main_nav li {
  float: none;
  width: calc(33.333% - 7px);
  height: auto;
  min-height: 108px;
  box-sizing: border-box;
  padding: 16px 8px !important;
  border: none;
  border-radius: var(--mp-radius-card);
  background: var(--mp-card);
  box-shadow: var(--mp-shadow-sm);
}

.main_container .main_nav li .ico {
  height: 40px;
  width: 40px;
  margin: 0 auto;
  padding: 12px;
  box-sizing: content-box;
  border-radius: 16px;
  background-size: contain !important;
  background-position: center !important;
}

/* Each tile gets a soft tint from the same 8-color set WEB's sidebar
   badges use, so the two products read as one family at a glance. Kept
   pale (not solid, like WEB's) since these icons are already full-color
   illustrations and a bold badge fill would fight them. */
.main_container .main_nav li:nth-child(1) .ico { background-color: rgba(108, 140, 255, 0.14); }
.main_container .main_nav li:nth-child(2) .ico { background-color: rgba(177, 140, 255, 0.14); }
.main_container .main_nav li:nth-child(3) .ico { background-color: rgba(255, 182, 92, 0.16); }
.main_container .main_nav li:nth-child(4) .ico { background-color: rgba(92, 208, 198, 0.16); }
.main_container .main_nav li:nth-child(5) .ico { background-color: rgba(255, 122, 156, 0.14); }
.main_container .main_nav li:nth-child(6) .ico { background-color: rgba(111, 214, 115, 0.16); }
.main_container .main_nav li:nth-child(7) .ico { background-color: rgba(92, 184, 255, 0.14); }
.main_container .main_nav li:nth-child(8) .ico { background-color: rgba(154, 168, 180, 0.16); }

.main_container .main_nav li.trainer .pic {
  border-radius: 16px;
}

.main_container .main_nav li.trainer .pic {
  width: 44px;
  height: 44px;
}

.main_container .main_nav li dl dt a,
.main_container .main_nav li > p a {
  color: var(--mp-ink);
  font-size: 0.82em;
  font-weight: 700;
}

.main_container .main_nav li dl dd {
  color: var(--mp-accent-solid);
  font-size: 0.78em;
  font-weight: 600;
  margin-top: 2px;
}

.main_container .main_nav li.trainer .name {
  color: var(--mp-ink);
}

/* ---------- Shared: inner-page header + buttons ---------- */

.mdl-layout__header {
  box-shadow: none !important;
  border-bottom: 1px solid var(--mp-line);
}

.mdl-layout__header .mdl-layout__header-row,
.mdl-layout__header h1 {
  color: var(--mp-ink) !important;
  font-weight: 700;
}

.btn_login,
.btn_page_back {
  font-family: var(--mp-font);
}

/* common.css paints this button's background black while it is held down.
   The button's only content is a single &nbsp; -- the arrow itself is a
   background image -- so the fill covered the arrow with a black square
   instead of reading as a press. Keep a press cue, drop the square.
   (background-color alone: the shorthand would clear the arrow image.) */
.btn_page_back:active {
  background-color: transparent;
  border-radius: 0;
  opacity: 0.5;
}

/* ---------- Shared: list/detail pages built on MDL cards ----------
   messages, stops, counsels and exercises all render their lists through
   the same .board-card/.mdl-card + .blog-card-* markup, so reskinning it
   once here reaches all four screens. The stock MDL look (sharp corners,
   flat indigo shadow) reads dated next to the rest of the app now. */
.mdl-layout__content {
  background: var(--mp-bg);
  padding: 12px 3.6% 32px;
  box-sizing: border-box;
}

.board-card,
.mdl-card {
  width: 100%;
  border: none !important;
  border-radius: var(--mp-radius-card) !important;
  box-shadow: var(--mp-shadow-sm) !important;
  margin-bottom: 12px;
  overflow: hidden;
}

.board-card-padding {
  padding: 14px !important;
}

.mdl-card__supporting-text {
  padding: 0 !important;
  color: var(--mp-ink);
}

/* index.css gives this wrapper a 20px margin and a matching
   calc(100% - 40px) width, which stacks on top of the 14px .board-card
   padding above it and pushed every card's content 34px in from the card
   edge -- half a column of dead space on a phone. */
.board-card-padding .mdl-card__supporting-text {
  margin: 0;
  width: 100%;
}

.section__circle-container {
  width: 52px !important;
}

/* .board-img (notices, messages detail) kept the old 64px circle from
   index.css, which overflows the 52px .section__circle-container and eats
   the gap .section__text reserves for it. Match .article-image so the
   icon sits inside its column and the text keeps its left padding. */
.article-image,
.board-img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--mp-field);
}

.section__text {
  width: calc(100% - 52px) !important;
  padding-left: 10px;
  box-sizing: border-box;
}

.blog-card-title {
  display: block;
  color: var(--mp-ink);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.blog-card-content {
  color: var(--mp-ink-muted);
  font-size: 13px;
  line-height: 1.5;
  margin-top: 4px;
}

.blog-card-date {
  color: var(--mp-ink-faint);
  font-size: 11.5px;
  margin-top: 6px;
}

.mdl-button {
  font-family: var(--mp-font);
  text-transform: none;
  border-radius: var(--mp-radius-field);
  font-weight: 700;
}

.mdl-button--raised {
  box-shadow: none !important;
  background: var(--mp-accent-solid) !important;
  color: #ffffff !important;
}

.mdl-button--raised:active,
.mdl-button--raised:hover {
  box-shadow: none !important;
}

.mdl-button--accent:not(.mdl-button--raised) {
  background: #fdecea !important;
  color: #d94c3f !important;
}

/* The "add new" action button (stops/counsels/reservations) uses plain
   .mdl-button with no raised/accent/primary modifier, so it fell back to
   MDL's default flat style instead of reading as the primary action. */
.mdl-button.add-close-button {
  display: block;
  width: 100%;
  height: 48px;
  line-height: 48px;
  box-sizing: border-box;
  background: var(--mp-accent-solid) !important;
  color: #ffffff !important;
  margin: 0 0 16px !important;
}

/* Empty-state placeholder text ("No Current Message", "예약이 없습니다", ...)
   was unstyled body copy sitting flush against the header. Give it the
   same centered, muted treatment everywhere it appears. */
.mdl-layout__content p,
.mdl-layout__content > .mdl-layout__tab-bar,
.mdl-tabs__panel table td[colspan] {
  color: var(--mp-ink-faint);
  font-size: 13.5px;
  text-align: center;
  padding: 48px 16px !important;
}

/* ---------- Shared: form pages (stops, counsels) ----------
   These screens still carry the pre-reskin markup -- a .wills-content
   panel holding .form-group rows of bare .form-control fields -- so they
   never picked up the .mp-field treatment the login screen uses. The date
   inputs were left at the browser's default control look, and the panel's
   grey (index.css: #f6f6f6) is the same value as the page behind it, so
   the card read as a faint outline instead of a surface. Restyle the
   shared classes once here rather than per screen. */
.wills-content {
  border: none;
  background: var(--mp-card);
  border-radius: var(--mp-radius-card);
  box-shadow: var(--mp-shadow-sm);
  padding: 18px 16px;
  margin: 0 0 20px;
}

/* The section caption ("휴회신청 입력") and the submit row are each wrapped
   in a bare .mdl-grid, whose stock 8px gutter is the wrong rhythm now that
   .mdl-layout__content owns the page padding. */
.mdl-layout__content > .mdl-grid {
  padding: 0;
  margin: 0;
}

.mdl-cel {
  color: var(--mp-ink-muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

/* Each row is "label <br> field", and the period row is "label <br> field
   ~ field". Laying the row out as a wrapping flex line lets the label take
   a line of its own and the two date fields share the rest evenly, which
   the stray <br> would otherwise fight. The faint colour here is picked up
   only by the bare "~" text node between the dates; labels set their own. */
.wills-content .form-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100% !important;
  margin: 0 0 18px !important;
  color: var(--mp-ink-faint);
}

.wills-content .form-group:last-child {
  margin-bottom: 0 !important;
}

.wills-content .form-group > br {
  display: none;
}

.wills-content .form-group > label {
  flex: 0 0 100%;
  color: var(--mp-ink-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* index.css sets input.form-control[type="text"] with a type selector, so
   these need the element qualifier too in order to win. */
.wills-content input.form-control,
.wills-content select.form-control,
.wills-content textarea.form-control {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 1.5px solid transparent;
  border-radius: var(--mp-radius-field);
  background: var(--mp-field);
  color: var(--mp-ink);
  font-family: inherit;
  font-size: 14.5px;
  outline: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.wills-content textarea.form-control {
  height: auto;
  min-height: 108px;
  padding: 12px 14px;
  line-height: 1.55;
  resize: vertical;
}

.wills-content select.form-control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364768a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
}

.wills-content input[type="date"].form-control::-webkit-calendar-picker-indicator {
  opacity: 0.45;
  cursor: pointer;
}

.wills-content input.form-control:focus,
.wills-content select.form-control:focus,
.wills-content textarea.form-control:focus {
  background: var(--mp-field-focus);
  border-color: var(--mp-accent-1);
}

.wills-content input.form-control::placeholder,
.wills-content textarea.form-control::placeholder {
  color: var(--mp-ink-faint);
}

/* index.css singles this one field out by id (#c-description), which
   outranks the class rules above and left it wearing the old 1px grey box
   while its siblings were restyled. Match the id's weight to pull it back
   in line; its ime-mode declarations there are untouched. */
#c-description.form-control {
  border: 1.5px solid transparent;
  padding: 0 14px;
  font-size: 14.5px;
  line-height: normal;
}

#c-description.form-control:focus {
  border-color: var(--mp-accent-1);
}

/* ---------- Shared: stops / counsels list + detail (.add-layout) ----------
   None of these cards show an avatar, yet .section__text still reserves
   the 52px column the messages and notices lists need for one, so each
   card indented its own text by half a thumbnail and wrapped the title a
   word early. Reclaim the full width inside .add-layout, which is only
   ever used by the avatar-less screens. */
.add-layout .section__text {
  width: 100% !important;
  padding-left: 0;
}

/* The list rows are the 4-col variant (the detail pages use 12-col), and
   they are the only ones carrying a delete button pinned to the card's
   top-right corner, so only they need to keep that corner clear. */
.add-layout .section__text.mdl-cell--4-col {
  padding-right: 72px;
}

.board-card-actions {
  position: absolute;
  right: 14px;
  top: 14px;
}

/* The request/complete state used to trail the title as bare text after a
   slash ("2026-09-01~2026-09-15 / 신청"), which wrapped onto its own line
   on any realistic title length and read as part of the title when it did
   fit. A badge keeps it on the title's line and tells the two apart. */
/* .blog-card-title is a block elsewhere (notices/messages, where the body
   text follows it), which would drop the badge onto its own line. Inline
   is safe here: what follows the badge is a <div>, so the line still
   breaks after it. */
.add-layout .blog-card-title {
  display: inline;
}

.board-card-status {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--mp-accent-wash);
  color: var(--mp-accent-solid);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 20px;
  vertical-align: 2px;
  white-space: nowrap;
}

/* Finished items are history, so they step back from the open ones. */
.board-card-status.is-done {
  background: var(--mp-field);
  color: var(--mp-ink-muted);
}

.board-card-actions .mdl-button {
  min-width: 0;
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

/* Empty-state copy sits inside a .wills-content card that brings its own
   padding, so the 48px the shared placeholder rule adds on top of it
   opened a hole in the middle of the card. */
.mdl-layout__content .wills-content p {
  padding: 26px 16px !important;
  margin: 0;
}

/* ---------- Stops: membership-period guidance ----------
   This block used to borrow .section__text, so the avatar reservation
   above squeezed it 52px narrower than every card beside it and pushed it
   10px out of alignment, while MDL left the bare <h3> at 34px -- larger
   than the page's own title. It is a card of its own, so style it as one. */
.stop-guide {
  display: block;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 16px;
  box-sizing: border-box;
  background: var(--mp-card);
  border-radius: var(--mp-radius-card);
  box-shadow: var(--mp-shadow-sm);
}

.stop-guide h3 {
  margin: 0 0 12px;
  color: var(--mp-ink);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.stop-guide ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stop-guide li {
  position: relative;
  padding-left: 13px;
  color: var(--mp-ink-muted);
  font-size: 13.5px;
  line-height: 1.75;
}

.stop-guide li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--mp-accent-1);
}

/* Outranks the centred empty-state placeholder rule, which was catching
   this footnote and stacking 48px of padding under the list. */
.stop-guide p {
  margin: 14px 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid var(--mp-line);
  color: var(--mp-ink-faint);
  font-size: 12.5px;
  line-height: 1.6;
  text-align: left !important;
}

/* ---------- Detail pages built on the MDL tab panel ----------
   index.css pads this wrapper by 15px, which predates .mdl-layout__content
   owning the page gutter. The screens that use it (notices, messages,
   stops and counsels detail) therefore drew their cards 30px narrower than
   every other screen's, so the edges no longer lined up between a list and
   the detail page it opens. */
.mdl-layout__tab-panel {
  padding: 0;
}

/* The dotted rule under a card header (index.css) is the last of the
   pre-reskin styling left on the notices and messages cards; the detail
   pages below already read as the app's own hairline. Match them. */
.board-card-title {
  border-bottom: 1px solid var(--mp-line);
}

/* ---------- Stops / counsels detail card ----------
   The header pairs a label with its date, but the bare <h3> sat at MDL's
   34px with 24px of margin: the label came out larger than the page title
   above it, and as a flex item its margin stretched the date cell to 88px
   beside it. */
.add-layout .board-card-title {
  align-items: baseline;
  gap: 12px;
  padding: 0 0 12px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--mp-line);
  color: var(--mp-ink);
}

.add-layout .board-card-title h3 {
  margin: 0;
  color: var(--mp-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* The date is always the trailing cell, on both the counsel card (label +
   date) and the stop card (period + date); the leading cell carries real
   content and keeps the body treatment. */
.add-layout .board-card-title > div:last-child {
  color: var(--mp-ink-faint);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}

.add-layout .board-card-content {
  padding: 0;
  color: var(--mp-ink);
  font-size: 14px;
  line-height: 1.65;
}

/* The centre's reply is what a member opens this screen to read, so give
   it its own tinted block rather than leaving it as one more paragraph in
   the same colour as the question it answers.
   The .add-layout prefix is load-bearing: this element also carries
   .board-card-content, and that rule is two classes deep, so it outranked
   a bare .board-card-answer and reset the padding to 0 -- the tint was
   drawn hard against the text on all four sides. The accent rail down the
   left edge marks the block as the centre's voice rather than the
   member's, which the tint alone was too faint to say. */
.add-layout .board-card-answer {
  margin-top: 18px;
  padding: 13px 16px 15px;
  border-radius: var(--mp-radius-field);
  border-left: 3px solid var(--mp-accent-1);
  background: var(--mp-accent-wash);
  color: var(--mp-ink);
}

/* A caption, not a second page heading: the reply's own text is what
   should carry weight inside the block. */
.add-layout .board-card-answer h3 {
  margin: 0 0 7px;
  color: var(--mp-accent-solid);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ---------- Barcode (member card) ----------
   common.css styles .my_card only under .main_container, which this screen
   is not, so the page rendered unstyled: a bare <h2> at MDL's size (larger
   than the header title above it) over a barcode sitting on the page
   background with no card of its own. This is the screen a member holds up
   to the reader at the door, so the barcode gets the room. */
.mp-barcode {
  text-align: center;
}

.mp-barcode-card {
  margin: 8px 0 0;
  padding: 24px 16px 26px;
  background: var(--mp-card);
  border-radius: var(--mp-radius-card);
  box-shadow: var(--mp-shadow-sm);
}

.mp-barcode-title {
  margin: 0 0 22px;
  color: var(--mp-ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

#barcode_target {
  display: inline-block;
  max-width: 100%;
}

/* Both of these outrank the centred empty-state placeholder rule
   (.mdl-layout__content p), which would otherwise stack 48px of padding
   around the card number and mute it to placeholder grey. */
.mp-barcode .mp-barcode-no {
  margin: 18px 0 0 !important;
  padding: 0 !important;
  color: var(--mp-ink-muted) !important;
  font-size: 15px !important;
  font-weight: 700;
  letter-spacing: 3px;
}

.mp-barcode .mp-barcode-empty {
  margin: 0 !important;
  padding: 36px 16px !important;
}

/* ---------- Trainers ----------
   The row borrowed .add-grid, whose space-between pushed the photo and the
   name to opposite edges of the card with a wide empty gap between them,
   and the member's own trainer was marked by flooding the whole card with
   #43badd -- a blue from the old palette that says nothing about why the
   row is highlighted. */
.mp-trainer {
  margin: 0 0 12px;
  padding: 12px;
  background: var(--mp-card);
  border: 1.5px solid transparent;
  border-radius: var(--mp-radius-card);
  box-shadow: var(--mp-shadow-sm);
}

.mp-trainer .add-grid {
  justify-content: flex-start;
  gap: 14px;
}

.mp-trainer .training-small-img {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: var(--mp-radius-field);
  object-fit: cover;
  background: var(--mp-field);
}

.mp-trainer .add-grid > div {
  margin: 0;
  flex: 0 0 auto;
}

.mp-trainer h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.mp-trainer h3 a {
  color: var(--mp-ink);
  font-size: inherit;
}

/* The member's own trainer: a tinted outline and a label that says what
   the highlight means, instead of a full-bleed colour fill. */
.mp-trainer.is-mine {
  border-color: var(--mp-accent-1);
  background: var(--mp-accent-wash);
}

.mp-trainer-badge {
  margin-left: auto;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--mp-accent-solid);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
}

.mp-trainer-pagination {
  padding: 4px 0 0;
}

/* ---------- Trainer detail ----------
   common.css styles this screen for a dark background it no longer has:
   the values below each label are #cfcfcf, which is all but invisible on
   white, and the close button carries the same old blue as the list. */
#view_trainer .add-box {
  margin: 0;
  padding: 24px 16px 16px;
  background: var(--mp-card);
  border-radius: var(--mp-radius-card);
  box-shadow: var(--mp-shadow-sm);
}

#view_trainer .pic {
  width: 120px;
  height: 120px;
}

/* .name is a <p>, so the centred empty-state placeholder rule catches it
   and forces 48px of padding around the trainer's name; !important here
   is what it takes to answer that one. */
#view_trainer .name {
  padding: 18px 0 16px !important;
  margin: 0 0 16px !important;
  color: var(--mp-ink);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--mp-line);
}

#view_trainer .info {
  padding: 0;
}

#view_trainer .info dl {
  display: flex;
  gap: 12px;
  padding: 9px 0;
}

#view_trainer .info dl + dl {
  border-top: 1px solid var(--mp-line);
}

#view_trainer .info dl dt,
#view_trainer .info dl dd {
  float: none;
  line-height: 1.6;
}

#view_trainer .info dl dt {
  width: 68px;
  flex: 0 0 68px;
  color: var(--mp-ink-muted);
  font-size: 12.5px;
  font-weight: 700;
}

#view_trainer .info dl dd {
  width: auto;
  flex: 1 1 auto;
  color: var(--mp-ink);
  font-size: 13.5px;
}

#view_trainer .btns {
  padding-top: 18px;
  margin: 0;
}

#view_trainer .btns a,
#view_trainer .btns .btn_reservation {
  height: 48px;
  line-height: 48px;
  border-radius: var(--mp-radius-field);
  background: var(--mp-accent-solid);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
}

/* ---------- Reservations calendar table ---------- */
.add-calendar-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--mp-card);
  border-radius: var(--mp-radius-card);
  overflow: hidden;
  box-shadow: var(--mp-shadow-sm);
}

.add-calendar-table-title th {
  background: var(--mp-field);
  color: var(--mp-ink-muted);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 6px;
  border: none;
}

.add-calendar-table-content td {
  padding: 12px 6px;
  font-size: 13px;
  color: var(--mp-ink);
  border-top: 1px solid var(--mp-line);
  text-align: center;
}

/* ---------- Attendance stat pair ---------- */
#attendances .mdl-grid {
  padding: 4px 0 16px;
}

#attendances dl dt {
  color: var(--mp-ink-faint);
  font-size: 12.5px;
  font-weight: 600;
}

#attendances dl dd {
  color: var(--mp-ink);
  font-size: 15px;
  font-weight: 700;
  margin-top: 2px;
}

#attendances .dot {
  border-radius: 50%;
}

.calendar {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: var(--mp-radius-card);
  overflow: hidden;
  box-shadow: var(--mp-shadow-sm);
  box-sizing: border-box;
}

/* pignose-calendar sizes itself off a hard-coded desktop width from its
   own stylesheet rather than its actual container, which pushed it far
   outside our 480px frame (clipped by body's overflow-x:hidden, leaving
   a dead gap on the left instead of a centered calendar). */
.calendar .pignose-calendar {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* ---------- Home v2 (bottom-tab redesign) ---------- */

body:has(.mp-bottom-tabs) {
  padding-bottom: 76px;
}

.mp-home {
  padding: 0 0 24px;
}

.mp-home-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 3.6% 0;
}

.mp-home-branch {
  font-size: 13px;
  font-weight: 700;
  color: var(--mp-ink-muted);
}

.mp-barcode-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--mp-accent-wash);
  color: var(--mp-accent-solid);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.mp-barcode-btn .material-icons {
  font-size: 16px;
}

.mp-greeting {
  padding: 20px 3.6% 4px;
}

.mp-greeting-hello {
  color: var(--mp-ink-muted);
  font-size: 13px;
  font-weight: 600;
}

.mp-greeting-name {
  color: var(--mp-ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-top: 2px;
}

/* Solid mint hero card -- this is the one piece of info the home screen
   exists to answer ("what's my membership status"), so it keeps the color
   fill that every quieter supporting card (stat tiles, mileage row)
   deliberately doesn't have. PT gets the identical card (same classes,
   same size) stacked right under it: a member can hold both at once, and
   they're peers -- two passes -- not a primary/secondary pair, so they
   read the same rather than one being a small subordinate row. */
.mp-membership-card {
  margin: 16px 3.6% 0;
  padding: 20px;
  border-radius: var(--mp-radius-card);
  background: #2bbfae;
  color: #ffffff;
  box-shadow: 0 16px 32px -16px rgba(11, 184, 172, 0.5);
}

.mp-membership-card + .mp-membership-card {
  margin-top: 10px;
}

.mp-membership-empty {
  background: var(--mp-ink-faint);
  box-shadow: none;
}

.mp-membership-course {
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
}

.mp-membership-remain {
  margin-top: 8px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
}

.mp-membership-dates {
  margin-top: 4px;
  color: #ffffff;
  font-size: 12px;
}

.mp-stat-row {
  display: flex;
  gap: 10px;
  margin: 16px 3.6% 0;
}

.mp-stat-tile {
  flex: 1;
  padding: 16px 8px;
  border-radius: var(--mp-radius-card);
  background: var(--mp-card);
  box-shadow: var(--mp-shadow-sm);
  text-align: center;
}

.mp-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  border-radius: 50%;
}

.mp-stat-icon .material-icons {
  font-size: 19px;
}

.mp-stat-icon-1 { background: rgba(108, 140, 255, 0.14); color: #4e6be0; }
.mp-stat-icon-2 { background: rgba(255, 122, 92, 0.14); color: #e0602f; }
.mp-stat-icon-3 { background: rgba(111, 214, 115, 0.16); color: #37b24d; }

.mp-stat-label {
  color: var(--mp-ink-faint);
  font-size: 11px;
  font-weight: 600;
}

.mp-stat-value {
  margin-top: 3px;
  color: var(--mp-ink);
  font-size: 14px;
  font-weight: 800;
}

.mp-notice-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 3.6% 0;
  padding: 14px 16px;
  border-radius: var(--mp-radius-card);
  background: var(--mp-card);
  box-shadow: var(--mp-shadow-sm);
  color: var(--mp-ink);
  text-decoration: none;
}

.mp-notice-row .material-icons:first-child {
  color: var(--mp-accent-solid);
  font-size: 18px;
}

.mp-notice-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-chevron {
  color: var(--mp-ink-faint) !important;
  font-size: 18px !important;
}

/* ---------- Bottom tab bar ---------- */

.mp-bottom-tabs {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  background: var(--mp-card);
  border-top: 1px solid var(--mp-line);
  box-shadow: 0 -8px 20px -12px rgba(10, 27, 50, 0.1);
  z-index: 500;
  box-sizing: border-box;
}

.mp-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 0 8px;
  color: var(--mp-ink-faint);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
}

.mp-tab .material-icons {
  font-size: 22px;
}

.mp-tab.is-active {
  color: var(--mp-accent-solid);
}

/* ---------- My Page ---------- */

.mp-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 3.6% 0;
  padding: 18px;
  border-radius: var(--mp-radius-card);
  background: var(--mp-card);
  box-shadow: var(--mp-shadow-sm);
}

.mp-profile-pic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--mp-field);
  background-size: cover;
  background-position: center;
  flex: none;
}

.mp-profile-name {
  color: var(--mp-ink);
  font-size: 16px;
  font-weight: 800;
}

.mp-profile-phone {
  margin-top: 2px;
  color: var(--mp-ink-muted);
  font-size: 12.5px;
}

.mp-menu-list {
  margin: 16px 3.6% 0;
  padding: 0;
  list-style: none;
  border-radius: var(--mp-radius-card);
  background: var(--mp-card);
  box-shadow: var(--mp-shadow-sm);
  overflow: hidden;
}

.mp-menu-list li + li {
  border-top: 1px solid var(--mp-line);
}

.mp-menu-list li a,
.mp-menu-list li > span {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--mp-ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.mp-menu-list li a .material-icons:first-child,
.mp-menu-list li > span .material-icons:first-child {
  color: var(--mp-accent-solid);
  font-size: 20px;
}

.mp-menu-list li a span:not(.mp-chevron),
.mp-menu-list li > span span:not(.mp-soon) {
  flex: 1;
}

.mp-menu-disabled > span {
  color: var(--mp-ink-faint);
}

.mp-menu-disabled .material-icons:first-child {
  color: var(--mp-ink-faint) !important;
}

.mp-soon {
  font-size: 11px;
  font-weight: 700;
  color: var(--mp-ink-faint);
  background: var(--mp-field);
  padding: 3px 8px;
  border-radius: 999px;
}

.mp-logout-link {
  display: block;
  margin: 20px 3.6% 0;
  text-align: center;
  color: var(--mp-ink-faint);
  font-size: 12.5px;
  text-decoration: underline;
}

/* Mileage accrual isn't built yet (no ledger table/controller), so this
   always reads 0 for now -- shipping the row so the layout matches the
   agreed design, and the real number just slots in once that feature
   lands. Not a link yet since there's nowhere for it to go. */
.mp-mileage-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 3.6% 0;
  padding: 16px;
  border-radius: var(--mp-radius-card);
  background: var(--mp-card);
  box-shadow: var(--mp-shadow-sm);
}

.mp-mileage-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mp-accent-wash);
  color: var(--mp-accent-solid);
  flex: none;
}

.mp-mileage-info {
  flex: 1;
}

.mp-mileage-label {
  color: var(--mp-ink-faint);
  font-size: 11.5px;
  font-weight: 600;
}

.mp-mileage-value {
  margin-top: 2px;
  color: var(--mp-accent-solid);
  font-size: 18px;
  font-weight: 800;
}

/* ---------- My info (users/view) ----------
   The screen listed a member's enrolments and locker rentals as three
   full-width raised buttons over two unstyled rows. Three problems:
   the filter links were .mdl-button--raised in the accent colour, so all
   three read as primary actions and the selected one (.mdl-button--colored)
   was barely a shade apart from the other two; the period sat opposite the
   product name with no label, in an old-palette blue; and "Close" -- which
   only repeats the header's back arrow -- was the loudest control on the
   page. */
.mp-seg {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  padding: 4px;
  background: var(--mp-field);
  border-radius: 999px;
}

.mp-seg-item {
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 4px;
  border-radius: 999px;
  color: var(--mp-ink-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.mp-seg-item.is-active {
  background: var(--mp-card);
  color: var(--mp-accent-solid);
  box-shadow: var(--mp-shadow-sm);
}

/* index.css draws .add-box with a 5px radius and a 15px side margin of its
   own, which sat inside the gutter .mdl-layout__content already provides. */
.mp-myinfo .add-box {
  margin: 0 0 10px;
  padding: 14px 16px;
  background: var(--mp-card);
  border-radius: var(--mp-radius-card);
  box-shadow: var(--mp-shadow-sm);
}

.mp-myinfo .add-grid div {
  margin: 0;
}

.mp-myinfo .mp-info-head {
  justify-content: flex-start;
  gap: 10px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--mp-line);
}

.mp-myinfo .add-icon-box {
  flex: 1 1 auto;
  min-width: 0;
}

/* icon1.png / icon2.png are 27x25 and 20x23, so the 40px indent left a
   visible gap and top-left alignment floated them above a 14px title. */
.mp-myinfo .add-icon-box > div {
  display: block;
  background-position: left center;
  color: var(--mp-ink);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 26px;
  text-indent: 34px;
}

/* Both rows now carry a real <i class="material-icons"> instead of the
   icon1.png / icon2.png backgrounds, so the background slot and the indent
   that reserved room for it are no longer wanted here. */
/* .icon-sw is the sports-wear rental card; index.css never knew about it,
   so it only needs the shared reset the other two get here. */
.mp-myinfo .add-icon-box > .icon-course,
.mp-myinfo .add-icon-box > .icon-facility,
.mp-myinfo .add-icon-box > .icon-sw {
  display: flex;
  align-items: center;
  gap: 8px;
  background-image: none;
  text-indent: 0;
}

.mp-myinfo .icon-course .material-icons,
.mp-myinfo .icon-facility .material-icons,
.mp-myinfo .icon-sw .material-icons {
  flex: 0 0 auto;
  color: var(--mp-accent-solid);
  font-size: 20px;
}

/* The sports-wear card draws a coat hanger, which this project's icon font
   does not carry, so that one row uses an inline SVG. Match it to the font
   icons beside it: same box, same colour. */
.mp-myinfo .mp-icon-svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: var(--mp-accent-solid);
}

.mp-myinfo .icon-course span,
.mp-myinfo .icon-facility span,
.mp-myinfo .icon-sw span {
  min-width: 0;
}

.mp-myinfo .mp-info-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 11px;
}

.mp-myinfo .mp-info-label {
  flex: 0 0 auto;
  color: var(--mp-ink-faint);
  font-size: 12px;
  font-weight: 600;
}

.mp-myinfo .mp-info-value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--mp-ink);
  font-size: 13.5px;
  line-height: 1.55;
  text-align: right;
}

/* The period is the row's value, not a link or an action, so it drops the
   old #3091b6 for ordinary body ink. */
.mp-myinfo .blue-box-date {
  color: var(--mp-ink);
}

/* The superseded period ("...(휴회전)") is struck through inside a <p>, which
   the centred empty-state placeholder rule would otherwise catch. */
.mp-myinfo .mp-info-value p {
  margin: 0 0 2px !important;
  padding: 0 !important;
  color: var(--mp-ink-faint) !important;
  font-size: 12.5px;
  text-align: right !important;
}

/* 25px was taller than the card title beside it. */
.mp-myinfo .blue-color-number {
  color: var(--mp-accent-solid);
  font-size: 16px;
  font-weight: 800;
}

/* The locker number trailed a second copy of the product name already
   printed in the title beside it; as a badge it carries only the number. */
.mp-myinfo .locker-number {
  flex: 0 0 auto;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--mp-accent-wash);
  color: var(--mp-accent-solid);
  font-size: 12px;
  font-weight: 700;
  line-height: 22px;
  white-space: nowrap;
}

/* ---------- Validation errors and flash messages ----------
   Every screen renders these through layout/elements/message.php, and
   index.css styles them as a Bootstrap alert for a Bootstrap theme this
   project never loads: a flat pink slab with a 1px border and no icon.
   CodeIgniter wraps each validation error in its own <p>, so two errors
   in one box sat a full paragraph apart, and the dismiss control was a
   bare x floating in the corner (common.js does wire it up -- it just did
   not look like a button). */
/* MDL sizes .mdl-cell--12-col as calc(100% - 16px) to leave room for the
   cell margin removed just above, so the width has to be restated. It has
   to be an explicit 100%, not auto: .mdl-grid is a flex row and the cell
   sets no flex-grow, so an auto width shrinks the box to fit whatever text
   the message happens to contain instead of filling the row. */
#messages {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

#messages .alert {
  position: relative;
  margin: 0;
  padding: 14px 38px 14px 42px;
  border: none !important;
  border-radius: var(--mp-radius-field);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  /* Korean has no inter-word breaking by default in CSS, so a message one
     character too long for the box split mid-word and orphaned a syllable
     on its own line. keep-all breaks at the spaces instead. */
  word-break: keep-all;
}

#messages .alert::before {
  position: absolute;
  left: 15px;
  top: 13px;
  font-family: 'Material Icons';
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  font-feature-settings: 'liga';
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* The rail carries the severity, so the fill can stay pale enough to read
   14px Korean text against. */
#messages .alert-danger {
  background: #fdecea;
  color: #b23b30;
  box-shadow: inset 3px 0 0 #e2574c;
}

#messages .alert-danger::before {
  content: 'error_outline';
}

#messages .alert-success {
  background: var(--mp-accent-wash);
  color: #157a6e;
  box-shadow: inset 3px 0 0 var(--mp-accent-solid);
}

#messages .alert-success::before {
  content: 'check_circle';
}

/* Outranks the centred empty-state placeholder rule, which catches these
   paragraphs on every screen built on .mdl-layout__content. */
#messages .alert p {
  margin: 0 !important;
  padding: 0 !important;
  color: inherit;
  font-size: inherit;
  text-align: left !important;
}

#messages .alert p + p {
  margin-top: 5px !important;
}

#messages .alert .close {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 17px;
  line-height: 28px;
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.12s ease, background 0.12s ease;
}

#messages .alert .close:hover {
  background: rgba(0, 0, 0, 0.07);
  opacity: 1;
}