@font-face {
  font-family: "Sseujak Home Noto";
  src: url("/static/fonts/NotoSansKR-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.studio-app {
  --safe-top: max(env(safe-area-inset-top, 0px), var(--app-safe-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--app-safe-bottom, 0px));
  --bg: #f5f5f5;
  --panel: #fff;
  --panel2: #efefef;
  --text: #171416;
  --dim: #999;
  --line: #e2e2e2;
  --accent: #171416;
  --accent-soft: transparent;
  margin: 0;
  min-height: 100dvh;
  padding-bottom: calc(66px + var(--safe-bottom));
  overflow-x: hidden;
  background: #f5f5f5;
  color: #171416;
  font-family: var(--font, sans-serif);
}

.studio-shell {
  box-sizing: border-box;
  width: min(100%, 520px);
  min-height: calc(100dvh - 66px - env(safe-area-inset-bottom, 0px));
  margin: 0 auto;
  padding: calc(58px + env(safe-area-inset-top, 0px)) 46px 46px;
}

.studio-header {
  position: static;
  top: auto;
  z-index: auto;
  display: flex;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
}

.studio-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.studio-identity h1 {
  margin: 0 0 24px;
  font-size: 47px;
  font-weight: 950;
  line-height: .94;
  letter-spacing: -4px;
}

.studio-identity p {
  margin: 0;
  padding: 9px 18px 8px;
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.55px;
}

.studio-intro {
  padding: clamp(50px, 8.2vh, 76px) 0 clamp(48px, 7.7vh, 70px);
  text-align: center;
}

.studio-intro p {
  margin: 0;
  color: #777;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.48;
  letter-spacing: -1.2px;
}

.studio-intro strong {
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.studio-actions {
  display: grid;
  gap: clamp(25px, 3.8vh, 38px);
}

.studio-action {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 88px;
  padding: 0 20px;
  border: 0;
  border-radius: 28px;
  background: #f8f8f8;
  box-shadow: 0 19px 22px rgba(0, 0, 0, .14);
  color: #1d191c;
  font-family: inherit;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -1.3px;
  transition: transform .12s, box-shadow .12s, background .12s;
}

.studio-action svg {
  width: 36px;
  height: 36px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.studio-action::after { content: ""; width: 40px; }
.studio-action span { min-width: 0; text-align: center; }

.studio-action-coming {
  color: #929292;
}

.studio-action-coming svg {
  opacity: .72;
}

.studio-action:active {
  transform: translateY(2px) scale(.992);
  background: #fff;
  box-shadow: 0 12px 16px rgba(0, 0, 0, .13);
}

.studio-library {
  box-sizing: border-box;
  width: min(100%, 720px);
  min-height: calc(100dvh - 66px - env(safe-area-inset-bottom, 0px));
  margin: 0 auto;
  padding: calc(22px + env(safe-area-inset-top, 0px)) 18px 96px;
}
.studio-genres { box-sizing:border-box; width:min(100%,720px); min-height:calc(100dvh - 66px - env(safe-area-inset-bottom,0px)); margin:0 auto; padding:calc(22px + env(safe-area-inset-top,0px)) 18px 96px; }
.studio-genre-list { display:grid; gap:10px; }
.studio-genre-choice { display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:70px; padding:16px 18px; border:1px solid #e4e4e4; border-radius:18px; background:#fff; color:#171416; text-align:left; font:inherit; font-size:16px; font-weight:850; letter-spacing:-.45px; }
.studio-genre-choice::after { content:"›"; color:#999; font-size:25px; font-weight:500; }
.studio-genre-choice.selected { border-color:#111; background:#111; color:#fff; }
.studio-genre-choice.selected::after { color:#fff; }
.studio-library-top { display:grid; grid-template-columns:42px 1fr 42px; align-items:center; min-height:52px; }
.studio-library-top>b { text-align:center; font-size:17px; font-weight:800; }
.studio-home-button { width:40px; height:40px; padding:0; border:0; border-radius:12px; background:#efefef; color:#171416; }
.studio-home-button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.studio-library-copy { margin:15px 2px 18px; color:#777; font-size:14px; }
.studio-library-tabs { display:flex; gap:4px; overflow-x:auto; padding:3px; margin-bottom:18px; border-radius:14px; background:#ececec; scrollbar-width:none; }
.studio-library-tabs::-webkit-scrollbar { display:none; }
.studio-library-tabs button { min-height:44px; padding:8px; border:0; border-radius:11px; background:transparent; color:#777; font-weight:750; }
.studio-library-tabs button { flex:0 0 auto; min-width:70px; }
.studio-library-tabs button.active { background:#fff; color:#111; box-shadow:0 2px 8px rgba(0,0,0,.07); }
.studio-library-list { display:grid; gap:10px; }
.studio-library-card { position:relative; width:100%; min-height:86px; border-radius:18px; background:#fff; color:#171416; box-shadow:0 2px 10px rgba(0,0,0,.035); overflow:hidden; }
.studio-library-main { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; width:100%; min-height:86px; padding:15px 44px 15px 16px; border:0; background:transparent; color:inherit; text-align:left; }
.studio-library-main small { display:block; margin-bottom:4px; color:#777; font-size:11px; font-weight:750; }
.studio-library-main b { display:block; overflow:hidden; font-size:16px; text-overflow:ellipsis; white-space:nowrap; }
.studio-library-main em { display:block; margin-top:4px; color:#888; font-size:12px; font-style:normal; }
.studio-library-main>span:last-child { font-size:13px; font-weight:800; white-space:nowrap; }
.studio-library-delete { position:absolute; top:8px; right:8px; z-index:2; display:grid; place-items:center; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:transparent; color:#aaa; font-size:25px; line-height:1; }
.studio-library-delete:active { background:#f1f1ef; color:#171416; }
.studio-library-empty { padding:50px 20px; border-radius:20px; background:#fff; text-align:center; }
.studio-library-empty p { margin:7px 0 0; color:#888; font-size:13px; line-height:1.6; }

/* 웹소설 화면과 완전히 같은 공통 하단 메뉴 */
.studio-app .app-nav {
  position:fixed; left:50%; bottom:0; z-index:35; transform:translateX(-50%);
  width:100%; max-width:720px; height:calc(66px + env(safe-area-inset-bottom, 0px));
  display:grid; grid-template-columns:repeat(4,1fr); align-items:center;
  padding:5px 16px env(safe-area-inset-bottom, 0px); border:0; border-top:1px solid #e8e8e8;
  border-radius:0; background:rgba(247,247,247,.97); box-shadow:none;
}
.studio-app .app-nav button { min-width:0; min-height:54px; padding:5px 2px; border:0; border-radius:12px; background:transparent; color:#a0a0a0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; box-shadow:none; }
.studio-app .app-nav svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.studio-app .app-nav span { overflow:hidden; max-width:100%; font-size:10.5px; font-weight:750; line-height:1.15; white-space:nowrap; }
.studio-app .app-nav button.active { color:#111; background:transparent; }
.studio-app .app-nav button.active span { font-weight:900; }

.studio-coming-card { text-align: center; }
.studio-coming-card h2 { margin: 12px 0 8px; font-size: 22px; }
.studio-coming-card p { margin: 0 0 20px; color: #777; }
.studio-coming-card button {
  width: 100%;
  background: #111;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

@media (min-width: 700px) {
  .studio-app {
    width: 560px;
    margin: 0 auto;
    box-shadow: 0 0 55px rgba(0, 0, 0, .08);
  }

}

@media (max-width: 420px) {
  .studio-shell { padding: calc(43px + env(safe-area-inset-top, 0px)) 20px 34px; }
  .studio-identity h1 { margin-bottom: 20px; font-size: 40px; }
  .studio-identity p { padding: 8px 15px 7px; font-size: 12px; }
  .studio-intro { padding: clamp(43px, 7vh, 58px) 0 clamp(40px, 6.5vh, 54px); }
  .studio-intro p { font-size: 18px; }
  .studio-actions { gap: 29px; }
  .studio-action {
    min-height: 74px;
    padding: 0 13px;
    border-radius: 24px;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 9px;
    font-size: 20px;
  }
  .studio-action::after { width: 36px; }
  .studio-action svg { width: 31px; height: 31px; }
}

@media (max-width: 340px) {
  .studio-shell { padding-right:14px; padding-left:14px; }
  .studio-action { padding:0 10px; font-size:18px; }
  .studio-library,.studio-genres { padding-right:12px; padding-left:12px; }
  .studio-library-main { grid-template-columns:minmax(0,1fr); }
  .studio-library-main>span:last-child { white-space:normal; }
}

@media (max-height: 760px) and (max-width: 520px) {
  .studio-shell { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
  .studio-intro { padding: 28px 0 30px; }
  .studio-actions { gap: 17px; }
  .studio-action { min-height: 66px; }
}

/* Figma 325:16 — 01 쓰작 홈(스튜디오), 실제 프레임 375 × 812.
   전체 화면 이미지를 사용하지 않고 모든 요소를 실제 HTML로 구성한다. */
.studio-app.studio-home-view {
  --sseujak-nav-icon-bottom:5px;
  padding: 0;
  background: #f5f5f5;
}

.studio-home-view > .studio-nav,
.studio-genres-view > .studio-nav { display: none; }

.studio-home-view #studio-home.studio-shell {
  box-sizing: border-box;
  position: relative;
  width: min(100%, 375px);
  height: 100dvh;
  min-height: 667px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
  color: #0f0f0f;
  font-family: "Sseujak Home Noto", "Noto Sans KR", sans-serif;
}

/* Figma 노드 자체가 375×812 앱 프레임이다. 좌표에 별도 상단 보정을 중복 적용하지 않는다. */
.studio-home-view #studio-home > :not(.studio-home-bottom-nav),
.studio-genres-view #studio-genres > :not(.studio-genre-bottom-nav) {
  translate:none;
}

.studio-home-view .studio-home-menu {
  position: fixed;
  top: calc(34px + var(--safe-top));
  left: min(calc(100vw - 58px), calc(50% + 129.5px));
  z-index: 3;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.studio-home-view .studio-home-menu img {
  display: block;
  width: 24px;
  height: 24px;
}

.studio-home-view .studio-home-intro {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.studio-home-view .studio-home-person {
  position: absolute;
  top: calc(77px + var(--safe-top));
  left: calc(50% - 115.5px);
  display: block;
  width: 49px;
  height: 95px;
  transform: scaleX(-1);
}

.studio-home-view .studio-home-intro h1 {
  position: absolute;
  top: calc(76px + var(--safe-top));
  left: 50%;
  width: 135px;
  height: 66px;
  margin: 0;
  transform: translateX(-50%);
  color: #0f0f0f;
  font-size: 64px;
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
}

.studio-home-view .studio-home-intro p {
  position: absolute;
  top: calc(153px + var(--safe-top));
  left: calc(50% - 71.5px);
  width: 190px;
  margin: 0;
  color: #7a7a7a;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
  white-space: nowrap;
}

.studio-home-view .studio-home-choices {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
}

.studio-home-view .studio-home-choice {
  position: absolute;
  top: calc(260px + var(--safe-top));
  width: 124px;
  height: 252px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: #000;
  font-family: inherit;
}

.studio-home-view .studio-home-choice-fiction { left: calc(50% - 135.5px); }
.studio-home-view .studio-home-choice-prose { left: calc(50% + 8.5px); }

.studio-home-view .studio-home-choice:active {
  transform: none;
  background: transparent;
  box-shadow: none;
}

.studio-home-view .studio-home-choice:focus-visible {
  outline: 2px solid #0f0f0f;
  outline-offset: 3px;
}

.studio-home-view .studio-home-choice-card {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 124px;
  height: 165px;
  border: 1px solid #fd6f8d;
  border-radius: 12px;
  background: #fff;
}

.studio-home-view .studio-home-choice-card strong {
  position: absolute;
  top: 65px;
  left: 50%;
  width: 100px;
  transform: translateX(-50%);
  color: #0f0f0f;
  font-size: 28px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
}

.studio-home-view .studio-home-fiction-icon,
.studio-home-view .studio-home-prose-icon {
  position: absolute;
  top: 17px;
  left: 42px;
  display: block;
  width: 35px;
  height: 35px;
}

.studio-home-view .studio-home-prose-icon { left: 46px; }

.studio-home-view .studio-home-choice img {
  position: absolute;
  display: block;
  max-width: none;
  pointer-events: none;
}

.studio-home-view .studio-home-fiction-bg {
  top: -11.4px;
  left: -12.3px;
  width: 57.502px;
  height: 53.876px;
}

.studio-home-view .studio-home-fiction-mark {
  top: 6.08px;
  left: 8.34px;
  width: 34.853px;
  height: 29.917px;
}

.studio-home-view .studio-home-prose-bg {
  top: -17.33px;
  left: -17.34px;
  width: 64.585px;
  height: 65.36px;
}

.studio-home-view .studio-home-prose-mark {
  top: 6.95px;
  left: 7.7px;
  width: 37.254px;
  height: 36.795px;
}

.studio-home-view .studio-home-choice-description {
  position: absolute;
  top: 180px;
  display: block;
  color: #000;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-align: center;
  white-space: nowrap;
}

.studio-home-view .studio-home-choice-fiction .studio-home-choice-description {
  top: 181px;
  left: -2.5px;
  width: 132px;
  line-height: 20.5px;
}

.studio-home-view .studio-home-choice-prose .studio-home-choice-description {
  left: -8px;
  width: 140px;
}

.studio-home-view .studio-home-recent {
  border: 0;
  border-radius: 6px;
  background: #0f0f0f;
  box-shadow: none;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}

.studio-home-view .studio-home-bottom-nav {
  position: fixed;
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: 2;
  display: block;
  width: min(100%, 375px);
  max-width: 375px;
  height: calc(75px + var(--safe-bottom));
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  transform: translateX(-50%);
}

.studio-home-view .studio-home-bottom-nav button {
  position: absolute;
  top: auto;
  bottom: calc(31px + max(0px, var(--safe-bottom) - 33px));
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.studio-home-view .studio-home-bottom-nav button:nth-child(1) { left: calc(50% - 138.5px); }
.studio-home-view .studio-home-bottom-nav button:nth-child(2) { left: calc(50% - 21.5px); }
.studio-home-view .studio-home-bottom-nav button:nth-child(3) { left: calc(50% + 95.5px); }

.studio-home-view .studio-home-bottom-nav img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

/* Figma 330:143 / 332:78 — 375 × 812 실제 좌표 기반 장르 메인. */
.studio-genres-view {
  padding: 0;
  background: #f5f5f5;
}

.studio-genres-view:has(.studio-genres-fiction:not(.hidden)) { --sseujak-nav-icon-bottom:5px; }
.studio-genres-view:has(.studio-genres-prose:not(.hidden)) { --sseujak-nav-icon-bottom:5px; }

.studio-genres-view #studio-genres.studio-genres {
  box-sizing: border-box;
  position: relative;
  width: min(100%, 375px);
  height: 100dvh;
  min-height: 700px;
  margin: 0 auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .16);
  color: #0f0f0f;
  font-family: "Sseujak Home Noto", "Noto Sans KR", sans-serif;
}

.studio-genres-view .studio-genre-kicker {
  position: absolute;
  top: calc(31px + var(--safe-top));
  left: calc(50% - 157.5px);
  width: 220px;
  height: 22px;
  margin: 0;
  color: #7a7a7a;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.studio-genres-view .studio-genre-menu {
  position: fixed;
  top: calc(32px + var(--safe-top));
  z-index: 5;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.studio-genres-view .studio-genres-fiction .studio-genre-menu {
  left: min(calc(100vw - 56px), calc(50% + 131.5px));
}

.studio-genres-view .studio-genres-prose .studio-genre-menu {
  left: min(calc(100vw - 60px), calc(50% + 127.5px));
}

.studio-genres-view .studio-genre-menu img {
  display: block;
  width: 24px;
  height: 24px;
}

.studio-genres-view .studio-genre-heading {
  position: absolute;
  top: calc(88px + var(--safe-top));
  left: calc(50% + .5px);
  width: 222px;
  height: 52px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateX(-50%);
  color: #0f0f0f;
  text-align: center;
}

.studio-genres-view .studio-genre-heading span,
.studio-genres-view .studio-genre-heading strong {
  display: block;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  transform:translateY(-3px);
  white-space: nowrap;
}

.studio-genres-view .studio-genre-list {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
}

.studio-genres-view .studio-genre-choice {
  box-sizing: border-box;
  position: absolute;
  left: calc(50% - 167.5px);
  width: 335px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #e6e6e6;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  color: #0f0f0f;
  font-family: inherit;
  text-align: left;
}

.studio-genres-view .studio-genre-choice:nth-child(1) { top: calc(181px + var(--safe-top)); height: 108px; }
.studio-genres-view .studio-genre-choice:nth-child(2) { top: calc(288px + var(--safe-top)); height: 103px; }
.studio-genres-view .studio-genre-choice:nth-child(3) { top: calc(390px + var(--safe-top)); height: 103px; }
.studio-genres-view .studio-genre-choice:nth-child(4) { top: calc(492px + var(--safe-top)); height: 103px; }
.studio-genres-view .studio-genre-choice:nth-child(5) { top: calc(594px + var(--safe-top)); height: 99px; border-bottom: 1px solid #e6e6e6; }
.studio-genres-view .studio-genres-fiction .studio-genre-choice:nth-child(4) { border-bottom: 1px solid #e6e6e6; }

.studio-genres-view .studio-genre-choice b,
.studio-genres-view .studio-genre-choice small,
.studio-genres-view .studio-genre-choice img {
  position: absolute;
  display: block;
}

.studio-genres-view .studio-genre-choice b {
  top: 22px;
  left: 14px;
  width: 222px;
  height: 37px;
  margin: 0;
  color: #0f0f0f;
  font-size: 22px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.studio-genres-view .studio-genre-choice small {
  top: 58px;
  left: 15px;
  overflow: visible;
  margin: 0;
  color: #7a7a7a;
  font-size: 15px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.studio-genres-view .studio-genre-choice img {
  top: 28px;
  left: 302px;
  width: 17px;
  height: 17px;
}

.studio-genres-view .studio-genre-choice:first-child b { top: 32px; }
.studio-genres-view .studio-genre-choice:first-child small { top: 65px; }
.studio-genres-view .studio-genre-choice:first-child img { top: 34px; }
.studio-genres-view .studio-genre-choice:nth-child(5) b { top: 22px; }
.studio-genres-view .studio-genre-choice:nth-child(5) small { top: 54px; }
.studio-genres-view .studio-genre-choice:nth-child(5) img { top: 22px; }

.studio-genres-view .studio-genre-choice:active,
.studio-genres-view .studio-genre-choice.selected {
  transform: none;
  background: #fff;
  box-shadow: none;
}

.studio-genres-view .studio-genre-choice:focus-visible {
  outline: 2px solid #0f0f0f;
  outline-offset: -2px;
}

.studio-genres-view .studio-genre-choice::after { content: none; }

.studio-genres-view .studio-genre-bottom-nav {
  position: fixed;
  right: auto;
  bottom: 0;
  left: 50%;
  z-index: 4;
  display: block;
  width: min(100%, 375px);
  max-width: 375px;
  height: calc(75px + var(--safe-bottom));
  margin: 0;
  padding: 0;
  border: 0;
  background: #fff;
  transform: translateX(-50%);
}

.studio-genres-view .studio-genres-prose .studio-genre-bottom-nav { height: calc(73px + var(--safe-bottom)); }

.studio-genres-view .studio-genre-bottom-nav button {
  position: absolute;
  top: auto;
  bottom: calc(31px + max(0px, var(--safe-bottom) - 33px));
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.studio-genres-view .studio-genres-prose .studio-genre-bottom-nav button {
  bottom: calc(29px + max(0px, var(--safe-bottom) - 31px));
}

.studio-genres-view .studio-genre-bottom-nav button:nth-child(1) { left: calc(50% - 138.5px); }
.studio-genres-view .studio-genre-bottom-nav button:nth-child(2) { left: calc(50% - 21.5px); }
.studio-genres-view .studio-genre-bottom-nav button:nth-child(3) { left: calc(50% + 95.5px); }

.studio-genres-view .studio-genre-bottom-nav img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

@media (max-height: 699px) {
  .studio-genres-view #studio-genres.studio-genres { min-height: 700px; }
}

/* Figma 429:222 — library only; shared header and navigation stay unchanged. */
body.studio-library-view { margin:0; padding:0; height:100dvh; overflow:hidden; background:#fff; }
body.studio-library-view #studio-library { position:relative; width:min(100%,375px); height:100dvh; min-height:0; margin:0 auto; padding:0; overflow:hidden; background:#fff; color:#0f0f0f; font-family:"Noto Sans KR",sans-serif; }
#studio-library-search { position:absolute; top:calc(90px + var(--sseujak-safe-top)); left:28px; right:28px; display:flex; align-items:center; gap:12px; box-sizing:border-box; height:48px; margin:0; padding:0 14px 0 19px; border:1px solid #b7b7b7; border-radius:20px; background:#fff; }
#studio-library-search button { display:grid; place-items:center; flex:0 0 24px; width:24px; height:24px; min-height:24px; padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
#studio-library-search img { display:block; width:24px; height:24px; }
#studio-library-query { flex:1; min-width:0; width:100%; height:44px; margin:0; padding:0; border:0; border-radius:0; outline:none; background:transparent; color:#0f0f0f; box-shadow:none; font:400 14px/20px "Noto Sans KR",sans-serif; }
#studio-library-query::placeholder { color:#adadad; opacity:1; }
#studio-library-content { position:absolute; top:calc(178px + var(--sseujak-safe-top)); bottom:calc(var(--sseujak-nav-total-height) + var(--sseujak-ad-height)); left:20px; right:20px; overflow-y:auto; overflow-x:hidden; padding:0 0 20px; overscroll-behavior:contain; }
#studio-library .studio-library-list { display:block; }
#studio-library .studio-library-group + .studio-library-group { margin-top:39px; }
#studio-library .studio-library-group h2 { display:table; box-sizing:border-box; min-width:76px; height:19px; margin:0 0 13px 3px; padding:0 8px; border-radius:8px; background:#fd6f8d; color:#fff; font:400 12px/19px "Noto Sans KR",sans-serif; text-align:center; }
#studio-library .studio-library-books { border-top:1px solid #e6e6e6; }
#studio-library .studio-library-card { position:relative; box-sizing:border-box; width:100%; height:68px; min-height:68px; border:0; border-bottom:1px solid #e6e6e6; border-radius:0; background:#fff; box-shadow:none; overflow:hidden; }
#studio-library .studio-library-main { display:block; box-sizing:border-box; width:100%; height:67px; min-height:0; padding:14px 53px 10px 9px; margin:0; border:0; border-radius:0; background:transparent; color:#0f0f0f; text-align:left; box-shadow:none; }
#studio-library .studio-library-main b { display:block; margin:0; overflow:hidden; font:500 16px/19px "Noto Sans KR",sans-serif; white-space:nowrap; text-overflow:ellipsis; }
#studio-library .studio-library-main small { display:block; margin:7px 0 0 2px; color:#7a7a7a; font:400 11px/13px "Noto Sans KR",sans-serif; }
#studio-library .studio-library-delete { position:absolute; display:grid; place-items:center; top:8px; right:11px; width:34px; height:34px; min-height:0; padding:5px; border:0; border-radius:0; background:transparent; box-shadow:none; }
#studio-library .studio-library-delete img { display:block; width:24px; height:24px; }
#studio-library .studio-library-empty { padding:30px 12px; background:#fff; }
#studio-library-status { margin:0 0 16px; color:#7a7a7a; font:400 13px/20px "Noto Sans KR",sans-serif; }
#studio-library .studio-library-search-result { display:block; width:100%; margin:0; padding:14px 9px; border:0; border-bottom:1px solid #e6e6e6; border-radius:0; background:#fff; color:#0f0f0f; text-align:left; box-shadow:none; overflow-wrap:anywhere; }
#studio-library .studio-library-search-result small { display:block; color:#7a7a7a; font:400 11px/17px "Noto Sans KR",sans-serif; }
#studio-library .studio-library-search-result b { display:block; margin:4px 0; font:500 16px/22px "Noto Sans KR",sans-serif; }
#studio-library .studio-library-search-result p { margin:0; color:#7a7a7a; font:400 13px/20px "Noto Sans KR",sans-serif; }