/* =========================================================
   복약안내문 설정 — 작업 레이아웃 (studio)

   Views/Shared/_MedicationStudio.cshtml 이 쓰는 껍데기입니다.
   그 화면들에서만 실립니다(레이아웃이 @@section Styles 로 싣습니다).

   일반 화면과 다른 점은 하나입니다 — **화면 높이를 다 쓴다.**
   출력 옵션 설정은 옵션을 켤 때마다 종이가 바뀌므로 미리보기가
   접혀 있으면 안 되고, 나머지 셋도 목록을 훑는 일이라 스크롤이
   본문 안에서 일어나는 편이 낫습니다.
   ========================================================= */

:root {
  /*
     52px 이었습니다. 단추·제목·갈래·계정 네 가지가 한 줄에 붙어 앉아 숨이
     막혔습니다. 60px 은 좁은 화면 헤더 높이(--pd-gnb-h)와 같은 값이라
     기준이 하나로 모입니다.

     여기서 더 올리지 않는 이유: 이 아래가 작업 칸이고, 출력 옵션 설정은
     A4 종이(210mm ≈ 794px)를 화면 높이에 맞춰 보여 줍니다. 윗줄이 두꺼워진
     만큼 종이가 작아집니다.
  */
  --pd-studio-bar-h: 60px;

  /* 헤더(1000)보다는 위, 오버레이(1100)·모달(1200)보다는 아래.
     스튜디오 안에서 뜨는 모달이 스튜디오에 덮이면 안 됩니다. */
  --pd-studio-z: calc(var(--pd-gnb-z) + 50);
}

/* ---------------------------------------------------------
   1. 일반 껍데기를 걷는다

   _Layout 을 부모로 쓰기 때문에 헤더·푸터·경고 띠가 함께 그려집니다.
   head 와 공용 스크립트를 그대로 쓰려고 일부러 그렇게 두었고, 보이는
   것만 여기서 감춥니다. 레이아웃 파일을 통째로 베끼면 <head> 340줄이
   두 벌이 됩니다.
   --------------------------------------------------------- */

body.pd-studio { overflow: hidden; }

body.pd-studio .pd-gnb,
body.pd-studio .pd-footer,
body.pd-studio .prior,
body.pd-studio .compatibility { display: none; }

/* main 은 자리만 차지하지 않게. 껍데기는 fixed 라 흐름 밖에 있습니다. */
body.pd-studio main { display: contents; }

/* ---------------------------------------------------------
   2. 껍데기
   --------------------------------------------------------- */

.pd-studio-shell {
  position: fixed;
  inset: 0;
  z-index: var(--pd-studio-z);
  display: grid;
  grid-template-rows: var(--pd-studio-bar-h) minmax(0, 1fr);
  background-color: var(--pd-surface-sunken);
}

/* ---- 윗줄 ---- */

/*
   세 칸 격자입니다 — 왼쪽 · 가운데(갈래) · 오른쪽(계정).

   flex 로 늘어놓고 margin-left: auto 를 쓰면 가운데 칸이 양옆 내용의 폭에
   끌려다닙니다. 1fr auto 1fr 이면 양옆이 무엇을 담든 가운데는 화면 한가운데
   입니다.
*/
.studio-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--pd-space-5);
  /*
     16px 이었습니다. 20px 은 본문 컨테이너(.container)의 좌우 여백이고,
     일반 화면 아래 진입 띠(layout.css 의 `.pd-settings-bar`)가 쓰는 값입니다.
     설정을 열 때 그 띠 자리에서 이 윗줄이 올라오는데, 안쪽 여백이 4px
     어긋나 있으면 제목과 갈래가 그 순간 옆으로 미끄러집니다.
  */
  padding-inline: var(--pd-space-5);
  background-color: var(--pd-surface-inverted);
  color: var(--pd-text-inverted);

  /*
     윗줄을 작업 칸 위로 올립니다.

     좁은 화면에서 갈래 목록은 윗줄 밖(작업 칸 위)으로 내려옵니다. 그런데 그
     패널과 출력 옵션의 옵션 칸(.opt-side)이 **둘 다 position: absolute ·
     z-index: auto** 라, 같은 쌓임 맥락에서 DOM 순서로 갈렸습니다. 옵션 칸이
     뒤에 있어서 패널이 그 아래로 깔려 잘려 보였습니다.

     .studio-work 에는 z-index 를 주지 않습니다. 주면 작업 칸이 쌓임 맥락이
     되어, 그 안에서 열리는 모달(z 1200)이 이 윗줄(z 2) 아래에 갇힙니다.
     윗줄만 올리면 z-index: auto 인 작업 칸 내용은 아래로, 모달은 위로
     제대로 갈립니다.
  */
  position: relative;
  z-index: 2;
}

.studio-bar__lead {
  display: flex;
  align-items: center;
  gap: var(--pd-space-4);
  min-width: 0;
}

/*
   어두운 윗줄 위에서 **채운 단추**입니다.

   속이 빈 테두리(흰색 22%)에 13px 글자였습니다. 어두운 바탕에서 그 테두리는
   거의 보이지 않아 글자 링크로 읽혔고, 이 화면에서 빠져나가는 유일한 자리인데
   가장 눈에 안 띄었습니다.

   accent(민트)를 쓰지 않습니다 — 그 색은 지금 어느 갈래에 있는지 알려 주는
   밑줄이 이미 쓰고 있어서, 단추까지 같은 색이면 둘 중 무엇이 「현재」인지
   흐려집니다. 밝은 표면에 어두운 글자로 뒤집는 쪽이 색을 새로 꺼내지 않고
   가장 확실히 단추로 보입니다.

   높이는 토큰 스케일을 씁니다(--pd-control-h 40px). 60px 윗줄 안에서
   위아래 10px 이 남습니다.
*/
.studio-bar__back {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-2);
  height: var(--pd-control-h);
  padding-inline: var(--pd-space-4);
  border: 1px solid var(--pd-surface);
  border-radius: var(--pd-radius-md);
  background-color: var(--pd-surface);
  color: var(--pd-text);
  font-size: 14px;
  font-weight: var(--pd-weight-semibold);
  text-decoration: none;
  transition:
    background-color var(--pd-dur) var(--pd-ease),
    border-color var(--pd-dur) var(--pd-ease);
}
.studio-bar__back:hover {
  background-color: var(--pd-surface-sunken);
  border-color: var(--pd-surface-sunken);
  color: var(--pd-text);
  text-decoration: none;
}
.studio-bar__back:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.studio-bar__back .pd-icon { width: var(--pd-icon-sm); height: var(--pd-icon-sm); }

/* 갈래 이름(14px semibold)과 확실히 갈라야 해서 한 급 키우고 아이콘을 답니다. */
.studio-bar__title {
  flex: 0 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-2);
  font-size: 17px;
  font-weight: var(--pd-weight-bold);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 아이콘 스케일은 --pd-icon-sm(16) / --pd-icon(20) / --pd-icon-lg(24) 입니다.
   가운데 값에 -md 가 붙지 않습니다 — 없는 이름을 쓰면 var() 가 무효가 되어
   .pd-icon 의 기본 16px 까지 auto 로 덮이고, SVG 가 기본 크기 300×150 으로
   커집니다. */
.studio-bar__title .pd-icon {
  flex: 0 0 auto;
  width: var(--pd-icon);
  height: var(--pd-icon);
  color: var(--pd-accent);
}

.studio-bar__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--pd-space-3);
}

/* ---- 갈래 (윗줄 안의 탭) ----
   2차 메뉴(.pd-subnav)와 같은 셈으로 그립니다 — 여백은 링크 안이 아니라
   사이에 두고, 강조선은 글자 너비입니다. 색만 어두운 바탕에 맞춥니다. */

/*
   넓은 화면에서 감싸는 상자는 없는 것처럼 둡니다. display: contents 면 자식
   (.studio-nav)이 곧 격자 칸이 되어, 아래 규칙과 좁은 화면 전환 전의 넓은 화면
   규칙이 그대로 성립합니다. 목록 단추는 display: none 이라 칸을 만들지 않습니다.
*/
.studio-tabs { display: contents; }
.studio-tabs__toggle { display: none; }

.studio-nav {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: var(--pd-space-8);
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  white-space: nowrap;
}

.studio-nav__link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: 14px;
  font-weight: var(--pd-weight-semibold);
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition:
    color var(--pd-dur) var(--pd-ease),
    border-color var(--pd-dur) var(--pd-ease);
}
.studio-nav__link:hover {
  color: var(--pd-text-inverted);
  text-decoration: none;
  border-bottom-color: rgba(255, 255, 255, 0.3);
}
.studio-nav__link:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }
.studio-nav__link.is-current {
  color: var(--pd-text-inverted);
  border-bottom-color: var(--pd-accent);
}

/* ---------------------------------------------------------
   3. 작업 칸
   --------------------------------------------------------- */

/* 기본 — 한 판. 스크롤이 이 안에서 일어납니다. */
.studio-work {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* 이관한 세 화면은 .container > .pd-root 를 그대로 들고 옵니다.
   일반 화면에서 쓰던 위아래 여백(60px)이 여기서는 과합니다. */
.studio-work > .container { padding-block: var(--pd-space-6); }

/* 두 칸 — 미리보기(왼쪽) + 옵션(오른쪽). 남은 높이를 다 씁니다. */
.studio-work--split { overflow: hidden; }

/* ---------------------------------------------------------
   4. 화면 제목 (.studio-pane-title)

   제목 줄(.subvisual)이 없는 레이아웃이라 각 칸이 스스로 이름을 답니다.
   윗줄의 갈래 탭이 이미 어디인지 말하지만, 탭은 14px 이고 늘 같은 자리라
   화면을 훑을 때 시작점이 되지 못합니다.
   --------------------------------------------------------- */

/*
   머리 줄 — 제목 · 안내 · 주요 동작이 한 줄에

   예전에는 제목 아래에 설명 문단이 두세 줄 있었습니다. 한 번 읽으면 되는
   글이 목록 위에서 늘 자리를 차지했고, 같은 내용이 도움말 모달에도 있어서
   두 번 적혀 있었습니다. 설명은 모달로 넘기고 이 줄만 남깁니다.
*/
.studio-pane-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pd-space-4);
  /* 주요 동작(48px lg 단추)이 있는 화면과 없는 화면의 머리 줄 높이가 달라
     갈래를 옮길 때 제목이 위아래로 널뛰었습니다. 단추 높이로 바닥을 깝니다. */
  min-height: 48px;
  /*
     아래 여백을 두지 않습니다.

     이 줄의 아래 여백은 margin 만이 아닙니다. min-height 48px 이 제목
     글자(24px, 줄높이 ~31px)보다 커서 align-items: center 가 위아래로
     8px 씩 남기는데, 그 아래쪽 8px 이 margin 에 더해집니다. 20px 을 두면
     제목 글자에서 내용까지 28px 이고 위쪽은 32px 이라, 아래가 넓어
     보였습니다.

     그리고 아래에 오는 것이 화면마다 다릅니다 — 목록·카드처럼 자기
     경계를 가진 것이 바로 오는 화면이 있고, 약사 어드바이스처럼 검색 칸이
     먼저 오는 화면이 있습니다. 여기서 일괄로 여백을 주면 자기 여백을 가진
     쪽에 두 번 얹힙니다. 그래서 이 줄은 여백을 갖지 않고, 필요한 화면이
     자기 첫 요소에 위 여백을 답니다
     (page-medication.css 의 .page-med-advice__search).
  */
  margin-bottom: 0;
}
.studio-pane-head__actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
}

/* 안내 단추는 목록 위 설명 문단 자리에 있을 때 아래 여백이 필요했지만,
   머리 줄에서는 그 여백이 세로 중심을 4px 위로 밀어 올립니다. */
.studio-pane-head .page-med-help { margin-bottom: 0; }

.studio-pane-title {
  display: flex;
  align-items: center;
  gap: var(--pd-space-2);
  font-size: 24px;
  font-weight: var(--pd-weight-bold);
  letter-spacing: -0.02em;
  color: var(--pd-text);
}
/* 아이콘은 제목 글자와 같은 색입니다. 민트로 두면 아이콘이 제목보다
   먼저 눈에 들어와 무엇이 제목인지 흐려집니다. */
.studio-pane-title .pd-icon {
  width: 22px;
  height: 22px;
  color: inherit;
}

/*
   제목 뒤에 붙는 상태 — 등록 / 수정 / 상세 / 기본 어드바이스 …

   같은 화면이 상태만 달라 여러 번 나옵니다. 예전 제목 줄(.subvisual)에서
   쓰던 규칙을 그대로 옮겨 왔습니다. 단계가 아니라 곁가지 정보이므로 제목
   옆에서 작게 둡니다.
*/
.studio-pane-title__state {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-2);
  font-size: 15px;
  font-weight: var(--pd-weight-medium);
  color: var(--pd-text-muted);
  letter-spacing: normal;
}
.studio-pane-title__state::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background-color: var(--pd-border-strong);
}

/* ---------------------------------------------------------
   5. 알림 토스트 (.studio-toast)

   예전에는 화면 맨 위를 가로지르는 노란 띠였습니다. 늘 켜져 있고 닫을
   수 없어서, 매일 보는 사람에게는 작업 칸을 한 줄 깎아먹는 것 말고는
   하는 일이 없었습니다. 왼쪽 아래로 내리고 하루 단위로 끌 수 있게 합니다.
   --------------------------------------------------------- */

.studio-toast {
  position: fixed;
  left: var(--pd-space-5);
  bottom: var(--pd-space-5);
  z-index: calc(var(--pd-studio-z) + 10);
  display: flex;
  align-items: flex-start;
  gap: var(--pd-space-3);
  max-width: min(420px, calc(100vw - var(--pd-space-10)));
  padding: var(--pd-space-4);
  border-radius: var(--pd-radius-lg);
  background-color: var(--pd-surface-inverted);
  color: var(--pd-text-inverted);
  box-shadow: var(--pd-shadow-lg);
}
.studio-toast[hidden] { display: none; }

.studio-toast__icon {
  flex: 0 0 auto;
  width: var(--pd-icon);
  height: var(--pd-icon);
  margin-top: 1px;
  color: var(--pd-gold-400);
}

.studio-toast__body { min-width: 0; }
.studio-toast__body p {
  font-size: 13.5px;
  line-height: 1.6;
}

.studio-toast__dismiss {
  margin-top: var(--pd-space-2);
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}
.studio-toast__dismiss:hover { color: var(--pd-text-inverted); }
.studio-toast__dismiss:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); border-radius: var(--pd-radius-xs); }

/* 옛 화면(option.css)이 들고 오는 상자. 스튜디오에서는 높이를 픽셀로
   박지 않고 남은 자리를 다 씁니다. */
.studio-work--split #PrintOption {
  height: 100%;
  min-height: 0;
  border: 0;
}

/* =========================================================
   좁은 화면 (≤960)

   ── 무엇이 잘못돼 있었나 ────────────────────────────────
   윗줄은 `1fr auto 1fr` 격자입니다. 가운데(갈래)가 auto 라 자기 내용만큼
   먼저 자리를 가져가고, 양옆 1fr 이 남는 것을 나눠 가집니다. 화면이 좁으면
   왼쪽 칸이 **폭 0** 까지 짜부라집니다. 그런데 마치기 단추는 flex: 0 0 auto
   라 줄어들지 않아서, 0 폭 칸을 넘어 갈래 위로 올라탔습니다.

   눈에만 겹친 것이 아닙니다. 겹친 자리를 누르면 나중에 그려진 갈래 링크가
   집어먹어서, **마치기를 눌렀는데 「출력 옵션 설정」으로 갔습니다.** 이 화면
   에서 빠져나가는 자리가 하나뿐인데 그것이 막힌 셈입니다.

   ── 무엇으로 바꿨나 ─────────────────────────────────────
   격자를 `auto minmax(0, 1fr) auto` 로 뒤집습니다. 마치기 단추와 계정이
   자기 폭을 먼저 지키고, 가운데가 남는 만큼만 씁니다. minmax(0, 1fr) 이지
   1fr 이 아닌 것은, 1fr 의 최소값이 auto(=내용 폭)라서 갈래 이름이 길면
   칸이 다시 밀려나기 때문입니다.

   그리고 갈래 넷을 한 줄에 늘어놓지 않습니다. 넷을 다 펴려면 386px 이
   필요한데 390px 화면에서 쓸 수 있는 자리는 그보다 좁아, 늘어놓으면
   마지막 「약국 맞춤 지면」이 잘리고 잘렸다는 표시도 나지 않았습니다.
   지금 갈래 이름이 적힌 목록 단추 하나로 접고, 누르면 아래로 펼칩니다.
   ========================================================= */

@media (max-width: 960px) {
  /*
     두 칸입니다 — 갈래 · 마치기 단추.

     제목을 감추면 왼쪽 칸에 남는 것이 없습니다. 빈 칸을 그대로 두면 격자가
     그 자리와 gap 을 계속 잡아, 좁은 화면에서 가장 아쉬운 가로 자리를
     아무것도 아닌 것에 내줍니다. 칸째 걷습니다.
  */
  .studio-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--pd-space-2);
    padding-inline: var(--pd-space-3);
  }
  .studio-bar__lead { display: none; }

  /* 좁은 화면에서는 감싸는 상자가 실제로 필요합니다 — 펼침 패널을 이 상자에
     붙여 내려야 합니다. position 은 display: contents 인 상자에는 듣지 않으므로
     여기서 block 으로 되돌립니다. */
  .studio-tabs {
    display: block;
    position: relative;
    min-width: 0;

    /* 가운데 칸은 남는 자리를 다 가져가므로, 960 쪽에서는 그대로 두면 목록
       단추가 700px 넘게 늘어나 컨트롤이 아니라 띠로 보입니다. 폭을 묶어
       단추 모양을 지키고, 남는 자리는 비워 둡니다. 좁은 화면에서는 칸 자체가
       이보다 좁아서 이 값이 걸리지 않습니다. */
    max-width: 280px;
  }

  .studio-tabs__toggle {
    display: flex;
    align-items: center;
    gap: var(--pd-space-2);
    width: 100%;

    /* 마치기 단추와 같은 높이입니다(--pd-control-h 40px). 나란히 놓인 두
       컨트롤의 높이가 어긋나면 윗줄이 정돈돼 보이지 않습니다. 32px 에서
       올린 것이라 손가락으로 누르기도 그만큼 쉬워집니다. */
    height: var(--pd-control-h);
    padding-inline: var(--pd-space-3);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--pd-radius-md);
    background-color: rgba(255, 255, 255, 0.10);
    color: var(--pd-text-inverted);
    font-size: 13px;
    font-weight: var(--pd-weight-semibold);
    cursor: pointer;
  }
  .studio-tabs__toggle:focus-visible { outline: none; box-shadow: var(--pd-focus-ring); }

  /* 이름이 길면 잘라 냅니다. 잘리는 것은 이름 한 줄뿐이고, 눌러서 펼치면
     전체 이름이 목록에 그대로 나옵니다. */
  .studio-tabs__current {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
  }
  .studio-tabs__toggle .pd-icon {
    flex: 0 0 auto;
    width: var(--pd-icon-sm);
    height: var(--pd-icon-sm);
    transition: transform var(--pd-dur) var(--pd-ease);
  }
  /* 삼각형만 돌립니다. 단추째 돌리면 초점 테두리가 같이 돕니다. */
  .studio-tabs.is-open .studio-tabs__toggle .pd-icon { transform: rotate(180deg); }

  /* 같은 <nav> 가 여기서는 아래로 내려오는 패널입니다. 넓은 화면의 가로 스크롤
     띠(overflow-x: auto)를 끄지 않으면 세로 목록이 다시 한 줄로 눕습니다. */
  .studio-nav {
    position: absolute;
    top: calc(100% + var(--pd-space-2));
    left: 0;
    right: 0;
    display: block;
    height: auto;
    overflow: visible;
    white-space: normal;
    padding: var(--pd-space-2);
    background-color: var(--pd-surface);
    border: 1px solid var(--pd-border);
    border-radius: var(--pd-radius-lg);
    box-shadow: var(--pd-shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
      opacity var(--pd-dur) var(--pd-ease),
      transform var(--pd-dur) var(--pd-ease),
      visibility var(--pd-dur) var(--pd-ease);
  }
  .studio-tabs.is-open .studio-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  /* 어두운 윗줄용 색을 밝은 패널용으로 되돌립니다. 강조는 밑줄이 아니라
     칠한 바탕입니다 — 세로 목록에서 밑줄은 항목 사이 구분선으로 읽힙니다. */
  .studio-nav__link {
    display: flex;
    align-items: center;
    height: auto;
    min-height: 44px;
    padding-inline: var(--pd-space-3);
    border-bottom: none;
    border-radius: var(--pd-radius-md);
    color: var(--pd-text);
    font-size: 15px;
  }
  .studio-nav__link:hover {
    border-bottom-color: transparent;
    background-color: var(--pd-surface-sunken);
    color: var(--pd-text);
  }
  .studio-nav__link.is-current {
    background-color: var(--pd-accent-subtle);
    color: var(--pd-accent-on-subtle);
    border-bottom-color: transparent;
  }

  /* 좁은 화면에서는 두 칸이 아니라 한 판입니다. 미리보기는 option.css 가
     단추로 띄웁니다. */
  .studio-work--split { overflow-y: auto; }
  .studio-work--split #PrintOption { height: auto; }

  /*
     본문 여백.

     두 칸 모드에는 여백 규칙이 없었습니다 — 여백은 .container 를 쓰는 일반
     화면에만 붙어 있고(위 .studio-work > .container), 이 화면 본문은
     .content-body 라서 해당되지 않았습니다. 그래서 내용이 윗줄에 딱 붙고
     좌우로도 화면 벽에 붙었습니다.

     좌우 20px 은 사이트 공통값입니다(common.css 의 .container, layout.css 의
     --pd-space-5). 위는 그보다 한 칸 좁게 둡니다 — 위를 넓게 잡으면 그만큼
     A4 종이 미리보기가 낮아지는 자리입니다.
  */
  .studio-work--split {
    padding-block-start: var(--pd-space-4);
    padding-inline: var(--pd-space-5);
  }

  /* ---- 경고 알림을 본문 맨 위로 ----

     떠 있는 상태로 두면 화면 맨 아래 고정된 저장 단추 띠(option.css 의
     .opt-submit, 높이 50px)를 덮습니다. 이 알림의 겹침 순서가 그보다 위여서
     저장을 누를 수 없었습니다. 흐름 안으로 들여 맨 위에 앉힙니다.

     접는 장치는 두지 않습니다. 한 줄짜리 문구라 접어도 줄어드는 자리가 얼마
     되지 않습니다. 스크롤을 따라 붙어 있게 하지도 않습니다 — 밀려 올라가면
     그것으로 자리를 비켜 줍니다. 없애는 길은 넓은 화면과 같은
     「오늘 하루 보지 않기」 하나입니다. */

  .studio-toast {
    position: static;
    z-index: auto;
    max-width: none;
    margin-block-end: var(--pd-space-4);
    padding: var(--pd-space-3);
    border-radius: var(--pd-radius-md);
    box-shadow: none;
  }
}