/* [next]/internal/font/google/oswald_6361d549.module.css [app-client] (css) */
@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../media/efadc3f7fcf6ac94-s.2dw4wc11szodo.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../media/8e410338cab7e12e-s.2888ryxa0751p.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../media/7e93c0a52799e849-s.081af6y49e67w.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../media/037b6aa687f94b32-s.0evsli58wo2lo.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: Oswald;
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("../media/9a800f173b8d9e8f-s.p.3nglv5iys3s0a.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Oswald Fallback;
  src: local(Arial);
  ascent-override: 146.51%;
  descent-override: 35.49%;
  line-gap-override: 0.0%;
  size-adjust: 81.43%;
}

.oswald_6361d549-module__L27MvW__className {
  font-family: Oswald, Oswald Fallback;
  font-style: normal;
}

.oswald_6361d549-module__L27MvW__variable {
  --font-oswald: "Oswald", "Oswald Fallback";
}

/* [project]/apps/web/src/styles/design/common.css [app-client] (css) */
*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans KR, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

img, picture, video, canvas {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
  background: none;
  border: none;
  outline: none;
}

svg {
  vertical-align: middle;
  width: 17px;
}

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

main {
  min-height: calc(94vh - var(--header-height) - 65px);
}

.m5 {
  margin: 5px;
}

.m10 {
  margin: 10px;
}

.m15 {
  margin: 15px;
}

.m20 {
  margin: 20px;
}

.m25 {
  margin: 25px;
}

.m30 {
  margin: 30px;
}

.mx5 {
  margin-left: 5px;
  margin-right: 5px;
}

.mx10 {
  margin-left: 10px;
  margin-right: 10px;
}

.mx15 {
  margin-left: 15px;
  margin-right: 15px;
}

.mx20 {
  margin-left: 20px;
  margin-right: 20px;
}

.mx25 {
  margin-left: 25px;
  margin-right: 25px;
}

.mx30 {
  margin-left: 30px;
  margin-right: 30px;
}

.my5 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.my10 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.my15 {
  margin-top: 15px;
  margin-bottom: 15px;
}

.my20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.my25 {
  margin-top: 25px;
  margin-bottom: 25px;
}

.my30 {
  margin-top: 30px;
  margin-bottom: 30px;
}

.mt5 {
  margin-top: 5px;
}

.mt10 {
  margin-top: 10px;
}

.mt15 {
  margin-top: 15px;
}

.mt20 {
  margin-top: 20px;
}

.mt25 {
  margin-top: 25px;
}

.mt30 {
  margin-top: 30px;
}

.mt70 {
  margin-top: 70px;
}

.mb5 {
  margin-bottom: 5px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb15 {
  margin-bottom: 15px;
}

.mb20 {
  margin-bottom: 20px;
}

.mb25 {
  margin-bottom: 25px;
}

.mb30 {
  margin-bottom: 30px;
}

.mb40 {
  margin-bottom: 40px;
}

.mb45 {
  margin-bottom: 45px;
}

.mb50 {
  margin-bottom: 50px;
}

.ml5 {
  margin-left: 5px;
}

.ml10 {
  margin-left: 10px;
}

.ml15 {
  margin-left: 15px;
}

.ml20 {
  margin-left: 20px;
}

.ml25 {
  margin-left: 25px;
}

.ml30 {
  margin-left: 30px;
}

.mr0 {
  margin-right: 0 !important;
}

.mr5 {
  margin-right: 5px;
}

.mr10 {
  margin-right: 10px;
}

.mr15 {
  margin-right: 15px;
}

.mr20 {
  margin-right: 20px;
}

.mr25 {
  margin-right: 25px;
}

.mr30 {
  margin-right: 30px;
}

.p5 {
  padding: 5px;
}

.p10 {
  padding: 10px;
}

.p15 {
  padding: 15px;
}

.p20 {
  padding: 20px;
}

.p25 {
  padding: 25px;
}

.p30 {
  padding: 30px;
}

.px5 {
  padding-left: 5px;
  padding-right: 5px;
}

.px10 {
  padding-left: 10px;
  padding-right: 10px;
}

.px15 {
  padding-left: 15px;
  padding-right: 15px;
}

.px20 {
  padding-left: 20px;
  padding-right: 20px;
}

.px25 {
  padding-left: 25px;
  padding-right: 25px;
}

.px30 {
  padding-left: 30px;
  padding-right: 30px;
}

.py5 {
  padding-top: 5px;
  padding-bottom: 5px;
}

.py10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.py15 {
  padding-top: 15px;
  padding-bottom: 15px;
}

.py20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.py25 {
  padding-top: 25px;
  padding-bottom: 25px;
}

.py30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.py50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.py70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.pt5 {
  padding-top: 5px;
}

.pt10 {
  padding-top: 10px;
}

.pt15 {
  padding-top: 15px;
}

.pt20 {
  padding-top: 20px;
}

.pt25 {
  padding-top: 25px;
}

.pt30 {
  padding-top: 30px;
}

.pb5 {
  padding-bottom: 5px;
}

.pb10 {
  padding-bottom: 10px;
}

.pb15 {
  padding-bottom: 15px;
}

.pb20 {
  padding-bottom: 20px;
}

.pb25 {
  padding-bottom: 25px;
}

.pb30 {
  padding-bottom: 30px;
}

.pl5 {
  padding-left: 5px;
}

.pl10 {
  padding-left: 10px;
}

.pl15 {
  padding-left: 15px;
}

.pl20 {
  padding-left: 20px;
}

.pl25 {
  padding-left: 25px;
}

.pl30 {
  padding-left: 30px;
}

.pr5 {
  padding-right: 5px;
}

.pr10 {
  padding-right: 10px;
}

.pr15 {
  padding-right: 15px;
}

.pr20 {
  padding-right: 20px;
}

.pr25 {
  padding-right: 25px;
}

.pr30 {
  padding-right: 30px;
}

.gap5 {
  gap: 5px;
}

.gap10 {
  gap: 10px;
}

.gap15 {
  gap: 15px;
}

.gap20 {
  gap: 20px;
}

.gap25 {
  gap: 25px;
}

.gap30 {
  gap: 30px;
}

.fs10 {
  font-size: 10px;
}

.fs12 {
  font-size: 12px;
}

.fs14 {
  font-size: 14px;
}

.fs16 {
  font-size: 16px;
}

.fs18 {
  font-size: 18px;
}

.fs20 {
  font-size: 20px;
}

.fs24 {
  font-size: 24px;
}

.fs30 {
  font-size: 30px;
}

.w10 {
  width: 10%;
}

.w20 {
  width: 20%;
}

.w30 {
  width: 30%;
}

.w40 {
  width: 40%;
}

.w50 {
  width: 50%;
}

.w60 {
  width: 60%;
}

.w70 {
  width: 70%;
}

.w80 {
  width: 80%;
}

.w90 {
  width: 90%;
}

.w100 {
  width: 100%;
}

.wp50 {
  width: 50px;
}

.wp100 {
  width: 100px;
}

.wp150 {
  width: 150px;
}

.wp200 {
  width: 200px;
}

.wp250 {
  width: 250px;
}

.wp300 {
  width: 300px;
}

.h10 {
  height: 10%;
}

.h20 {
  height: 20%;
}

.h30 {
  height: 30%;
}

.h40 {
  height: 40%;
}

.h50 {
  height: 50%;
}

.h60 {
  height: 60%;
}

.h70 {
  height: 70%;
}

.h80 {
  height: 80%;
}

.h90 {
  height: 90%;
}

.h100 {
  height: 100%;
}

.hp50 {
  height: 50px;
}

.hp100 {
  height: 100px;
}

.hp150 {
  height: 150px;
}

.hp200 {
  height: 200px;
}

.hp250 {
  height: 250px;
}

.hp300 {
  height: 300px;
}

.d-block {
  display: block;
}

.d-inline {
  display: inline;
}

.d-inline-block {
  display: inline-block;
}

.d-flex {
  display: flex;
}

.d-none {
  display: none;
}

.d-ruby {
  display: ruby;
}

.jc-start {
  justify-content: flex-start;
}

.jc-center {
  justify-content: center;
}

.jc-end {
  justify-content: flex-end;
}

.jc-between {
  justify-content: space-between;
}

.jc-around {
  justify-content: space-around;
}

.ai-start {
  align-items: flex-start;
}

.ai-center {
  align-items: center;
}

.ai-end {
  align-items: flex-end;
}

.fd-row {
  flex-direction: row;
}

.fd-col {
  flex-direction: column;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-white {
  color: #fff;
}

.text-black {
  color: #000;
}

.text-gray {
  color: #6b7280;
}

.fw-light {
  font-weight: 300;
}

.fw-normal {
  font-weight: 500;
}

.fw-bold {
  font-weight: 700;
}

.bg-white {
  background-color: #fff;
}

.bg-black {
  background-color: #000;
}

.bg-gray {
  background-color: #f5f5f5;
}

.br5 {
  border-radius: 5px;
}

.br10 {
  border-radius: 10px;
}

.br15 {
  border-radius: 15px;
}

.br20 {
  border-radius: 20px;
}

.br30 {
  border-radius: 30px;
}

.of-hidden {
  overflow: hidden;
}

.of-auto {
  overflow: auto;
}

.of-scroll {
  overflow: scroll;
}

.pos-relative {
  position: relative;
}

.pos-absolute {
  position: absolute;
}

.pos-fixed {
  position: fixed;
}

.shadow-sm {
  box-shadow: 0 2px 5px #0000001a;
}

.shadow-md {
  box-shadow: 0 4px 10px #00000026;
}

.shadow-lg {
  box-shadow: 0 8px 20px #0003;
}

.z0 {
  z-index: 0;
}

.z10 {
  z-index: 10;
}

.z20 {
  z-index: 20;
}

.z30 {
  z-index: 30;
}

.z40 {
  z-index: 40;
}

.z50 {
  z-index: 50;
}

.op0 {
  opacity: 0;
}

.op25 {
  opacity: .25;
}

.op50 {
  opacity: .5;
}

.op75 {
  opacity: .75;
}

.op100 {
  opacity: 1;
}

.blur-sm {
  filter: blur(2px);
}

.blur-md {
  filter: blur(5px);
}

.blur-lg {
  filter: blur(10px);
}

.backdrop-blur-sm {
  -webkit-backdrop-filter: blur(5px);
}

.backdrop-blur-md {
  -webkit-backdrop-filter: blur(10px);
}

.transition {
  transition: all .3s;
}

.transition-fast {
  transition: all .15s;
}

.transition-slow {
  transition: all .5s;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-default {
  cursor: default;
}

.hover\:bg-red:hover {
  background-color: #ef4444;
}

.hover\:bg-blue:hover {
  background-color: #3b82f6;
}

.hover\:bg-green:hover {
  background-color: #22c55e;
}

.hover\:text-white:hover {
  color: #fff;
}

.hover\:text-black:hover {
  color: #000;
}

.hover\:shadow-md:hover {
  box-shadow: 0 4px 10px #00000026;
}

.row {
  flex-wrap: wrap;
  display: flex;
}

.grid {
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  display: grid;
}

.span-1 {
  border-radius: 5px;
  grid-column: span 1;
}

.span-2 {
  border-radius: 5px;
  grid-column: span 2;
}

.span-3 {
  border-radius: 5px;
  grid-column: span 3;
}

.span-4 {
  border-radius: 5px;
  grid-column: span 4;
}

.span-6 {
  border-radius: 5px;
  grid-column: span 6;
}

.span-8 {
  border-radius: 5px;
  grid-column: span 8;
}

.span-12 {
  border-radius: 5px;
  grid-column: span 12;
}

@media (min-width: 640px) {
  .sm\:d-flex {
    display: flex;
  }

  .sm\:d-none {
    display: none;
  }

  .sm\:w50 {
    width: 50%;
  }

  .sm\:text-center {
    text-align: center;
  }
}

@media (min-width: 768px) {
  .md\:d-flex {
    display: flex;
  }

  .md\:d-none {
    display: none;
  }

  .md\:w50 {
    width: 50%;
  }

  .md\:text-center {
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .lg\:d-flex {
    display: flex;
  }

  .lg\:d-none {
    display: none;
  }

  .lg\:w50 {
    width: 50%;
  }

  .lg\:text-center {
    text-align: center;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: .3s ease-in-out fade-in;
}

.slide-up {
  animation: .3s ease-out slide-up;
}

.slide-down {
  animation: .3s ease-out slide-down;
}

@keyframes skeleton {
  0% {
    background-color: #e5e7eb;
  }

  50% {
    background-color: #f3f4f6;
  }

  100% {
    background-color: #e5e7eb;
  }
}

.skeleton {
  border-radius: 5px;
  animation: 1.5s ease-in-out infinite skeleton;
}

.card {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 10px #0000001a;
}

.card-header {
  margin-bottom: 10px;
  font-weight: 700;
}

.card-body {
  color: #555;
  font-size: 14px;
}

.input {
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  padding: 10px;
}

.input:focus {
  border-color: #3b82f6;
  outline: none;
}

@media (max-width: 768px) {
  .wrap {
    padding: 15px;
  }

  header .wrap {
    padding: 5px 15px;
  }

  .grid {
    gap: 8px;
  }

  .span-1, .span-2, .span-3, .span-4, .span-6, .span-8 {
    grid-column: span 12;
  }

  .fs24 {
    font-size: 20px;
  }

  .fs30 {
    font-size: 24px;
  }

  .md\:d-flex {
    display: flex;
  }

  .md\:d-none {
    display: none;
  }

  .md\:w50 {
    width: 50%;
  }

  .md\:text-center {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }

  .span-3, .span-4, .span-6, .span-8, .span-12 {
    grid-column: span 4;
  }

  .d-flex {
    flex-wrap: wrap;
  }

  .fs20 {
    font-size: 16px;
  }

  .fs18 {
    font-size: 15px;
  }

  .sm\:d-flex {
    display: flex;
  }

  .sm\:d-none {
    display: none;
  }

  .sm\:w50 {
    width: 50%;
  }

  .sm\:text-center {
    text-align: center;
  }
}

@media (max-width: 320px) {
  .wrap {
    padding: 0 12px;
  }

  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .span-1, .span-2, .span-3, .span-4, .span-6, .span-8, .span-12 {
    grid-column: span 2;
  }

  .fs16 {
    font-size: 14px;
  }

  .fs18 {
    font-size: 15px;
  }

  .fs20 {
    font-size: 16px;
  }

  .fs24 {
    font-size: 18px;
  }

  .fs30 {
    font-size: 20px;
  }

  .p20 {
    padding: 12px;
  }

  .p30 {
    padding: 16px;
  }

  .px20 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .py30 {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .gap20 {
    gap: 12px;
  }

  .gap30 {
    gap: 16px;
  }
}

/* [project]/apps/web/src/styles/design/style.css [app-client] (css) */
:root {
  --bg: #fff;
  --bg-r: 255,255,255;
  --bg2: #fafbff;
  --bg3: #eff0f2;
  --bg-sub: #f9f9fa;
  --bg-muted: #eff0f2;
  --surface: #fff;
  --border: #b7b7b7;
  --border2: #939393;
  --text1: #343a40;
  --text2: #717171;
  --text3: #adb5bd;
  --accent: #2caaf8;
  --accent-r: 44,170,248;
  --accent-s: #eff0f2;
  --shadow: 0 2px 8px #00000014;
  --header-height: 56px;
}

[data-theme="dark"] {
  --bg: #1e2230;
  --bg-r: 30,34,48;
  --bg2: #262d3f;
  --bg3: #2e3652;
  --bg-sub: #262d3f;
  --bg-muted: #2e3652;
  --surface: #222b3c;
  --border: #374161;
  --border2: #4a5578;
  --text1: #e9ecef;
  --text2: #a6b0cf;
  --text3: #6c7a9c;
  --accent: #df0e46;
  --accent-r: 123,143,245;
  --accent-s: #7b8ff526;
  --shadow: 0 2px 8px #0006;
}

.bg-gray {
  color: #74788d;
  background: #f8f8fb;
  border-radius: 6px;
}

.bg-blue {
  color: #556ee6;
  background: #e8ebfa;
  border-radius: 6px;
}

.bg-green {
  color: #34c38f;
  background: #e2f6f0;
  border-radius: 6px;
}

.bg-purple {
  color: #f46a6a;
  background: #fde8e8;
  border-radius: 6px;
}

.bg-yellow {
  color: #f1b44c;
  background: #fef9e7;
  border-radius: 6px;
}

[data-theme="dark"] .bg-gray {
  color: #a6b0cf;
  background: #2e3652;
}

[data-theme="dark"] .bg-blue {
  color: #7b8ff5;
  background: #2a3276;
}

[data-theme="dark"] .bg-green {
  color: #4dcfa3;
  background: #1a4035;
}

[data-theme="dark"] .bg-purple {
  color: #f78080;
  background: #4a2020;
}

[data-theme="dark"] .bg-yellow {
  color: #f5c96a;
  background: #3d2e0a;
}

*, :before, :after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text2);
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans KR, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

img, picture, video, canvas {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

button, input, textarea, select {
  font: inherit;
  background: none;
  border: none;
  outline: none;
}

svg {
  vertical-align: middle;
  width: 17px;
}

.sec {
  border-bottom: 1px solid var(--border);
  transition: border-color .3s;
}

.sec:last-child {
  border-bottom: none;
}

.sec-lbl {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
  font-size: .7rem;
  font-weight: 700;
  display: block;
}

.sec-ttl {
  letter-spacing: -.02em;
  color: var(--text1);
  margin-bottom: 8px;
  font-size: 1.5rem;
  font-weight: 700;
  transition: color .3s;
}

.sec-dsc {
  color: var(--text2);
  margin-bottom: 32px;
  font-size: .9rem;
  line-height: 1.7;
  transition: color .3s;
}

.sub-ttl {
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text3);
  margin: 32px 0 12px;
  font-size: .7rem;
  font-weight: 700;
  transition: color .3s;
}

.filter {
  filter: hue-rotate(45deg);
}

.nowrap {
  text-wrap-mode: nowrap;
}

.header {
  z-index: 200;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: background .3s, border-color .3s;
  position: sticky;
  top: 0;
}

.header-in {
  height: var(--header-height);
}

.header-r {
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  display: flex;
}

.header-btn {
  vertical-align: bottom;
  color: var(--text2);
  white-space: nowrap;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  font-size: .8125rem;
  transition: color .15s, background .15s;
  display: flex;
  position: relative;
}

.header-btn:hover {
  color: var(--text1);
  background: var(--bg2);
}

.header-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  width: 17px;
  height: 17px;
}

.cart-dot {
  background: var(--accent);
  border: 2px solid var(--surface);
  border-radius: 50%;
  width: 7px;
  height: 7px;
  transition: background .3s, border-color .3s;
  position: absolute;
  top: 5px;
  right: 5px;
}

.sep {
  background: var(--border);
  flex-shrink: 0;
  width: 1px;
  height: 14px;
  margin: 0 6px;
  transition: background .3s;
}

.logo {
  color: var(--text1);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 10px;
  font-family: oswald;
  font-size: .9375rem;
  transition: color .3s;
}

.nav {
  height: var(--header-height);
  flex-shrink: 0;
  align-items: center;
  display: flex;
}

.nav-item {
  height: var(--header-height);
  align-items: center;
  display: flex;
  position: relative;
}

.nav-link {
  height: var(--header-height);
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  gap: 3px;
  padding: 0 13px;
  font-size: .855rem;
  font-weight: 500;
  transition: color .15s;
  display: flex;
}

.nav-link:hover {
  color: var(--text1);
}

.nav-link svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  transition: transform .15s;
}

.nav-item:hover > .nav-link svg {
  transform: rotate(180deg);
}

.dropdown {
  top: calc(var(--header-height) + 1px);
  background: var(--surface);
  border: 1px solid var(--border);
  width: max-content;
  box-shadow: var(--shadow);
  z-index: 300;
  border-radius: 12px;
  padding: 6px;
  transition: background .3s, border-color .3s;
  display: none;
  position: absolute;
  left: 0;
}

.nav-item:hover > .dropdown {
  display: block;
}

.dropdown a {
  color: var(--text2);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: .855rem;
  transition: color .15s, background .15s;
  display: block;
}

.dropdown a:hover {
  color: var(--text1);
  background: var(--bg2);
}

.web_menu {
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 8px;
  transition: background .15s;
  display: flex;
}

.web_menu:hover {
  background: var(--bg2);
}

.web_menu span {
  background: var(--text2);
  border-radius: 2px;
  width: 18px;
  height: 2px;
  transition: transform .3s, opacity .3s;
  display: block;
}

.web_menu.on span:first-child {
  transform: translateY(7px)rotate(45deg);
}

.web_menu.on span:nth-child(2) {
  opacity: 0;
}

.web_menu.on span:nth-child(3) {
  transform: translateY(-7px)rotate(-45deg);
}

.sitemap {
  background: var(--accent);
  border-bottom: 1px solid var(--border);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  height: 100%;
  transition: transform .2s, opacity .2s;
  position: fixed;
  top: 96px;
  left: 0;
  right: 0;
  transform: translateY(-8px);
  box-shadow: 0 8px 24px #00000014;
}

.sitemap.on {
  opacity: 1;
  pointer-events: auto;
  display: block;
  transform: translateY(0);
}

.sitemap-inner {
  grid-template-columns: repeat(4, 1fr);
  padding-top: 50px;
  display: grid;
}

.sitemap-col {
  flex: 1;
  padding: 0 0 20px;
}

.sitemap-col:last-child {
  border-right: none;
}

.sitemap-ttl {
  min-width: 130px;
  color: var(--surface);
  border-bottom: 1px solid #fff;
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 500;
  display: inline-block;
}

.sitemap-col a.sitemap-con {
  color: var(--surface);
  padding: 5px 0;
  font-size: .875rem;
  transition: color .15s;
  display: block;
}

.sitemap-col a:hover {
  color: var(--accent);
}

.srch {
  margin-left: 14px;
  position: relative;
}

.srch-btn {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  width: 230px;
  height: 43px;
  padding: 0 14px;
  transition: background .3s, border-color .15s;
  display: flex;
}

.srch-btn:hover {
  border-color: var(--border2);
}

.srch-btn span {
  color: var(--text3);
  font-size: .8125rem;
}

.srch-btn svg {
  fill: none;
  stroke: var(--text3);
  stroke-width: 2px;
  flex-shrink: 0;
}

.srch-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  width: 300px;
  box-shadow: var(--shadow);
  z-index: 300;
  border-radius: 14px;
  padding: 10px;
  transition: background .3s, border-color .3s;
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
}

.srch-panel.on {
  display: block;
}

.srch-row {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 7px 12px;
  transition: background .3s;
  display: flex;
}

.srch-row:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r),.1);
}

.srch-row svg {
  fill: none;
  stroke: var(--text3);
  stroke-width: 2px;
  flex-shrink: 0;
}

.srch-row input {
  color: var(--text1);
  background: none;
  border: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  font-size: .855rem;
}

.srch-row input::placeholder {
  color: var(--text3);
}

.srch-tag {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.stag {
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: .8125rem;
  transition: color .15s, background .15s, border-color .15s;
}

.stag:hover {
  color: var(--accent);
  background: var(--accent-s);
  border-color: rgba(var(--accent-r),.3);
}

.tgl-wrap {
  vertical-align: middle;
  align-items: center;
  gap: 6px;
  margin: 0 2px;
  display: flex;
}

.tgl-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2px;
  vertical-align: baseline;
  width: 13px;
  height: 13px;
}

.tgl-icon.sun svg {
  stroke: #f59e0b;
}

.tgl-icon.moon svg {
  stroke: var(--text3);
}

.tgl {
  cursor: pointer;
  background: #e2e8f0;
  border-radius: 999px;
  flex-shrink: 0;
  width: 42px;
  height: 23px;
  transition: background .3s;
  display: block;
  position: relative;
}

[data-theme="dark"] .tgl {
  background: var(--accent);
}

.tgl:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 19px;
  height: 19px;
  transition: transform .25s;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 3px #0003;
}

[data-theme="dark"] .tgl:after {
  transform: translateX(19px);
}

.mobile_menu {
  border-radius: 6px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  transition: background .15s;
  display: none;
}

.mobile_menu:hover {
  background: var(--bg2);
}

.mobile_menu span {
  background: var(--text2);
  border-radius: 2px;
  width: 18px;
  height: 2px;
  transition: transform .2s, opacity .2s;
  display: block;
}

.mobile_menu.on span:first-child {
  transform: translateY(7px)rotate(45deg);
}

.mobile_menu.on span:nth-child(2) {
  opacity: 0;
}

.mobile_menu.on span:nth-child(3) {
  transform: translateY(-7px)rotate(-45deg);
}

.drawer {
  inset: var(--header-height) 0 0 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 199;
  flex-direction: column;
  padding: 12px 16px;
  transition: transform .25s;
  display: none;
  position: fixed;
  overflow-y: auto;
  transform: translateX(100%);
}

.drawer.on {
  transform: translateX(0);
}

.mobile-link {
  color: var(--text2);
  border-radius: 6px;
  padding: 11px 12px;
  font-size: .9375rem;
  font-weight: 500;
  transition: color .15s, background .15s;
  display: block;
}

.mobile-link:hover {
  color: var(--text1);
  background: var(--bg2);
}

.mobile-sub .mobile-link {
  padding-left: 24px;
  font-size: .855rem;
  font-weight: 400;
}

.mdiv {
  background: var(--border);
  height: 1px;
  margin: 6px 0;
}

.footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 40px 0 20px;
}

.footer-inner {
  grid-template-columns: .9fr auto;
  align-items: start;
  gap: 40px;
  display: grid;
}

.footer-left {
  flex-direction: column;
  gap: 14px;
  display: flex;
}

.footer-logo {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.footer-logo-name {
  color: var(--text1);
  font-size: 1rem;
  font-weight: 700;
}

.footer-logo-url {
  color: var(--text3);
  font-size: .75rem;
}

.footer-info {
  flex-wrap: wrap;
  gap: 4px 16px;
  display: flex;
}

.footer-info-item {
  color: var(--text2);
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  display: flex;
}

.footer-info-item span {
  color: var(--text3);
}

.footer-info-item strong {
  color: var(--text1);
  font-weight: 400;
}

.footer-links {
  align-items: center;
  gap: 4px;
  display: flex;
}

.footer-link {
  color: var(--text3);
  font-size: .8rem;
  text-decoration: none;
  transition: color .15s;
}

.footer-link:hover {
  color: var(--accent);
}

.footer-link-sep {
  color: var(--text2);
  font-size: .75rem;
}

.footer-link.bold {
  color: var(--text2);
  font-weight: 600;
}

.footer-link.bold:hover {
  color: var(--accent);
}

.footer-badges {
  align-items: center;
  gap: 8px;
  display: flex;
}

.footer-badge {
  border: 1px solid var(--border);
  cursor: default;
  border-radius: 4px;
  align-items: center;
  padding: 4px 8px 4px 0;
  font-size: .8rem;
  transition: border-color .15s;
  display: inline-flex;
}

.footer-badge img {
  display: block;
}

.footer-cs {
  text-align: right;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-width: 200px;
  padding: 16px 20px;
}

.footer-cs-label {
  font-size: .8rem;
  font-weight: 500;
}

.footer-cs-num {
  letter-spacing: -1px;
  color: var(--accent);
  margin-bottom: 7px;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}

.footer-cs-time {
  font-size: .75rem;
  line-height: 1.8;
}

.footer-cs svg {
  width: 20px;
  color: var(--text3);
  opacity: .4;
  margin: 10px;
}

.footer-copy {
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--text3);
  margin-top: 20px;
  padding-top: 16px;
  font-size: .8rem;
}

@media (max-width: 768px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer-cs {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .footer-info-item {
    font-size: .75rem;
  }
}

.layer-backdrop {
  z-index: 900;
  background: #000000a6;
  display: none;
  position: fixed;
  inset: 0;
}

.layer-backdrop.open {
  display: block;
}

.layer-popup {
  background: var(--surface);
  border: 1px solid var(--border);
  z-index: 901;
  border-radius: 10px;
  flex-direction: column;
  width: calc(100% - 48px);
  max-width: 860px;
  height: calc(100vh - 80px);
  max-height: 700px;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.layer-popup.open {
  display: flex;
}

.layer-header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  display: flex;
}

.layer-title {
  color: var(--text1);
  font-size: 1rem;
  font-weight: 700;
}

.layer-close {
  cursor: pointer;
  width: 30px;
  height: 30px;
  color: var(--text3);
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  transition: background .12s;
  display: flex;
}

.layer-close:hover {
  background: var(--bg3);
  color: var(--text1);
}

.layer-close svg {
  width: 16px;
  height: 16px;
}

.layer-body {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

.layer-section {
  display: none;
}

.layer-section.active {
  display: block;
}

.layer-h1 {
  color: var(--text1);
  border-bottom: 2px solid var(--text1);
  margin-bottom: 12px;
  padding-bottom: 8px;
  font-size: .9375rem;
  font-weight: 700;
}

.layer-h2 {
  color: var(--text1);
  margin: 16px 0 8px;
  font-size: .875rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .layer-popup {
    border-radius: 8px;
    width: calc(100% - 24px);
    height: calc(100vh - 48px);
    max-height: none;
  }

  .layer-body {
    padding: 16px;
  }
}

@media (max-width: 960px) {
  .nav, .srch, .header-in, .sep, .txt {
    display: none;
  }

  .mobile_menu {
    vertical-align: middle;
    display: flex;
  }

  .drawer {
    display: flex;
  }

  .header .header-in {
    display: none !important;
  }
}

.guide-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.guide-sub-label {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 12px;
  font-size: .75rem;
  font-weight: 700;
}

.guide-form-example {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.guide-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text1);
  cursor: pointer;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: .855rem;
  font-weight: 500;
  transition: all .15s;
}

.guide-btn:hover {
  background: var(--bg3);
  border-color: var(--border2);
}

.btn-guide-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  display: grid;
}

.btn-guide-grid .sec {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.btn-guide-grid .sec:nth-child(2n) {
  border-right: none;
}

.sec-full {
  grid-column: span 2;
  border-right: none !important;
}

.span-guide {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-direction: column;
  gap: 5px;
  padding: 18px;
  transition: background .3s, border-color .3s;
  display: flex;
}

.span-row-wrap {
  align-items: center;
  gap: 10px;
  display: flex;
}

.span-label {
  color: var(--text3);
  flex-shrink: 0;
  width: 56px;
  font-family: monospace;
  font-size: .7rem;
  font-weight: 700;
  transition: color .3s;
}

.span-row {
  flex: 1;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  display: grid;
}

.span-cell {
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  height: 24px;
  font-size: .72rem;
  font-weight: 600;
  display: flex;
}

.span-cell.filled {
  background: var(--accent-s);
  color: var(--accent);
  border: 1px dashed rgba(var(--accent-r),.35);
}

.span-cell.empty {
  border: 1px dashed var(--border);
  background: none;
}

.breakpoint-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color .3s;
  overflow: hidden;
}

.breakpoint-table {
  border-collapse: collapse;
  width: 100%;
}

.breakpoint-table thead tr {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  transition: background .3s, border-color .3s;
}

.breakpoint-table th {
  text-align: left;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text2);
  vertical-align: middle;
  padding: 11px 16px;
  font-size: .75rem;
  font-weight: 700;
  transition: color .3s;
  display: table-cell;
}

.breakpoint-table th span {
  vertical-align: middle;
  margin-right: 4px;
}

.breakpoint-table td {
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  font-size: .855rem;
  transition: color .3s, border-color .3s;
}

.breakpoint-table tr:last-child td {
  border-bottom: none;
}

.breakpoint-table tbody tr:hover {
  background: var(--bg2);
}

.breakpoint-table code {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--accent);
  border-radius: 4px;
  padding: 2px 7px;
  font-family: monospace;
  font-size: .75rem;
}

.breakpoint-table tbody td:first-child code {
  color: var(--text1);
  background: none;
  border: none;
  font-weight: 700;
}

.breakpoint-table tbody td:last-child code {
  color: var(--text3);
  background: none;
  border: none;
}

.breakpoint-badge {
  border-radius: 999px;
  padding: 2px 9px;
  font-family: monospace;
  font-size: .75rem;
  font-weight: 700;
  display: inline-block;
}

.breakpoint-badge.xs {
  color: #64748b;
  background: #f1f5f9;
}

.breakpoint-badge.sm {
  color: #2563eb;
  background: #eff6ff;
}

.breakpoint-badge.md {
  color: #16a34a;
  background: #f0fdf4;
}

.breakpoint-badge.lg {
  color: #ca8a04;
  background: #fefce8;
}

.breakpoint-badge.xl {
  color: #9333ea;
  background: #fdf4ff;
}

[data-theme="dark"] .breakpoint-badge.xs {
  color: #94a3b8;
  background: #64748b26;
}

[data-theme="dark"] .breakpoint-badge.sm {
  color: #93c5fd;
  background: #2563eb26;
}

[data-theme="dark"] .breakpoint-badge.md {
  color: #86efac;
  background: #16a34a26;
}

[data-theme="dark"] .breakpoint-badge.lg {
  color: #fde047;
  background: #ca8a0426;
}

[data-theme="dark"] .breakpoint-badge.xl {
  color: #d8b4fe;
  background: #9333ea26;
}

.badge-type {
  border-radius: 3px;
  align-items: center;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 600;
  display: inline-flex;
}

.usage-example-wrap {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  display: grid;
}

.usage-example-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.usage-example-head {
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
}

.usage-example-badge {
  color: var(--text2);
  font-size: .75rem;
  font-weight: 600;
}

.usage-example-preview {
  align-items: center;
  gap: 10px;
  padding: 16px;
  display: flex;
}

.preview-device {
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-width: 0;
  display: flex;
}

.device-label {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text3);
  font-size: .65rem;
  font-weight: 700;
}

.preview-arrow {
  color: var(--text3);
  flex-shrink: 0;
  font-size: .855rem;
}

.usage-example-code {
  color: var(--text1);
  white-space: pre-wrap;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  margin: 0;
  padding: 14px 16px;
  font-family: Courier New, monospace;
  font-size: .855rem;
  line-height: 1.6;
}

.usage-example-code mark {
  background: var(--accent-s);
  color: var(--accent);
  border-radius: 3px;
  padding: 2px 6px;
  font-size: .9rem;
  font-weight: 700;
}

.icon-search-wrap {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  height: 36px;
  margin-bottom: 24px;
  padding: 0 14px;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.icon-search-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r),.1);
}

.icon-search-wrap svg {
  width: 14px;
  height: 14px;
  stroke: var(--text3);
  flex-shrink: 0;
}

.icon-search-wrap input {
  color: var(--text1);
  background: none;
  border: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  font-size: .855rem;
}

.icon-search-wrap input::placeholder {
  color: var(--text3);
}

.icons {
  background: var(--bg2);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 20px 8px;
  transition: background .15s, border-color .15s, transform .15s;
  display: flex;
}

.icons:hover {
  background: var(--accent-s);
  border-color: rgba(var(--accent-r),.3);
  transform: translateY(-2px);
}

.icons svg {
  width: 24px;
  height: 24px;
  stroke: var(--text2);
}

.icons:hover svg {
  stroke: var(--accent);
}

.icons > div {
  color: var(--text3);
  text-align: center;
  word-break: break-all;
  font-size: .8rem;
  line-height: 1.3;
}

#icons_box {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  display: grid;
}

@media (max-width: 768px) {
  #icons_box {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 6px;
  }
}

@media (max-width: 480px) {
  #icons_box {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 4px;
  }
}

.badge {
  border: 1px solid #0000;
  border-color: var(--border);
  white-space: nowrap;
  border-radius: 4px;
  align-items: center;
  padding: 3px 9px;
  font-size: .75rem;
  font-weight: 600;
  display: inline-flex;
}

.badge-pill {
  border-radius: 999px !important;
}

.badge-count {
  border-radius: 50%;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: .6875rem;
}

.badge-primary {
  background: rgba(var(--accent-r),.1);
  color: var(--accent);
  border-color: var(--accent);
}

.badge-success {
  color: #16a34a;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.badge-warning {
  color: #d97706;
  background: #fffbeb;
  border-color: #fde68a;
}

.badge-danger {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fecaca;
}

.badge-info {
  color: #2563eb;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.badge-dark {
  background: var(--bg3);
  color: var(--text1);
  border-color: var(--border);
}

.badge-light {
  color: var(--text1);
  border-color: var(--border);
  background: none;
}

.badge-outline-primary {
  color: var(--accent);
  border-color: var(--accent);
  background: none;
}

.badge-outline-success {
  color: #2563eb;
  background: none;
  border-color: #2563eb;
}

.badge-outline-warning {
  color: #d97706;
  background: none;
  border-color: #d97706;
}

.badge-outline-danger {
  color: #dc2626;
  background: none;
  border-color: #dc2626;
}

[data-theme="dark"] .badge-success {
  color: #4ade80;
  background: #22c55e1f;
  border-color: #22c55e33;
}

[data-theme="dark"] .badge-warning {
  color: #facc15;
  background: #eab3081f;
  border-color: #eab30833;
}

[data-theme="dark"] .badge-danger {
  color: #f87171;
  background: #ef44441f;
  border-color: #ef444433;
}

[data-theme="dark"] .badge-info {
  color: #93c5fd;
  background: #2563eb1f;
  border-color: #2563eb33;
}

.tooltip-wrap {
  position: relative;
}

.tooltip-wrap:after {
  content: attr(data-tip);
  background: var(--text1);
  color: var(--bg);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  border-radius: 6px;
  padding: 10px;
  font-size: .75rem;
  font-weight: 500;
  transition: opacity .15s;
  position: absolute;
}

.tooltip-wrap[data-pos="top"]:after {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-wrap[data-pos="bottom"]:after {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.tooltip-wrap[data-pos="left"]:after {
  top: 50%;
  right: calc(100% + 8px);
  transform: translateY(-50%);
}

.tooltip-wrap[data-pos="right"]:after {
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
}

.tooltip-wrap:hover:after {
  opacity: 1;
}

.pagination {
  align-items: center;
  gap: 4px;
  display: flex;
}

.page-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  min-width: 34px;
  height: 34px;
  color: var(--text2);
  cursor: pointer;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  font-size: .855rem;
  font-weight: 500;
  transition: all .15s;
  display: flex;
}

.page-btn:hover:not(:disabled) {
  background: var(--accent-s);
  color: var(--accent);
  border-color: rgba(var(--accent-r),.3);
}

.page-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.page-btn:disabled {
  opacity: .35;
  cursor: default;
}

.page-btn svg {
  width: 14px;
  height: 14px;
}

.page-ellipsis {
  color: var(--text3);
  padding: 0 4px;
}

.close-btn {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: inline-flex;
}

.close-btn:hover {
  color: #dc2626;
  background: #fef2f2;
  border-color: #fecaca;
}

.close-sm {
  width: 20px;
  height: 20px;
}

.close-sm svg {
  width: 11px;
  height: 11px;
}

.close-md {
  width: 28px;
  height: 28px;
}

.close-md svg {
  width: 14px;
  height: 14px;
}

.close-lg {
  width: 36px;
  height: 36px;
}

.close-lg svg {
  width: 18px;
  height: 18px;
}

.tag-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: .8125rem;
  display: inline-flex;
}

.tag-accent {
  background: var(--accent-s);
  color: var(--accent);
  border-color: rgba(var(--accent-r),.2);
}

.star-rating {
  gap: 3px;
  display: flex;
}

.star-rating svg {
  width: 18px;
  height: 18px;
  fill: var(--bg3);
  stroke: var(--border);
  transition: all .1s;
}

.star-rating[data-score="1"] svg:nth-child(-n+1), .star-rating[data-score="2"] svg:nth-child(-n+2), .star-rating[data-score="3"] svg:nth-child(-n+3), .star-rating[data-score="4"] svg:nth-child(-n+4), .star-rating[data-score="5"] svg:nth-child(-n+5) {
  fill: #fbbf24;
  stroke: #fbbf24;
}

.star-rating.interactive svg {
  cursor: pointer;
}

.star-rating.interactive:hover svg {
  fill: #fbbf24;
  stroke: #fbbf24;
}

.star-rating.interactive svg:hover ~ svg {
  fill: var(--bg3) !important;
  stroke: var(--border) !important;
}

.custom-check.disabled {
  opacity: .4;
  cursor: not-allowed;
}

.custom-check input {
  display: none;
}

.check-box {
  border: 1.5px solid var(--border2);
  background: var(--surface);
  border-radius: 3px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 17px;
  height: 17px;
  transition: background .15s, border-color .15s;
  display: flex;
}

.custom-check:hover .check-box {
  border-color: var(--accent);
}

.custom-check input:checked + .check-box {
  background: var(--accent);
  border-color: var(--accent);
}

.custom-check input:checked + .check-box:after {
  content: "";
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  width: 9px;
  height: 5px;
  display: block;
  position: relative;
  left: 1px;
  transform: rotate(-45deg)translateY(-1px);
}

.radio-box {
  border: 1.5px solid var(--border2);
  background: var(--surface);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 17px;
  height: 17px;
  transition: background .15s, border-color .15s;
  display: flex;
}

.custom-check:hover .radio-box, .custom-check input:checked + .radio-box {
  border-color: var(--accent);
}

.custom-check input:checked + .radio-box:after {
  content: "";
  background: var(--accent);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  display: block;
}

.toggle-switch {
  background: var(--border2);
  cursor: pointer;
  border-radius: 999px;
  flex-shrink: 0;
  width: 44px;
  height: 24px;
  transition: background .25s;
  position: relative;
}

.toggle-switch.on {
  background: var(--accent);
}

.toggle-switch:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  transition: transform .25s;
  position: absolute;
  top: 2px;
  left: 2px;
  box-shadow: 0 1px 3px #0003;
}

.toggle-switch.on:after {
  transform: translateX(20px);
}

.toggle-sm {
  width: 34px;
  height: 18px;
}

.toggle-sm:after {
  width: 14px;
  height: 14px;
}

.toggle-sm.on:after {
  transform: translateX(16px);
}

.toggle-lg {
  width: 56px;
  height: 30px;
}

.toggle-lg:after {
  width: 26px;
  height: 26px;
}

.toggle-lg.on:after {
  transform: translateX(26px);
}

.btn-loadmore {
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 9px 24px;
  font-size: .855rem;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}

.btn-loadmore:hover {
  opacity: .88;
  transform: translateY(-1px);
}

.btn-loadmore svg {
  width: 15px;
  height: 15px;
}

.btn-loadmore-outline {
  color: var(--accent);
  border: 1.5px solid var(--accent);
  cursor: pointer;
  background: none;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 9px 24px;
  font-size: .855rem;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}

.btn-loadmore-outline:hover {
  background: var(--accent-s);
}

.btn-loadmore-outline svg {
  width: 15px;
  height: 15px;
}

.btn-loadmore-text {
  color: var(--text2);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 6px;
  padding: 9px 24px;
  font-size: .855rem;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}

.btn-loadmore-text:hover {
  color: var(--accent);
}

.btn-loadmore-text svg {
  width: 15px;
  height: 15px;
}

.guide-srch {
  outline: none;
  width: 230px;
  position: relative;
}

.guide-srch-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  width: 300px;
  box-shadow: var(--shadow);
  z-index: 100;
  border-radius: 14px;
  padding: 10px;
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
}

.guide-srch:focus-within .guide-srch-panel {
  display: block;
}

.guide-srch:focus-within .srch-btn {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r),.1);
}

.sort-tabs {
  align-items: center;
  gap: 2px;
  display: flex;
}

.sort-tab {
  color: var(--text3);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  font-size: .8125rem;
  transition: color .15s;
  display: inline-flex;
  position: relative;
}

.sort-tab svg {
  width: 13px;
  height: 13px;
}

.sort-tab:not(:last-child):after {
  content: "";
  background: var(--border);
  width: 1px;
  height: 10px;
  position: absolute;
  top: 50%;
  right: -1px;
  transform: translateY(-50%);
}

.sort-tab.active {
  color: var(--text1);
  font-weight: 700;
}

.sort-tab:hover {
  color: var(--accent);
}

.view-toggle {
  border: 1px solid var(--border2);
  border-radius: 4px;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.view-btn {
  background: var(--surface);
  width: 32px;
  height: 32px;
  color: var(--text3);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  transition: background .15s, color .15s;
  display: flex;
}

.view-btn:not(:last-child) {
  border-right: 1px solid var(--border2);
}

.view-btn svg {
  width: 15px;
  height: 15px;
}

.view-btn.active {
  background: var(--accent);
  color: #fff;
}

.view-btn:hover:not(.active) {
  background: var(--bg3);
  color: var(--text1);
}

.action-btn {
  cursor: pointer;
  border: 1.5px solid #0000;
  border-radius: 6px;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  font-size: .855rem;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}

.action-btn:hover {
  transform: translateY(-1px);
}

.action-btn.btn-sm {
  padding: 5px 12px;
  font-size: .8125rem;
}

.action-btn.btn-lg {
  padding: 12px 28px;
  font-size: 1rem;
}

.action-submit {
  background: var(--accent);
  color: #fff;
}

.action-submit:hover {
  opacity: .88;
}

.action-confirm {
  color: #fff;
  background: #22c55e;
}

.action-confirm:hover {
  background: #16a34a;
}

.action-cancel {
  color: var(--text2);
  border-color: var(--border);
  background: none;
}

.action-cancel:hover {
  color: var(--text1);
}

.action-search {
  background: var(--text1);
  color: var(--bg);
}

.action-search:hover {
  opacity: .85;
}

.action-danger {
  color: var(--accent);
  border-color: var(--accent);
  background: none;
}

.action-danger:hover {
  background: var(--accent);
  color: #fff;
}

.guide-select {
  appearance: none;
  color: var(--text1);
  background: var(--surface);
  border: 1px solid var(--border2);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  border-radius: 6px;
  outline: none;
  min-width: 140px;
  padding: 10px 32px 10px 12px;
  font-size: .855rem;
  transition: border-color .15s;
}

.guide-select:hover, .guide-select:focus {
  border-color: var(--accent);
}

.guide-select:disabled {
  opacity: .4;
  cursor: default;
}

.guide-select-line {
  border: none;
  border-bottom: 1px solid var(--border2);
  background-color: #0000;
  border-radius: 0;
  padding-left: 4px;
}

.guide-select-line:hover, .guide-select-line:focus {
  border-bottom-color: var(--accent);
}

.guide-select-filled {
  background-color: var(--bg3);
  border-color: #0000;
  border-radius: 4px;
}

.guide-select-filled:hover {
  border-color: var(--accent);
  background-color: var(--bg2);
}

.guide-select-filled:focus {
  border-color: var(--accent);
}

.guide-select-sm {
  min-width: 100px;
  padding: 4px 28px 4px 10px;
  font-size: .8125rem;
}

.guide-select-lg {
  min-width: 180px;
  padding: 10px 36px 10px 14px;
  font-size: .9375rem;
}

.guide-select-pill {
  border-radius: 999px;
  padding-left: 16px;
}

.table_01 {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 14px;
}

.table_01 th {
  text-align: left;
  color: var(--text1);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  font-weight: 500;
}

.table_01 td {
  color: var(--text1);
  padding: 16px;
}

.table_01 tbody tr {
  border-bottom: 1px solid #f1f1f1;
}

.table_01 tbody tr:hover {
  background: var(--bg2);
}

.table_02 {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}

.table_02 th {
  text-align: left;
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  font-weight: 500;
}

.table_02 td {
  border-bottom: 1px solid var(--border);
  color: var(--text1);
  padding: 16px;
  transition: background .2s, border-color .2s;
}

.table_02 td:first-child {
  border-left: 3px solid #0000;
}

.table_02 tbody tr:hover td {
  background: var(--bg-muted);
}

.table_02 tbody tr:hover td:first-child {
  border-left: 3px solid #6366f1;
}

.table_02 tbody tr.active td {
  background: #f5f7ff;
}

.table_02 tbody tr.active td:first-child {
  border-left: 3px solid #4f46e5;
}

.table_03 {
  border-collapse: collapse;
  width: 100%;
}

.table_03 th {
  background: var(--bg-sub);
  text-align: left;
  color: var(--text2);
  padding: 12px;
}

.table_03 td {
  color: var(--text1);
  padding: 12px;
}

.table_03 tbody tr:nth-child(2n) {
  background: var(--bg-sub);
}

.table_03 tbody tr:hover {
  background: var(--bg-muted);
}

.table_04 {
  border-collapse: separate;
  border-spacing: 0 8px;
  width: 100%;
  font-size: 14px;
}

.table_04 th {
  text-align: left;
  color: var(--text2);
  padding: 12px 16px;
}

.table_04 td {
  background: var(--bg-sub);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text1);
  padding: 16px;
}

.table_04 tr td:first-child {
  border-radius: 12px 0 0 12px;
}

.table_04 tr td:last-child {
  border-radius: 0 12px 12px 0;
}

.table_04 tr:hover td {
  background: var(--bg-muted);
}

.table_05 {
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 100%;
  overflow: hidden;
}

.table_05 tr:last-child {
  border-bottom: none;
}

.table_05 th {
  background: var(--bg2);
  width: 120px;
  color: var(--text2);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  border-right: 1px solid var(--border);
  padding: 12px 16px;
  font-size: .8125rem;
  font-weight: 600;
}

.table_05 td {
  color: var(--text1);
  border-bottom: 1px solid var(--border);
  padding: 12px 16px;
  font-size: .875rem;
  line-height: 1.6;
}

.table_06 {
  border-collapse: collapse;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  width: 100%;
  overflow: hidden;
}

.table_06 th {
  background: rgba(var(--accent-r),.07);
  width: 140px;
  color: var(--text1);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  padding: 12px 16px;
  font-size: .8125rem;
  font-weight: 600;
}

.table_06 td {
  color: var(--text1);
  padding: 12px 16px;
  font-size: .875rem;
  line-height: 1.6;
}

.table_06 tr:hover td {
  background: var(--bg2);
}

@media (max-width: 768px) {
  .sec-ttl {
    font-size: 1.25rem;
  }

  .sec-dsc {
    font-size: .855rem;
  }

  .btn-guide-grid {
    grid-template-columns: 1fr;
  }

  .btn-guide-grid .sec {
    border-right: none;
  }

  .sec-full {
    grid-column: span 1;
  }

  .badge {
    border-color: var(--border);
    padding: 2px 7px;
    font-size: .6875rem;
  }

  .page-btn {
    min-width: 28px;
    height: 28px;
    font-size: .8125rem;
  }

  .action-btn {
    padding: 7px 10px;
    font-size: .8125rem;
  }

  .action-btn.btn-lg {
    padding: 10px 20px;
    font-size: .9375rem;
  }

  .guide-select {
    min-width: 100px;
  }

  .sort-tabs {
    flex-wrap: wrap;
  }

  .usage-example-wrap {
    grid-template-columns: 1fr;
  }

  .srch-btn {
    width: 180px;
  }

  .srch-panel {
    width: 260px;
  }
}

@media (max-width: 320px) {
  .sec {
    padding: 24px 12px;
  }

  .sec-ttl {
    font-size: 1.1rem;
  }

  .action-btn {
    padding: 6px 10px;
    font-size: .75rem;
  }

  .action-btn.btn-sm {
    padding: 4px 8px;
    font-size: .75rem;
  }

  .pagination {
    gap: 2px;
  }

  .page-btn {
    min-width: 26px;
    height: 26px;
    font-size: .75rem;
  }

  .page-ellipsis {
    padding: 0 2px;
  }

  .toggle-lg {
    width: 44px;
    height: 24px;
  }

  .toggle-lg:after {
    width: 20px;
    height: 20px;
  }

  .toggle-lg.on:after {
    transform: translateX(20px);
  }

  .srch-btn {
    width: 140px;
  }

  .srch-panel {
    width: 220px;
    right: -24px;
  }
}

.tab-primary {
  border: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  display: grid;
  overflow: hidden;
}

.tab-primary-btn {
  color: var(--text1);
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  padding: 12px 16px;
  font-size: .855rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}

.tab-primary-btn:last-child {
  border-right: none;
}

.tab-primary-btn:hover {
  background: var(--bg2);
  color: var(--text1);
}

.tab-primary-btn.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.tab-primary-btn .tab-cnt {
  opacity: .85;
  margin-left: 3px;
  font-size: .8125rem;
}

.tab-wrap {
  border-top: none;
  align-items: center;
  width: 100%;
  margin-bottom: 16px;
  padding: 20px 0 0;
  display: flex;
}

.tab-wrap > .d-flex {
  width: 100%;
}

.tab-list {
  display: flex;
}

.tab-btn {
  color: var(--text3);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  margin-bottom: -1px;
  padding: 9px 16px;
  font-size: .855rem;
  transition: color .15s, border-color .15s;
}

.tab-btn:hover {
  color: var(--text1);
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

.tab-sort {
  align-items: center;
  gap: 6px;
  padding-right: 12px;
  display: flex;
}

.tab-sort-btn {
  color: var(--text3);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: .8125rem;
  transition: color .15s;
}

.tab-sort-btn.active {
  color: var(--text1);
  font-weight: 600;
}

.tab-sort-btn:hover {
  color: var(--accent);
}

.tab-sort-sep {
  color: var(--border2);
  font-size: .75rem;
}

.lecture-tab-wrap {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px 8px 0 0;
  align-items: stretch;
  gap: 0;
  display: flex;
  overflow: hidden;
}

.lecture-tab {
  color: var(--text1);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  flex: 1;
  padding: 14px 16px;
  font-size: .9375rem;
  font-weight: 600;
  transition: background .15s, color .15s;
}

.lecture-tab:last-child {
  border-right: none;
}

.lecture-tab:hover {
  background: var(--bg2);
  color: var(--text1);
}

.lecture-tab.active {
  border-bottom: 3px solid var(--accent);
  color: var(--accent);
}

.lecture-tab .tab-cnt {
  opacity: .85;
  margin-left: 3px;
  font-size: .8125rem;
}

.cat-filter {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}

.cat-filter-row {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.cat-filter-row + .cat-filter-row {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px;
}

.cat-chip {
  color: var(--text1);
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .8125rem;
  font-weight: 500;
  transition: all .15s;
}

.cat-chip:hover {
  color: var(--accent);
  border-color: rgba(var(--accent-r),.4);
}

.cat-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  font-weight: 600;
}

@media (max-width: 480px) {
  .tab-primary {
    border-radius: 6px 6px 0 0;
    grid-template-columns: 1fr;
  }

  .tab-primary-btn {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .tab-primary-btn:last-child {
    border-bottom: none;
  }

  .tab-wrap {
    flex-direction: column;
    align-items: stretch;
  }

  .tab-list {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overflow-x: auto;
  }

  .tab-list::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    padding: 8px 12px;
    font-size: .8125rem;
  }

  .tab-sort {
    border-top: 1px solid var(--border);
    justify-content: flex-end;
    padding: 6px 0;
  }
}

@media (max-width: 320px) {
  .tab-primary-btn {
    padding: 10px;
    font-size: .8125rem;
  }

  .tab-btn {
    padding: 7px 10px;
    font-size: .75rem;
  }

  .tab-sort {
    padding: 10px;
  }

  .tab-sort-btn {
    font-size: .75rem;
  }
}

.course-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  display: grid;
}

.course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-direction: column;
  display: flex;
}

.course-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg3);
  cursor: pointer;
  background-size: cover;
  border-radius: 10px 10px 0 0;
  flex-shrink: 0;
  width: 100%;
  position: relative;
}

.course-no-img i {
  color: var(--border2);
}

.course-badges {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
  position: absolute;
  top: 10px;
  left: 10px;
}

.course-wish {
  cursor: pointer;
  background: #ffffffd9;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  transition: background .15s;
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
}

.course-wish:hover {
  background: var(--surface);
}

.course-wish svg {
  fill: none;
  width: 15px;
  height: 15px;
  stroke: var(--text3);
  transition: all .15s;
}

.course-wish i {
  color: var(--text3);
  transition: all .15s;
}

.course-wish.on svg {
  fill: #ef4444;
  stroke: #ef4444;
}

.course-wish.on i {
  color: #ef4444;
}

.course-thumb img {
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  width: 100%;
  height: 100%;
}

.course-no-img {
  border-radius: 10px 10px 0 0;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.course-links-wrap {
  background: rgba(var(--bg-r),.8);
  min-height: 36px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.course-links {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  display: flex;
}

.course-link {
  text-align: center;
  cursor: pointer;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  text-decoration: none;
  transition: color .15s;
  display: inline-block;
}

.course-link:hover {
  filter: opacity(.5);
}

.course-link svg {
  width: 13px;
  height: 13px;
}

.course-link i {
  font-size: 13px;
}

.preview-item svg {
  width: 13px;
  height: 13px;
  stroke: var(--text3);
  flex-shrink: 0;
}

.preview-item:hover svg {
  stroke: var(--accent);
}

.course-body {
  flex-direction: column;
  flex: 1;
  padding: 12px;
  display: flex;
}

.course-title {
  color: var(--text1);
  cursor: pointer;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 7px;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.course-teacher {
  color: var(--text3);
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
  font-size: .8rem;
  display: flex;
}

.course-teacher svg {
  width: 12px;
  height: 12px;
}

.course-teacher i {
  font-size: 12px;
}

.course-chips {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  display: flex;
  position: relative;
}

.course-chips .course-preview-drop {
  z-index: 5;
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
}

.course-footer {
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 11px;
  display: flex;
}

.course-price {
  color: var(--text1);
  letter-spacing: -.2px;
  font-size: .98rem;
  font-weight: 700;
}

.course-price.free {
  color: var(--accent);
}

.course-price.soon {
  color: var(--text3);
  font-size: .8125rem;
  font-weight: 500;
}

.course-cart {
  padding: 5px 8px !important;
}

.course-price-wrap {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
  position: relative;
}

.course-footer:has(.event-flag) {
  align-items: flex-end;
}

.course-discount {
  color: #dc2626;
  white-space: nowrap;
  letter-spacing: -.2px;
  vertical-align: middle;
  font-size: .72rem;
  font-weight: 700;
  display: contents;
}

.clist-actions .course-price-wrap {
  justify-content: flex-end;
}

.event-flag {
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
  border-radius: 999px;
  margin-bottom: 7px;
  padding: 4px 10px;
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
  position: absolute;
  bottom: 100%;
  left: 0;
}

.event-flag:after {
  content: "";
  border: 5px solid #0000;
  border-top-color: var(--accent);
  position: absolute;
  top: 100%;
  left: 12px;
}

.clist-actions .event-flag {
  left: -15px;
  right: auto;
}

.clist-actions .event-flag:after {
  left: auto;
  right: 12px;
}

.simple-grid .course-price-option {
  border: none;
  flex: 1;
  margin-bottom: 0;
}

.simple-grid .course-footer {
  border: none;
  justify-content: end;
  padding-top: 3px;
}

.simple-grid .course-footer .price-val, .simple-grid .course-footer .course-price {
  color: var(--accent);
}

.simple-grid .course-footer .course-price.soon {
  color: var(--text3);
}

.simple-grid .course-price-item {
  cursor: default;
  border: none;
  padding: 0 0 5px;
}

.simple-grid .price-label {
  font-weight: 600;
}

#viewList {
  flex-direction: column;
}

.course-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-direction: column;
  gap: 0;
  display: flex;
}

.clist-item {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 5%;
  padding: 16px 20px;
  transition: background .12s;
  display: flex;
  position: relative;
}

.clist-item:last-child {
  border-bottom: none;
}

.clist-item:hover {
  background: var(--bg2);
}

.clist-item .course-thumb, .clist-item .clist-thumb {
  border-radius: 8px;
  flex: 0 0 72px;
}

.clist-item .course-thumb .course-no-img, .clist-item .clist-thumb .course-no-img {
  border-radius: 8px;
}

.clist-item .course-thumb .course-no-img svg, .clist-item .clist-thumb .course-no-img svg {
  width: 22px;
  height: 22px;
}

.clist-badges {
  flex-wrap: wrap;
  gap: 4px;
  display: flex;
}

.clist-info {
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.clist-title {
  color: var(--text1);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
  overflow: hidden;
}

.clist-links {
  flex-direction: column;
  flex: 0 0 100px;
  gap: 6px;
  display: flex;
  position: relative;
}

.clist-links .course-preview-drop {
  z-index: 5;
  width: 280px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

.clist-links .course-link:hover {
  color: var(--accent);
}

.clist-actions {
  flex-direction: column;
  flex: 0 0 280px;
  align-items: flex-end;
  gap: 8px;
  display: flex;
}

.clist-actions .d-flex {
  justify-content: flex-end;
  width: 100%;
}

.clist-actions .action-btn.btn-sm {
  width: auto;
}

.clist-wish {
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
  position: static;
}

.clist-wish svg {
  fill: none;
  width: 14px;
  height: 14px;
  stroke: var(--text3);
  transition: all .15s;
}

.clist-wish i {
  color: var(--text3);
  transition: all .15s;
}

.clist-wish.on svg {
  fill: #ef4444;
  stroke: #ef4444;
}

.clist-wish.on i {
  color: #ef4444;
}

.clist-actions .d-flex .action-submit {
  flex: auto;
  justify-content: center;
}

.clist-actions .d-flex .course-cart {
  flex: none;
}

.simple-list .clist-item {
  padding: 14px 20px;
}

.simple-list .clist-links {
  flex: 0 0 80px;
}

.simple-list .clist-actions {
  flex: 0 0 150px;
}

.simple-list .course-footer {
  border: none;
  justify-content: end;
  padding-top: 3px;
}

.simple-list .course-price, .simple-list .price-val {
  color: var(--accent);
}

.simple-list .course-price.soon {
  color: var(--text3);
}

.simple-list .course-price-item {
  cursor: default;
}

.clist-actions .course-price-option {
  width: 100%;
  overflow: inherit;
  border: none;
  position: relative;
}

.clist-actions .course-price-item {
  border-bottom: none;
  padding: 3px 0;
}

@media (max-width: 900px) {
  .clist-links {
    flex-basis: 84px;
  }

  .clist-actions {
    flex-basis: 150px;
  }
}

@media (max-width: 768px) {
  .clist-item {
    flex-wrap: wrap;
    row-gap: 12px;
    padding: 14px 16px;
  }

  .clist-info {
    flex: 160px;
  }

  .clist-item .course-chips {
    margin-bottom: 0;
  }

  .course-list:not(.simple-list) .clist-links {
    flex-flow: wrap;
    flex: 100%;
    gap: 8px;
  }

  .course-list:not(.simple-list) .clist-actions:not(:has(.course-price-option)) {
    flex-direction: row;
    flex: 100%;
    justify-content: space-between;
    align-items: center;
  }

  .course-list:not(.simple-list) .clist-actions:not(:has(.course-price-option)) .d-flex {
    width: auto;
    max-width: 220px;
  }

  .course-list:not(.simple-list) .clist-actions:has(.course-price-option) {
    flex: 100%;
  }

  .course-list:not(.simple-list) .clist-actions .course-price-option {
    margin-top: 6px;
  }

  .simple-list .clist-links {
    flex-direction: row;
    flex: auto;
  }

  .simple-list .clist-actions:not(:has(.course-price-option)) {
    flex-direction: row;
    flex: none;
    align-items: center;
    gap: 10px;
  }

  .simple-list .clist-actions:has(.course-price-option) {
    flex: 100%;
  }
}

@media (max-width: 480px) {
  .clist-item {
    gap: 10px;
  }

  .clist-item .course-thumb, .clist-title {
    white-space: normal;
  }

  .clist-info, .course-list:not(.simple-list) .clist-links {
    flex: 100%;
  }

  .clist-links .course-preview-drop {
    width: 100%;
  }

  .course-list:not(.simple-list) .clist-actions:not(:has(.course-price-option)) {
    flex-direction: column;
    align-items: end;
  }

  .course-list:not(.simple-list) .clist-actions:not(:has(.course-price-option)) > span {
    text-align: right;
    width: 100%;
  }

  .course-list:not(.simple-list) .clist-actions:not(:has(.course-price-option)) > .course-price-wrap {
    justify-content: flex-end;
    width: 100%;
  }

  .course-list:not(.simple-list) .clist-actions:not(:has(.course-price-option)) .d-flex {
    gap: 8px;
    width: 100%;
    max-width: none;
    display: flex;
  }

  .simple-list .clist-item {
    justify-content: space-between;
  }

  .simple-list .clist-actions:not(:has(.course-price-option)) {
    flex-flow: column;
    justify-content: space-between;
    align-items: end;
    width: 100%;
  }

  .clist-actions .event-flag {
    left: auto;
    right: 18%;
  }
}

.mc-card-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg3);
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.mc-card-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.mc-card-thumb svg {
  width: 36px;
  height: 36px;
  stroke: var(--border2);
}

@media (max-width: 480px) {
  .course-footer {
    text-align: right;
    display: block;
  }

  .course-footer .course-price {
    width: 100%;
    display: block;
  }

  .course-footer .course-price-wrap {
    justify-content: flex-end;
    width: 100%;
  }

  .course-footer .course-price-wrap .event-flag {
    left: auto;
    right: 0;
  }

  .course-footer .course-price-wrap .event-flag:after {
    left: auto;
    right: 12px;
  }

  .course-footer .d-flex {
    gap: 5px;
    width: 100%;
    margin-top: 5px;
    display: flex;
  }

  .course-footer .action-btn.btn-sm {
    vertical-align: middle;
    width: auto;
    padding: 10px 8px !important;
  }

  .course-footer .action-submit {
    flex: none;
    justify-content: center;
    width: calc(100% - 42px) !important;
  }

  .course-footer .action-btn.btn-sm svg {
    width: 17px;
    height: 17px;
  }
}

.course-price-option {
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 12px;
  overflow: hidden;
}

.course-price-list {
  flex-direction: column;
}

.course-price-item {
  cursor: pointer;
  align-items: center;
  gap: 8px;
  padding: 10px;
  transition: background .12s;
  display: flex;
}

.course-price-item:last-child {
  border-bottom: none;
}

.course-price-item:hover {
  background: var(--bg2);
}

.course-price-item.active {
  background: rgba(var(--accent-r),.07);
}

.course-price-item input[type="radio"] {
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}

.price-label {
  color: var(--text2);
  flex: 1;
  font-size: .8125rem;
}

.price-val {
  color: var(--text1);
  font-size: .8125rem;
  font-weight: 700;
}

.course-price-item.active .price-label, .course-price-item.active .price-val {
  color: var(--accent);
}

.book-item {
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  display: flex;
}

.book-item:last-child {
  border-bottom: none;
}

.book-thumb {
  aspect-ratio: 1;
  background: var(--bg3);
  cursor: pointer;
  border-radius: 8px;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  overflow: hidden;
}

.book-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.book-thumb-no-img {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.book-thumb svg {
  width: 20px;
  height: 20px;
  stroke: var(--border2);
}

.book-info {
  flex: 160px;
  min-width: 0;
}

.book-title {
  color: var(--text1);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  overflow: hidden;
}

.book-author {
  color: var(--text3);
  margin-bottom: 4px;
  font-size: .75rem;
}

.book-price {
  color: var(--accent);
  font-size: .875rem;
  font-weight: 700;
}

.book-actions {
  flex: none;
  gap: 6px;
  display: flex;
}

@media (max-width: 480px) {
  .book-actions {
    flex-basis: 100%;
    justify-content: flex-end;
    margin-top: 4px;
  }

  .book-actions .action-btn.btn-sm {
    width: auto;
  }
}

@media (max-width: 1024px) {
  .course-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
}

.mypage-layout {
  grid-template-columns: 230px 1fr;
  align-items: start;
  gap: 32px;
  min-width: 0;
  padding: 30px 0;
  display: grid;
}

.mypage-content {
  min-width: 0;
  overflow: inherit;
}

.mypage-side {
  border-right: 1px solid var(--border);
  padding-right: 24px;
}

.my-user {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 12px;
  padding-bottom: 20px;
  display: flex;
}

.my-avatar {
  background: rgba(var(--accent-r),.05);
  width: 44px;
  height: 44px;
  color: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
}

.my-name {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.my-name span {
  font-weight: 400;
}

.my-email {
  color: var(--text3);
  margin-top: 2px;
  font-size: .855rem;
}

.my-nav-group {
  margin-bottom: 20px;
}

.my-nav-label {
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 6px;
  font-size: .855rem;
  font-weight: 700;
}

.my-nav-link {
  color: var(--text2);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: .855rem;
  transition: color .15s, background .15s;
  display: block;
}

.my-nav-link:hover {
  color: var(--text1);
  background: var(--bg2);
}

.my-nav-link.active {
  color: var(--accent);
  background: rgba(var(--accent-r),.05);
  font-weight: 600;
}

.my-nav-select {
  display: none;
}

.summary-grid {
  align-items: stretch;
  display: grid;
}

.summary-ttl {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.summary-more {
  width: 26px;
  height: 26px;
  color: var(--text3);
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  transition: color .15s, background .15s;
  display: flex;
}

.summary-more:hover {
  color: var(--text1);
  background: var(--bg3);
}

.summary-more svg {
  width: 16px;
  height: 16px;
}

.summary-wrap {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 9px;
  display: grid;
  overflow: hidden;
}

.summary-board {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.board-item {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  transition: background .15s;
  display: flex;
}

.board-item:last-child {
  border-bottom: none;
}

.board-item:hover {
  background: var(--bg2);
}

.board-cat {
  width: 12%;
  color: var(--text3);
  flex-shrink: 0;
  font-size: .855rem;
  font-weight: 700;
}

.board-cat.accent {
  color: var(--accent);
}

.board-cat svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
}

.board-notice .board-title {
  color: var(--text1);
  font-weight: 700;
}

.board-title {
  color: var(--text1);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .855rem;
  transition: color .15s;
  overflow: hidden;
}

.board-title:hover {
  color: var(--accent);
}

.summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  min-height: 140px;
  padding: 14px 16px;
  transition: border-color .15s;
}

.summary-card:hover {
  border-color: var(--border2);
}

.card-label {
  color: var(--text1);
  font-size: .8rem;
}

.card-main {
  color: var(--text1);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 3px;
  font-size: .825rem;
  font-weight: 700;
  display: -webkit-box;
  overflow: hidden;
}

.card-sub {
  color: var(--text3);
  font-size: .825rem;
}

.card-link {
  color: var(--text3);
  align-items: center;
  gap: 2px;
  transition: color .15s;
  display: inline-flex;
}

.card-link:hover {
  color: var(--accent);
}

.card-link svg {
  width: 13px;
  height: 13px;
}

@media (max-width: 640px) {
  .summary-wrap {
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }
}

.lecture-list {
  flex-direction: column;
  display: flex;
}

.lecture-item {
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  display: flex;
}

.lecture-item + .lecture-item, .lecture-recent + .lecture-item {
  border-top: 1px solid var(--border2);
}

.lecture-item:hover {
  background: var(--bg2);
}

.lecture-info {
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.lecture-info:hover .lecture-name {
  color: var(--accent);
}

.lecture-depth {
  color: var(--text1);
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-bottom: 6px;
  font-size: 12px;
  display: flex;
}

.depth-sep {
  color: var(--border2);
  font-size: .75rem;
}

.depth-current {
  color: var(--text2);
  font-weight: 600;
}

.lecture-name {
  color: var(--text1);
  margin-bottom: 4px;
  font-size: .9375rem;
  font-weight: 700;
  transition: color .15s;
}

.lecture-teacher {
  color: var(--text3);
  align-items: center;
  gap: 4px;
  font-size: .855rem;
  display: flex;
}

.lecture-teacher svg {
  width: 13px;
  height: 13px;
}

.lecture-progress {
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  display: flex;
}

.lecture-bar {
  background: var(--bg3);
  border-radius: 999px;
  flex: 1;
  height: 5px;
  overflow: hidden;
}

.lecture-pct {
  color: var(--text1);
  flex-shrink: 0;
  font-size: .855rem;
  font-weight: 700;
}

.lecture-dday {
  color: var(--text3);
  font-size: 12px;
}

.lecture-dday strong {
  color: var(--accent);
  margin: 0 3px;
}

.dday-warn {
  color: #f06548 !important;
}

.lecture-actions {
  flex-direction: column;
  flex-shrink: 0;
  gap: 6px;
  margin-top: auto;
  display: flex;
}

.rate-fill {
  border-radius: 999px;
  height: 100%;
}

.rate-fill-low {
  background: #ef4444;
}

.rate-fill-mid {
  background: #f7b84b;
}

.modal-lg {
  max-width: 520px !important;
}

.mgm-tabs {
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  display: flex;
}

.mgm-tab {
  color: var(--text3);
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  flex: 1;
  margin-bottom: -1px;
  padding: 14px 0;
  font-size: .9375rem;
  font-weight: 600;
  transition: all .15s;
}

.mgm-tab:hover:not(.active) {
  color: var(--text2);
  background: var(--bg3);
}

.mgm-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--surface);
}

.mgm-panel-title {
  color: var(--text1);
  align-items: center;
  gap: 6px;
  margin-bottom: 15px;
  font-size: .9375rem;
  font-weight: 700;
  display: flex;
}

.mgm-panel-title:before {
  content: "";
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
  width: 3px;
  height: 16px;
}

.mgm-info-table {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 20px;
  overflow: hidden;
}

.mgm-info-row {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 15px;
  padding: 13px 16px;
  display: flex;
}

.mgm-info-row:last-child {
  border-bottom: none;
}

.mgm-info-row:nth-child(odd) {
  background: var(--bg2);
}

.mgm-info-label {
  color: var(--text3);
  flex-shrink: 0;
  min-width: 120px;
  font-size: .8125rem;
  font-weight: 600;
}

.mgm-info-val {
  color: var(--text1);
  flex: 1;
  font-size: .875rem;
}

.mgm-select {
  max-width: 130px;
}

.mgm-action-btn {
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  font-size: .9375rem;
  font-weight: 700;
  transition: opacity .15s;
  display: flex;
}

.mgm-action-btn:hover {
  opacity: .88;
}

.mgm-action-btn svg {
  width: 16px;
  height: 16px;
}

.lecture-wrap {
  border: 1px solid rgba(var(--accent-r), .5);
  border-radius: 6px;
  margin-bottom: 20px;
  position: relative;
}

.lecture-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.bm-btn {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  transition: color .15s;
  display: flex;
}

.bm-btn svg {
  stroke: currentColor;
  fill: #0000;
  width: 18px;
  height: 18px;
  transition: fill .15s, stroke .15s;
}

.bm-btn.on {
  color: var(--accent);
}

.bm-btn.on svg {
  fill: var(--accent);
  stroke: var(--accent);
}

.bm-btn--card {
  z-index: 2;
  padding: 4px;
  position: absolute;
  top: 8px;
  right: 8px;
}

.bm-btn--list {
  margin-left: auto;
  padding: 4px;
  position: static;
}

.bm-btn--group {
  flex-shrink: 0;
  align-self: stretch;
  padding: 0 16px;
}

.mc-bm-filter-btn {
  border: 1.5px solid var(--border2);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 6px;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: .8125rem;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.mc-bm-filter-btn svg {
  stroke: currentColor;
  fill: #0000;
  width: 14px;
  height: 14px;
  transition: fill .15s;
}

.mc-bm-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.mc-bm-filter-btn.active svg {
  fill: #fff;
  stroke: #fff;
}

.mc-card-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  display: grid;
}

.mc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: box-shadow .2s, transform .2s;
  position: relative;
  overflow: hidden;
}

.mc-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.mc-card-body {
  flex-direction: column;
  gap: 6px;
  padding: 15px;
  display: flex;
}

.mc-card-title {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
}

.mc-card-teacher {
  color: var(--text3);
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  display: flex;
}

.mc-card-teacher svg {
  width: 12px;
  height: 12px;
}

.mc-card-progress {
  align-items: center;
  gap: 8px;
  display: flex;
}

.mc-card-progress .lecture-bar {
  flex: 1;
}

.mc-card-dday {
  color: var(--text2);
  font-size: .8125rem;
}

.mc-card-actions {
  border-top: 1px solid var(--border);
  justify-content: end;
  gap: 5px;
  margin-top: 5px;
  padding-top: 10px;
  display: flex;
}

.mc-card-actions > .action-submit {
  flex: 1;
  justify-content: center;
}

@media (max-width: 1024px) {
  .mc-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .mc-card-grid {
    grid-template-columns: 1fr;
  }

  .mc-card-actions > .action-submit {
    flex: none;
    width: calc(100% - 42px) !important;
  }
}

.lecture-recent {
  background: rgba(var(--accent-r),.03);
  border-top: 1px dashed rgba(var(--accent-r),.5);
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  display: flex;
}

.lecture-recent:last-child {
  border-bottom: none;
}

.lecture-recent-info {
  flex: 1;
  min-width: 0;
  padding-left: 8px;
}

.lecture-recent-name {
  color: var(--text1);
  cursor: pointer;
  font-size: .855rem;
  font-weight: 600;
  display: block;
}

.lecture-recent-name:hover {
  text-decoration: underline;
}

.lecture-recent-last {
  color: var(--text3);
  align-items: center;
  gap: 4px;
  font-size: 12px;
  display: flex;
}

.lecture-recent-last svg {
  width: 12px;
  height: 12px;
}

.lec-header-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

.lec-title {
  color: var(--text1);
  margin: 6px 0;
  font-size: 1rem;
  font-weight: 700;
}

.lec-teacher-txt {
  color: var(--text1);
  align-items: center;
  gap: 5px;
  font-size: .855rem;
  display: flex;
}

.lec-teacher-txt svg {
  width: 13px;
  height: 13px;
  stroke: var(--accent);
}

.lec-txt {
  color: var(--text2);
  margin-top: 5px;
  font-size: .8rem;
}

.lec-info-rows {
  overflow: hidden;
}

.lec-info-row {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 10px;
  padding: 10px 30px;
  transition: background .12s;
  display: flex;
}

.lec-info-row:last-child {
  border-bottom: none;
}

.lec-info-row:hover {
  background: var(--bg2);
}

.lec-info-row .lec-info-val {
  cursor: pointer;
}

.lec-info-row .lec-info-val:hover {
  text-decoration: underline;
}

.lec-info-lbl {
  width: 50px;
  color: var(--text3);
  flex-shrink: 0;
  font-size: .82rem;
  font-weight: 700;
}

.lec-info-val {
  color: var(--text1);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  font-size: .82rem;
  overflow: hidden;
}

.lec-info-link {
  color: var(--accent);
  flex-shrink: 0;
  align-items: center;
  gap: 3px;
  font-size: .855rem;
  text-decoration: none;
  display: inline-flex;
}

.lec-info-link:hover {
  opacity: .75;
}

.lec-info-link svg {
  width: 12px;
  height: 12px;
}

.lec-act-btns {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.lec-act-btns .action-btn {
  border-color: var(--text2);
}

.lec-sec-bar {
  background: var(--accent);
  border-radius: 2px;
  width: 3px;
  height: 15px;
  display: inline-block;
}

.lec-header-top strong {
  color: var(--accent);
}

.lec-list-head {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  grid-template-columns: 50px 95px 1fr 95px 220px;
  gap: 0;
  padding: 10px;
  display: grid;
}

.lec-list-head > div {
  color: var(--text2);
  font-size: .855rem;
  font-weight: 500;
}

.lec-list-item {
  border-bottom: 1px solid var(--border);
  grid-template-columns: 50px 95px 1fr 95px 220px;
  align-items: center;
  gap: 0;
  padding: 14px 12px;
  transition: background .12s;
  display: grid;
  position: relative;
}

.lec-list-item:last-child {
  border-bottom: none;
}

.lec-list-item:hover {
  background: var(--bg2);
}

.lec-list-item.active {
  background: var(--accent-s);
}

.lec-list-item.active:after {
  content: "▶";
  color: var(--accent);
  font-size: .75rem;
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
}

.lec-no {
  color: var(--text1);
  font-size: .855rem;
  font-weight: 700;
  display: block;
}

.lec-date {
  color: var(--text3);
  margin-top: 2px;
  font-size: .75rem;
  display: block;
}

.lec-cls-name {
  cursor: pointer;
  text-overflow: ellipsis;
  white-space: normal;
  color: var(--text1);
  margin-bottom: 5px;
  font-size: .855rem;
  font-weight: 500;
  overflow: hidden;
}

.lec-cls-name:hover {
  text-decoration: underline;
}

.lec-cls-name span {
  padding: 1px 5px;
  font-size: .65rem;
}

.rate-bar-bg {
  background: var(--bg3);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}

.rate-bar-fill {
  border-radius: 999px;
  height: 100%;
}

.rate-fill-high {
  background: var(--accent);
}

.lh-note, .lh-play, .lec-no, .lh-no, .li-note {
  text-align: center;
}

.li-note .action-btn {
  padding: 4px 8px;
}

.li-play span {
  text-align: center;
  width: 100%;
  display: block;
}

.custom-check {
  color: var(--text1);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-size: .855rem;
  display: flex;
}

.lec-group-header .fw-bold {
  color: var(--text2);
}

.lec-toolbar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  display: flex;
}

.lec-toolbar-filters {
  flex-shrink: 0;
  gap: 8px;
  display: flex;
}

.lec-filter-select {
  width: 110px;
}

.lec-search-wrap {
  flex: 1;
  min-width: 0;
}

.lec-sec-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.btn-view-active {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
}

.lec-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.lec-list-box {
  border-radius: 6px;
  flex-direction: column;
  gap: 10px;
  display: flex;
  overflow: hidden;
}

.lec-group-header-wrap {
  background: rgba(var(--accent-r), .05);
  align-items: stretch;
  transition: background .12s;
  display: flex;
}

.lec-group-header-wrap:hover {
  background: var(--bg2);
}

.lec-group-header {
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  transition: background .15s;
  display: flex;
}

.lec-group-info {
  text-align: left;
  flex: 1;
  min-width: 0;
}

.lec-group-title {
  color: var(--text1);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  margin-bottom: 3px;
  font-size: .9375rem;
  font-weight: 700;
  display: block;
  overflow: hidden;
}

.lec-group-meta {
  color: var(--text3);
  font-size: .8rem;
}

.lec-group-right {
  flex-shrink: 0;
  align-items: center;
  gap: 10px;
  display: flex;
}

.lec-group-prog-wrap {
  align-items: center;
  gap: 8px;
  display: flex;
}

.lec-group-bar {
  background: var(--bg3);
  border-radius: 999px;
  width: 80px;
  height: 5px;
  overflow: hidden;
}

.lec-group-bar-fill {
  background: var(--accent);
  border-radius: 999px;
  height: 100%;
}

.lec-group-pct {
  color: var(--accent);
  text-align: right;
  min-width: 36px;
  font-size: .8125rem;
  font-weight: 700;
}

.lec-group-icon {
  width: 16px;
  height: 16px;
  stroke: var(--text3);
  fill: none;
  flex-shrink: 0;
  margin-left: 8px;
  transition: transform .2s;
}

.lec-group-header.open .lec-group-icon {
  transform: rotate(180deg);
}

.lec-group-toolbar {
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  display: flex;
}

.lec-group-total {
  color: var(--text2);
  font-size: .8125rem;
}

.lec-group-total strong {
  color: var(--text1);
  font-weight: 700;
}

@media (max-width: 768px) {
  .lec-selects {
    gap: 6px;
  }

  .lec-selects .form-select {
    flex: 1;
    min-width: 90px;
  }

  .lec-selects .bbs-search-input-wrap {
    flex: unset;
    width: 100%;
  }

  .lec-group-bar {
    width: 50px;
  }

  .lec-group-title {
    font-size: .875rem;
  }

  .lec-group-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .lec-toolbar-filters {
    margin-bottom: 10px;
  }

  .lec-info-row:last-child {
    border-bottom: 1px solid var(--border);
  }

  .lec-info-row {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .lec-group-right {
    display: none;
  }

  .lec-toolbar {
    display: block;
  }

  .lec-filter-select {
    width: 100%;
    padding: 8px 25px 8px 10px;
    font-size: .8rem;
  }

  .bbs-search-input-wrap {
    font-size: .8rem;
  }

  .lec-group-toolbar .action-btn.btn-sm, .lec-sec-header .action-btn.btn-sm {
    width: auto;
    font-size: .8rem;
  }
}

.lec-stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  margin: 15px 0;
  display: grid;
}

.lec-stat-card {
  background: var(--surface);
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  display: flex;
}

.lec-stat-card.lec-stat-progress {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.lec-stat-progress-top {
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
}

.lec-stat-icon {
  background: var(--bg3);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  display: flex;
}

.lec-stat-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--text1);
}

.lec-stat-icon.accent {
  background: var(--accent-s);
}

.lec-stat-icon.accent svg {
  stroke: var(--accent);
}

.lec-stat-body {
  min-width: 0;
}

.lec-stat-label {
  color: var(--text1);
  white-space: nowrap;
  margin-bottom: 3px;
  font-size: .75rem;
}

.lec-stat-val {
  color: var(--text1);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.lec-stat-val.accent {
  color: var(--accent);
}

.lec-stat-unit {
  color: var(--text2);
  margin-left: 1px;
  font-size: .7rem;
  font-weight: 400;
}

.lec-stat-bar-wrap {
  width: 100%;
}

.lec-stat-bar {
  background: var(--bg3);
  border-radius: 999px;
  width: 100%;
  height: 4px;
  overflow: hidden;
}

.lec-stat-bar-fill {
  background: var(--accent);
  border-radius: 999px;
  height: 100%;
}

@media (max-width: 1024px) {
  .lec-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .lec-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 17px;
  }
}

.lec-float-bar {
  z-index: 400;
  background: var(--text1);
  color: var(--bg);
  opacity: 0;
  pointer-events: none;
  border-radius: 12px;
  justify-content: space-between;
  justify-self: center;
  align-items: center;
  gap: 12px;
  width: 260px;
  padding: 12px 16px;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .3s;
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  transform: translateY(120px);
  box-shadow: 0 8px 32px #0000004d;
}

.lec-float-bar.show {
  opacity: 1;
  pointer-events: auto;
  justify-self: center;
  transform: translateY(0);
}

.lec-float-bar .d-flex.gap8 {
  text-align: center;
  width: 100%;
  display: block;
}

.lec-float-cnt {
  text-align: center;
  width: 100%;
  margin-bottom: 6px;
  font-size: .875rem;
  display: block;
}

.lec-float-cnt strong {
  color: #7dd3fc;
  font-weight: 700;
}

.lec-float-bar .action-cancel.btn-sm:hover {
  color: var(--text2);
}

@media (max-width: 768px) {
  .lec-group-toolbar .action-btn.btn-sm, .lec-sec-header .action-btn.btn-sm {
    display: none;
  }
}

@media (max-width: 480px) {
  .lec-float-bar {
    width: 92%;
  }

  .lec-float-bar .action-btn.btn-sm {
    justify-content: center;
    margin: 3px 0;
  }
}

.pd-crumb {
  color: var(--text1);
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: .8125rem;
  display: flex;
}

.pd-crumb span.sep {
  background: none;
  width: auto;
  height: auto;
  margin: 0;
}

.pd-crumb a {
  color: var(--text1);
  transition: color .15s;
}

.pd-crumb a:hover {
  color: var(--accent);
}

.pd-crumb .now {
  color: var(--text1);
  font-weight: 600;
}

.pd-top {
  grid-template-columns: 440px 1fr;
  gap: 36px;
  margin-bottom: 28px;
  display: grid;
}

.action-btn svg {
  width: 15px;
  height: 15px;
}

.pd-thumb {
  aspect-ratio: 4 / 3;
  background: linear-gradient(145deg, var(--bg3), var(--bg2));
  border-radius: 8px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.pd-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.pd-thumb-empty {
  width: 100%;
  height: 100%;
  color: var(--text1);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.pd-thumb-empty svg {
  width: 48px;
  height: 48px;
  stroke: var(--border2);
  fill: none;
  stroke-width: 1.5px;
}

.pd-thumb-empty span {
  font-size: .8125rem;
}

.pd-thumb-badges {
  gap: 6px;
  display: flex;
  position: absolute;
  top: 14px;
  left: 14px;
}

.pd-info {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.pd-head-row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.pd-cat-badge {
  color: var(--accent);
  background: var(--accent-s);
  border: 1px solid rgba(var(--accent-r),.35);
  border-radius: 999px;
  align-items: center;
  padding: 4px 12px;
  font-size: .75rem;
  font-weight: 700;
  display: inline-flex;
}

.pd-title-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  display: flex;
}

.pd-title {
  width: calc(100% - 180px);
  min-height: 86px;
  color: var(--text1);
  letter-spacing: -.01em;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.4;
}

.pd-title .badge {
  vertical-align: middle;
  margin-left: 8px;
  transform: translateY(-2px);
}

.pd-preview-btn {
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(135deg, #ff5b6a, #e8384c);
  border: none;
  border-radius: 999px;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: .8125rem;
  font-weight: 700;
  transition: transform .15s, box-shadow .15s;
  display: inline-flex;
  box-shadow: 0 4px 12px #e8384c52;
}

.pd-preview-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #e8384c66;
}

.pd-preview-btn svg {
  fill: #fff;
  stroke: none;
  width: 13px;
  height: 13px;
}

.pd-spec-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  display: grid;
}

.pd-spec {
  background: rgba(var(--accent-r),.05);
  text-align: center;
  border-radius: 8px;
  padding: 16px 14px;
  transition: border-color .15s, transform .15s;
}

.pd-spec:hover {
  border-color: rgba(var(--accent-r),.4);
  transform: translateY(-2px);
}

.pd-spec-lbl {
  color: var(--text1);
  margin-bottom: 8px;
  font-size: .8rem;
  font-weight: 600;
}

.pd-spec-val {
  color: var(--text1);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.3;
}

.pd-spec-sub {
  color: var(--text1);
  margin-top: 3px;
  font-size: .8rem;
}

.pd-spec-val .badge {
  vertical-align: middle;
  font-size: .8rem;
}

.pd-meta-row {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 14px 16px;
  display: flex;
}

.pd-meta-item {
  color: var(--text1);
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  display: flex;
}

.pd-meta-item svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 2px;
}

.pd-meta-sep {
  background: var(--border);
  width: 1px;
  height: 12px;
}

.pd-buybox {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  grid-template-columns: 1fr 280px;
  margin-bottom: 10px;
  display: grid;
  overflow: hidden;
}

.pd-buy-items {
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  display: flex;
}

.pd-buy-group-lbl {
  letter-spacing: .06em;
  color: var(--text1);
  text-transform: uppercase;
  margin: 12px 0 6px;
  font-size: .8rem;
  font-weight: 700;
}

.pd-buy-group-lbl:first-child {
  margin-top: 0;
}

.pd-buy-row {
  padding: px;
  border-radius: 8px;
  align-items: center;
  gap: 12px;
  transition: background .12s;
  display: flex;
}

.pd-buy-row:hover {
  background: var(--bg2);
}

.pd-buy-row .custom-check {
  text-align: left;
  flex-direction: row;
  flex: auto;
  justify-content: flex-start;
  align-items: center;
  min-width: 0;
}

.pd-buy-row .item-type {
  flex-shrink: 0;
}

.pd-buy-row .item-name {
  min-width: 0;
  color: var(--text1);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: left;
  flex: 1;
  font-size: .875rem;
  overflow: hidden;
}

.pd-buy-price {
  color: var(--text1);
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
}

.pd-price-origin {
  color: var(--text1);
  font-size: .75rem;
  font-weight: 400;
  text-decoration: line-through;
}

.pd-price-discount {
  color: #e8384c;
  font-size: .75rem;
  font-weight: 700;
}

.pd-buy-divider {
  background: var(--border);
  height: 1px;
  margin: 12px 0;
}

.pd-buy-summary {
  background: var(--bg2);
  text-align: center;
  border-left: 1px solid var(--border);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 26px 24px;
  display: flex;
}

.pd-total-lbl {
  color: var(--text1);
  margin-bottom: 6px;
  font-size: .8125rem;
  font-weight: 600;
}

.pd-total-val {
  color: var(--accent);
  letter-spacing: -.02em;
  margin-bottom: 18px;
  font-size: 1.65rem;
  font-weight: 800;
}

.pd-buy-btns {
  gap: 8px;
  width: 100%;
  display: flex;
}

.pd-buy-btns .action-btn {
  flex: 1;
  justify-content: center;
  padding: 12px 10px;
}

.pd-benefit-link {
  color: var(--text1);
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-bottom: 40px;
  font-size: .8125rem;
  transition: color .15s;
  display: flex;
}

.pd-benefit-link:hover {
  color: var(--accent);
}

.pd-benefit-link svg {
  width: 13px;
  height: 13px;
}

.pd-sec-title {
  color: var(--text1);
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 1.05rem;
  font-weight: 800;
  display: flex;
}

.pd-course-select-row {
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  display: flex;
}

.pd-lec-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.pd-lec-head {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  grid-template-columns: 64px 1fr 130px 100px;
  padding: 12px 18px;
  display: grid;
}

.pd-lec-head > div {
  color: var(--text2);
  text-align: center;
  font-size: .8125rem;
  font-weight: 700;
}

.pd-lec-head > div:nth-child(2) {
  text-align: left;
}

.pd-lec-row {
  border-bottom: 1px solid var(--border);
  grid-template-columns: 64px 1fr 130px 100px;
  align-items: center;
  padding: 14px 18px;
  transition: background .12s;
  display: grid;
}

.pd-lec-row:last-child {
  border-bottom: none;
}

.pd-lec-row:hover {
  background: var(--bg2);
}

.pd-lec-no {
  text-align: center;
  color: var(--text2);
  font-size: .875rem;
  font-weight: 700;
}

.pd-lec-name {
  color: var(--text1);
  font-size: .9rem;
  font-weight: 600;
}

.pd-lec-time {
  text-align: center;
  color: var(--text1);
  font-variant-numeric: tabular-nums;
  font-size: .8125rem;
}

.pd-lec-preview {
  justify-content: center;
  display: flex;
}

.pd-play-btn {
  background: var(--accent-s);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  transition: background .15s, transform .15s;
  display: flex;
}

.pd-play-btn:hover {
  background: var(--accent);
  transform: scale(1.06);
}

.pd-play-btn svg {
  width: 12px;
  height: 12px;
  fill: var(--accent);
  stroke: var(--accent);
  margin-left: 2px;
  transition: fill .15s;
}

.pd-play-btn:hover svg {
  fill: #fff;
}

.course-preview-wrap {
  margin-top: 10px;
  display: inline-block;
  position: relative;
}

.course-preview-wrap .course-links {
  border: none;
  padding: 0;
}

.course-preview-drop {
  z-index: 100;
  background: var(--surface);
  border: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
  border-top: none;
  border-radius: 10px;
  flex-direction: column;
  width: 360px;
  max-height: 180px;
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: calc(100% - 359px);
  right: 0;
  overflow-y: scroll;
  box-shadow: 0 8px 24px #0000001f;
}

.course-preview-drop.open {
  display: block;
}

.preview-panel-header {
  background: var(--accent);
  color: #fff;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: .875rem;
  font-weight: 700;
  display: flex;
}

.preview-panel-header svg {
  stroke: #fff;
  width: 15px;
  height: 15px;
}

.preview-panel-cnt {
  background: #fff3;
  border-radius: 999px;
  margin-left: auto;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 400;
}

.preview-items {
  scrollbar-width: thin;
  scrollbar-color: var(--border2) transparent;
  max-height: 132px;
}

.preview-item {
  color: var(--text1);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  font-size: .8125rem;
  text-decoration: none;
  transition: background .12s;
  display: flex;
}

.preview-item:last-child {
  border-bottom: none;
}

.preview-item:hover {
  background: var(--accent-s);
  color: var(--accent);
}

.preview-item-num {
  color: var(--text3);
  text-align: center;
  flex-shrink: 0;
  width: 20px;
  font-size: .75rem;
  font-weight: 700;
}

.preview-item-name {
  color: var(--text1);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-size: .875rem;
  overflow: hidden;
}

.preview-item:hover .preview-item-name {
  color: var(--accent);
}

.preview-item-play {
  color: var(--accent);
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  font-weight: 600;
  display: inline-flex;
}

.preview-item-play svg {
  width: 12px;
  height: 12px;
  stroke: var(--accent);
}

@media (max-width: 900px) {
  .pd-top {
    grid-template-columns: 1fr;
  }

  .pd-thumb {
    aspect-ratio: 4 / 3;
  }

  .pd-buybox {
    grid-template-columns: 1fr;
  }

  .pd-buy-summary {
    border-left: none;
    border-top: 1px solid var(--border);
  }

  .pd-spec-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .pd-title {
    width: 100%;
    font-size: 1.2rem;
  }

  .pd-title-row {
    flex-direction: column;
    align-items: stretch;
  }

  .pd-preview-btn {
    justify-content: center;
  }

  .pd-spec-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  .pd-spec {
    padding: 12px 6px;
  }

  .pd-spec-val {
    font-size: .95rem;
  }

  .pd-lec-head, .pd-lec-row {
    grid-template-columns: 40px 1fr 80px 56px;
    padding: 12px;
  }

  .pd-buy-items {
    padding: 16px 14px;
  }

  .pd-buy-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .pd-buy-row .custom-check {
    flex-basis: 100%;
  }

  .pd-buy-row .item-name {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }

  .pd-buy-price {
    flex-basis: 100%;
    justify-content: flex-end;
  }

  .pd-buy-summary {
    padding: 20px 16px;
  }

  .pd-meta-row {
    display: block;
  }

  .course-preview-drop {
    width: 100%;
    position: absolute;
    left: 0;
  }

  .pd-meta-sep {
    background: none;
  }
}

@media (max-width: 940px) {
  .lecture-tab-wrap {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .lecture-tabs {
    border-bottom: 1px solid var(--border);
    grid-template-columns: repeat(2, 1fr);
    display: grid;
  }

  .lecture-tab {
    text-align: center;
    border-bottom: none;
    padding: 10px 8px;
    font-size: .855rem;
  }

  .lecture-tab:nth-child(2n) {
    border-right: none;
  }

  .lecture-sort {
    justify-content: flex-end;
    padding: 25px 0 5px;
  }

  .lecture-item {
    flex-wrap: wrap;
    gap: 12px;
  }

  .lecture-actions {
    flex-direction: row;
    width: 100%;
  }

  .lecture-actions .action-btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .mypage-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .mypage-side {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
  }

  .my-user {
    border-bottom: 0;
    margin-bottom: 0;
  }

  .my-nav {
    display: none;
  }

  .my-nav-select {
    width: 100%;
    color: var(--text1);
    background: var(--surface);
    border: 1px solid var(--border2);
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    border-radius: 4px;
    outline: none;
    margin: 0 0 16px;
    padding: 10px 32px 10px 12px;
    font-size: .855rem;
    display: block;
  }

  .my-nav-select:focus {
    border-color: var(--accent);
  }

  .mypage-content {
    padding-top: 20px;
  }

  .board-item {
    gap: 8px;
    padding: 10px;
    display: grid;
  }

  .summary-grid {
    grid-template-columns: 1fr;
  }

  .board-cat {
    width: 100%;
  }

  .board-title {
    font-size: .825rem;
  }

  .lecture-recent-info {
    width: 100%;
    padding-left: 0;
  }

  .lecture-recent {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .lecture-recent .action-btn {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .lec-list-head {
    display: none;
  }

  .lec-list-item {
    padding: 16px;
    display: block;
    position: relative;
  }

  .li-chk {
    position: absolute;
    top: 16px;
    left: 16px;
  }

  .li-no {
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-left: 28px;
    display: flex;
  }

  .li-name {
    margin-bottom: 10px;
  }

  .li-book, .li-note {
    text-align: center;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
    margin-right: 16px;
    display: inline-flex;
  }

  .li-book:before {
    content: "교재 ";
    color: var(--text3);
    text-wrap-mode: nowrap;
    font-size: .755rem;
    font-weight: 700;
  }

  .li-note:before {
    content: "교안 ";
    color: var(--text3);
    text-wrap-mode: nowrap;
    font-size: .755rem;
    font-weight: 700;
  }

  .li-play {
    width: 100%;
  }

  .li-play .d-flex {
    flex-wrap: wrap;
  }

  .li-play .action-btn {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .lec-act-btns .action-btn {
    flex: 1;
    justify-content: center;
  }

  .lec-act-btns {
    width: 100%;
    display: grid;
  }

  .lecture-recent {
    padding: 10px 0 16px;
  }
}

@media (max-width: 320px) {
  .mypage-side {
    display: none;
  }

  .lecture-name {
    font-size: .855rem;
  }

  .lecture-tab {
    padding: 6px 10px;
    font-size: .855rem;
  }
}

.cp-page-header {
  border-bottom: 1px solid var(--text1);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  display: flex;
}

.cp-page-title {
  color: var(--text1);
  font-size: 1.125rem;
  font-weight: 700;
}

.oh-list {
  background-color: var(--bg2);
  flex-direction: column;
  gap: 0;
  padding: 20px;
  display: flex;
}

.oh-group {
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  padding-bottom: 20px;
}

.oh-group:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.oh-group-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  display: flex;
}

.oh-date {
  color: var(--text1);
  margin-bottom: 3px;
  font-size: 1rem;
  font-weight: 700;
  display: block;
}

.oh-orderno {
  color: var(--text3);
  align-items: center;
  gap: 4px;
  font-size: .8125rem;
  display: flex;
}

.oh-copy {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  align-items: center;
  padding: 0;
  transition: color .15s;
  display: inline-flex;
}

.oh-copy:hover {
  color: var(--accent);
}

.oh-copy svg {
  width: 13px;
  height: 13px;
}

.oh-detail-link {
  color: var(--text3);
  flex-shrink: 0;
  align-items: center;
  transition: color .15s;
  display: flex;
}

.oh-detail-link:hover {
  color: var(--accent);
}

.oh-detail-link svg {
  width: 18px;
  height: 18px;
}

.oh-status-group {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.oh-status {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  display: flex;
}

.oh-status-txt {
  color: var(--text2);
  font-size: .875rem;
  font-weight: 700;
}

.oh-status-txt.complete {
  color: var(--accent);
}

.oh-status-txt.cancel {
  color: #ef4444;
}

.oh-status-date {
  color: var(--text3);
  font-size: .8125rem;
}

.oh-product {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  display: flex;
}

.oh-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg3);
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  flex-basis: 80px;
  overflow: hidden;
}

.oh-no-img {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.oh-no-img svg {
  width: 24px;
  height: 24px;
  stroke: var(--border2);
}

.oh-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.oh-product-info {
  flex: 1;
  min-width: 0;
}

.oh-product-sub {
  color: var(--text3);
  margin-bottom: 3px;
  font-size: .75rem;
}

.oh-product-name {
  color: var(--text1);
  margin-bottom: 3px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.4;
}

.oh-product-option {
  color: var(--text3);
  margin-bottom: 5px;
  font-size: .8rem;
}

.oh-product-price {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.oh-price {
  color: var(--text1);
  font-size: .9rem;
  font-weight: 700;
}

.oh-price-origin {
  color: var(--text3);
  font-size: .8rem;
  text-decoration: line-through;
}

.oh-qty {
  color: var(--text3);
  font-size: .8rem;
}

.oh-cart-btn {
  flex-shrink: 0;
  padding: 6px 8px !important;
}

.oh-group-btns {
  gap: 8px;
  padding: 12px 16px;
  display: flex;
}

.oh-group-btns .action-btn {
  flex: 1;
  justify-content: center;
}

@media (max-width: 768px) {
  .oh-product {
    gap: 10px;
    padding: 12px;
  }

  .oh-thumb {
    width: 60px;
    height: 60px;
  }

  .oh-product-name {
    font-size: .875rem;
  }
}

@media (max-width: 480px) {
  .oh-group-header {
    flex-wrap: wrap;
    gap: 6px;
  }

  .oh-group-btns {
    flex-direction: column;
  }

  .oh-group-btns .action-btn {
    width: 100%;
  }

  .cp-page-header .action-btn.btn-sm {
    width: auto;
  }
}

.od-back {
  color: var(--text3);
  align-items: center;
  transition: color .15s;
  display: flex;
}

.od-back:hover {
  color: var(--accent);
}

.od-back svg {
  width: 18px;
  height: 18px;
}

.od-info-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.od-info-row {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  display: flex;
}

.od-info-date {
  color: var(--text3);
  margin-bottom: 4px;
  font-size: .8rem;
}

.od-info-orderno {
  color: var(--text2);
  font-size: .9rem;
}

.od-info-orderno strong {
  color: var(--text1);
  font-weight: 700;
}

.od-info-addr {
  color: var(--text2);
  border-top: 1px solid var(--border);
  padding: 12px 18px;
  font-size: .875rem;
  line-height: 1.6;
}

.od-section-header {
  margin-bottom: 10px;
}

.od-section-title {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.od-acc {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.od-acc-header {
  background: var(--bg2);
  cursor: pointer;
  text-align: left;
  border: none;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  transition: background .12s;
  display: flex;
}

.od-acc-header:hover {
  background: var(--bg3);
}

.od-acc-title {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.od-acc-icon {
  width: 16px;
  height: 16px;
  stroke: var(--text3);
  flex-shrink: 0;
  transition: transform .2s;
}

.od-acc-header:not(.open) .od-acc-icon {
  transform: rotate(180deg);
}

.od-acc-body {
  border-top: 1px solid var(--border);
  padding: 16px 18px;
}

.od-pay-rows {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.od-pay-row {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  display: flex;
}

.od-pay-row:last-child {
  border-bottom: none;
}

.od-pay-row.total {
  border-top: 2px solid var(--text1);
  border-bottom: none;
  margin-top: 4px;
  padding-top: 12px;
}

.od-pay-row.total .od-pay-lbl {
  color: var(--text1);
  font-weight: 700;
}

.od-pay-row.total .od-pay-val {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
}

.od-pay-lbl {
  color: var(--text2);
  font-size: .875rem;
}

.od-pay-val {
  color: var(--text1);
  font-size: .875rem;
  font-weight: 500;
}

.od-pay-val.discount {
  color: #ef4444;
}

.od-card-row {
  border-top: 1px dashed var(--border2);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  display: flex;
}

.od-card-txt {
  color: var(--text3);
  font-size: .8125rem;
}

.od-ship-name {
  color: var(--text1);
  margin-bottom: 4px;
  font-size: .9375rem;
  font-weight: 700;
}

.od-ship-phone {
  color: var(--accent);
  margin-bottom: 4px;
  font-size: .875rem;
}

.od-ship-addr {
  color: var(--text2);
  font-size: .875rem;
  line-height: 1.6;
}

.dlv-info-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 15px;
  padding: 15px;
  display: flex;
}

.dlv-info-row {
  align-items: flex-start;
  gap: 10px;
  display: flex;
}

.dlv-info-label {
  color: var(--text3);
  flex-shrink: 0;
  min-width: 80px;
  font-size: .8125rem;
  font-weight: 600;
}

.dlv-info-val {
  color: var(--text1);
  flex: 1;
  font-size: .875rem;
}

.dlv-tracking-no {
  align-items: center;
  gap: 8px;
  display: flex;
}

.dlv-tracking-no strong {
  color: var(--accent);
  letter-spacing: .04em;
  font-size: .9rem;
}

.dlv-copy-btn {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  align-items: center;
  padding: 0;
  transition: color .15s;
  display: inline-flex;
}

.dlv-copy-btn:hover {
  color: var(--accent);
}

.dlv-copy-btn svg {
  width: 13px;
  height: 13px;
}

.dlv-status-badge {
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
  padding: 8px 14px;
  font-size: .875rem;
  font-weight: 700;
  display: inline-flex;
}

.dlv-status-badge svg {
  width: 15px;
  height: 15px;
}

.dlv-status-badge.complete {
  color: #0ab39c;
  background: #0ab39c1a;
}

.dlv-status-badge.complete svg {
  stroke: #0ab39c;
}

.dlv-status-badge.shipping {
  background: var(--accent-s);
  color: var(--accent);
}

.dlv-status-badge.shipping svg {
  stroke: var(--accent);
}

.dlv-timeline {
  flex-direction: column;
  padding-left: 20px;
  display: flex;
  position: relative;
}

.dlv-timeline:before {
  content: "";
  background: var(--border2);
  width: 1px;
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 6px;
}

.dlv-step {
  gap: 15px;
  padding-bottom: 20px;
  display: flex;
  position: relative;
}

.dlv-step:last-child {
  padding-bottom: 0;
}

.dlv-step-dot {
  border: 2px solid var(--border2);
  background: var(--surface);
  z-index: 1;
  border-radius: 50%;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-top: 3px;
  position: absolute;
  left: -20px;
}

.dlv-step.done .dlv-step-dot {
  background: var(--accent);
  border-color: var(--accent);
}

.dlv-step:first-child .dlv-step-dot {
  background: #0ab39c;
  border-color: #0ab39c;
  width: 15px;
  height: 15px;
  left: -21px;
}

.dlv-step-body {
  flex: 1;
}

.dlv-step-title {
  color: var(--text1);
  margin-bottom: 3px;
  font-size: .875rem;
  font-weight: 700;
}

.dlv-step:not(.done) .dlv-step-title {
  color: var(--text3);
  font-weight: 500;
}

.dlv-step-desc {
  color: var(--text2);
  margin-bottom: 3px;
  font-size: .8125rem;
  line-height: 1.5;
}

.dlv-step:not(.done) .dlv-step-desc {
  color: var(--text3);
}

.dlv-step-date {
  color: var(--text3);
  font-size: .75rem;
}

@media (max-width: 768px) {
  .od-card-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .od-card-row .action-btn {
    justify-content: center;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .od-info-row {
    flex-wrap: wrap;
  }

  .od-acc-header {
    padding: 12px 14px;
  }

  .od-acc-body {
    padding: 14px;
  }
}

.form-wrap {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.form-field {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.form-field-row {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

.form-label {
  color: var(--text1);
  font-size: .875rem;
  font-weight: 600;
}

.form-required {
  color: #ef4444;
  margin-left: 2px;
}

.form-hint {
  color: var(--text3);
  margin-top: 2px;
  font-size: .8rem;
  line-height: 1.5;
}

.form-hint.accent {
  color: var(--accent);
}

.form-hint.error {
  color: #ef4444;
}

.form-hint.success {
  color: #0ab39c;
}

.form-input {
  border: 1px solid var(--border2);
  background: var(--surface);
  width: 100%;
  color: var(--text1);
  border-radius: 6px;
  outline: none;
  padding: 10px;
  font-family: inherit;
  font-size: .82rem;
  line-height: 1.5;
  transition: border-color .15s, box-shadow .15s;
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r), .1);
}

.form-input::placeholder {
  color: var(--text3);
}

.form-input:read-only {
  background: var(--bg2);
  color: var(--text3);
  cursor: not-allowed;
}

.form-input:disabled {
  background: var(--bg3);
  color: var(--text3);
  cursor: not-allowed;
}

.form-input.error {
  border-color: #ef4444;
}

.form-input.error:focus {
  box-shadow: 0 0 0 3px #ef44441a;
}

.form-input.success {
  border-color: #0ab39c;
}

.form-textarea {
  border: 1px solid var(--border2);
  background: var(--surface);
  width: 100%;
  min-height: 120px;
  color: var(--text1);
  resize: vertical;
  border-radius: 6px;
  outline: none;
  padding: 10px 14px;
  font-family: inherit;
  font-size: .9rem;
  line-height: 1.7;
  transition: border-color .15s, box-shadow .15s;
}

.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r), .1);
}

.form-textarea::placeholder {
  color: var(--text3);
}

.form-select {
  border: 1px solid var(--border2);
  background: var(--surface);
  width: 100%;
  color: var(--text1);
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  border-radius: 6px;
  outline: none;
  padding: 10px 36px 10px 14px;
  font-family: inherit;
  font-size: .9rem;
  transition: border-color .15s;
}

.form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r),.1);
}

.form-input-group {
  gap: 5px;
  display: flex;
}

.form-input-group .form-input {
  flex: 1;
}

.form-pw-wrap {
  position: relative;
}

.form-pw-wrap .form-input {
  padding-right: 42px;
}

.form-pw-toggle {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  align-items: center;
  padding: 0;
  transition: color .15s;
  display: flex;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.form-pw-toggle:hover {
  color: var(--text1);
}

.form-pw-toggle svg {
  width: 16px;
  height: 16px;
}

.form-count {
  color: var(--text3);
  text-align: right;
  font-size: .75rem;
}

.form-radio-group {
  flex-wrap: wrap;
  gap: 16px;
  display: flex;
}

.form-check-group {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.form-radio-item, .form-check-item {
  color: var(--text1);
  cursor: pointer;
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  display: inline-flex;
}

.form-radio-item input[type="radio"], .form-check-item input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
  width: 16px;
  height: 16px;
}

.form-section {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.form-section-header {
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  padding-bottom: 12px;
}

.form-section-title {
  color: var(--text1);
  align-items: center;
  gap: 6px;
  font-size: .9375rem;
  font-weight: 700;
  display: flex;
}

.form-divider {
  color: var(--text3);
  align-items: center;
  gap: 12px;
  font-size: .8rem;
  display: flex;
}

.form-divider:before, .form-divider:after {
  content: "";
  background: var(--border);
  flex: 1;
  height: 1px;
}

.form-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
}

.form-btns {
  gap: 8px;
  margin-top: 8px;
  display: flex;
}

.form-btns .action-btn {
  flex: 1;
  justify-content: center;
  padding: 11px 20px;
}

.form-btns.right {
  justify-content: flex-end;
}

.form-btns.right .action-btn {
  flex: 0 auto;
  min-width: 100px;
}

.reg-steps {
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 32px;
  display: flex;
}

@media (max-width: 768px) {
  .form-field-row {
    grid-template-columns: 1fr;
  }

  .form-box {
    padding: 20px 16px;
  }
}

@media (max-width: 480px) {
  .form-btns {
    flex-direction: column-reverse;
  }

  .form-radio-group {
    gap: 10px;
  }

  .form-input-group {
    flex-direction: column;
  }

  .form-input-group .action-btn {
    justify-content: center;
    width: 100%;
  }

  .reg-step-line {
    min-width: 24px;
  }

  .reg-sns-btns {
    flex-direction: column;
  }

  .form-field {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .form-label {
    padding-top: 0;
  }
}

.checkout-layout {
  grid-template-columns: 1fr 400px;
  align-items: start;
  gap: 20px;
  display: grid;
}

.checkout-left {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.ck-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.ck-section-hd {
  border-bottom: 2px solid var(--border2);
  background: var(--bg2);
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  display: flex;
}

.ck-section-title {
  color: var(--text1);
  align-items: center;
  gap: 6px;
  font-size: .9375rem;
  font-weight: 700;
  display: flex;
}

.ck-section-bd {
  padding: 16px 20px;
}

.ck-product-cnt {
  color: var(--accent);
}

.ck-link {
  color: var(--text3);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 4px;
  font-size: .8rem;
  transition: color .15s;
  display: inline-flex;
}

.ck-link:hover {
  color: var(--accent);
}

.ck-link svg {
  width: 13px;
  height: 13px;
}

.ck-toggle-btn {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  align-items: center;
  padding: 0;
  transition: color .15s;
  display: flex;
}

.ck-toggle-btn svg {
  width: 18px;
  height: 18px;
  transition: transform .2s;
}

.ck-toggle-btn.closed svg {
  transform: rotate(180deg);
}

.ck-toggle-btn:hover {
  color: var(--text1);
}

.ck-table-wrap {
  padding: 0 20px;
}

.ck-table {
  border-collapse: collapse;
  width: 100%;
}

.ck-table tr {
  border-bottom: 1px solid var(--border);
}

.ck-table tr:last-child {
  border-bottom: none;
}

.ck-table th {
  width: 120px;
  color: var(--text3);
  text-align: left;
  vertical-align: top;
  flex-shrink: 0;
  padding: 14px 0;
  font-size: .8125rem;
  font-weight: 600;
}

.ck-table td {
  color: var(--text1);
  padding: 14px 0;
  font-size: .875rem;
  line-height: 1.6;
}

.ck-addr-badge {
  color: var(--accent);
  background: var(--accent-s);
  border-radius: 3px;
  margin-bottom: 5px;
  padding: 2px 6px;
  font-size: .7rem;
  font-weight: 700;
  display: inline-block;
}

.ck-products {
  padding: 0 20px;
}

.ck-product {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  display: flex;
}

.ck-product:last-child {
  border-bottom: none;
}

.ck-product-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg3);
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  flex-basis: 80px;
  overflow: hidden;
}

.ck-product-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.product-thumb-no-img {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.ck-product-thumb svg {
  width: 20px;
  height: 20px;
  stroke: var(--border2);
  fill: none;
}

.ck-product-thumb i {
  color: var(--border2);
}

.ck-product-body {
  flex: 1;
  min-width: 0;
}

.ck-product-name {
  color: var(--text1);
  margin-bottom: 3px;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}

.ck-product-opt {
  color: var(--text3);
  margin-bottom: 5px;
  font-size: .8rem;
}

.ck-product-price-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: flex;
}

.ck-price {
  color: var(--text1);
  font-size: .9rem;
  font-weight: 700;
}

.ck-price-origin {
  color: var(--text3);
  font-size: .8rem;
  text-decoration: line-through;
}

.ck-qty {
  color: var(--text3);
  font-size: .8rem;
}

.ck-coupon-top {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  display: flex;
}

.ck-coupon-top-label {
  color: var(--text2);
  font-size: .875rem;
}

.ck-coupon-row {
  padding: 14px 20px;
}

.ck-coupon-btn {
  border: 1px solid var(--border2);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  transition: border-color .15s;
  display: flex;
}

.ck-coupon-btn:hover {
  border-color: var(--accent);
}

.ck-coupon-btn-label {
  color: var(--text2);
  flex-shrink: 0;
  font-size: .875rem;
  font-weight: 600;
}

.ck-coupon-btn-val {
  color: var(--text3);
  flex: 1;
  font-size: .8125rem;
}

.ck-coupon-btn-val strong {
  color: var(--accent);
  font-weight: 700;
}

.ck-coupon-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--text3);
  flex-shrink: 0;
}

.txt-deactivate {
  color: var(--text2) !important;
}

.txt-stress {
  color: var(--accent) !important;
}

.ck-point-balances {
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.ck-point-bal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  flex: 1;
  padding: 10px 14px;
}

.ck-point-bal-label {
  color: var(--text3);
  margin-bottom: 3px;
  font-size: .75rem;
}

.ck-point-bal-val {
  color: var(--text1);
  font-size: .9rem;
  font-weight: 700;
}

.ck-point-input-row {
  gap: 8px;
  display: flex;
}

.ck-point-input {
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--text1);
  border-radius: 6px;
  outline: none;
  flex: 1;
  padding: 10px;
  font-size: .875rem;
  transition: border-color .15s;
}

.ck-point-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r),.1);
}

.ck-pay-method-radios {
  gap: 20px;
  display: flex;
}

.ck-select {
  border: 1px solid var(--border2);
  background: var(--surface);
  width: 100%;
  color: var(--text1);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  border-radius: 6px;
  outline: none;
  padding: 10px 32px 10px 14px;
  font-size: .875rem;
  transition: border-color .15s;
}

.ck-select:focus {
  border-color: var(--accent);
}

.checkout-right {
  align-self: flex-start;
  position: sticky;
  top: 80px;
}

.ck-summary {
  top: calc(var(--header-height) + 16px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: sticky;
  overflow: hidden;
}

.ck-summary-title {
  color: var(--text1);
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
  font-size: .9375rem;
  font-weight: 700;
}

.ck-summary-rows {
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  display: flex;
}

.ck-summary-row {
  color: var(--text1);
  justify-content: space-between;
  align-items: center;
  font-size: .875rem;
  display: flex;
}

.ck-summary-row strong {
  color: var(--text1);
  font-weight: 700;
}

.ck-summary-row.sub {
  padding-left: 12px;
}

.ck-summary-row.sub > span:first-child {
  color: var(--text3);
  font-size: .8rem;
}

.ck-summary-row.sub > span:last-child {
  font-size: .8rem;
}

.ck-summary-total {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  display: flex;
}

.ck-summary-total-label {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.ck-total-price {
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 700;
}

.ck-pay-btn {
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  letter-spacing: .02em;
  border: none;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 15px;
  font-size: 1rem;
  font-weight: 700;
  transition: opacity .15s;
  display: flex;
}

.ck-pay-btn:hover {
  opacity: .88;
}

.ck-pay-btn svg {
  width: 16px;
  height: 16px;
}

.ck-pay-notice {
  color: var(--text3);
  text-align: center;
  padding: 10px 18px;
  font-size: .75rem;
}

.ck-coupon-modal-top {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ck-coupon-discount-summary {
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  overflow: hidden;
}

.ck-coupon-discount-item {
  background: var(--bg2);
  color: var(--text1);
  flex: 1;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  display: flex;
}

.ck-coupon-discount-sep {
  background: var(--border);
  width: 1px;
}

.ck-coupon-product-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  display: flex;
  overflow: hidden;
}

.ck-coupon-product-item {
  align-items: center;
  gap: 10px;
  display: flex;
}

.ck-coupon-product-thumb {
  background: var(--bg3);
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  display: flex;
  overflow: hidden;
}

.ck-coupon-product-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.ck-coupon-product-thumb svg {
  width: 16px;
  height: 16px;
  stroke: var(--border2);
  fill: none;
}

.ck-coupon-product-thumb i {
  color: var(--border2);
}

.ck-coupon-product-info {
  flex: 1;
  min-width: 0;
}

.ck-coupon-status-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  overflow: hidden;
}

.ck-coupon-status-item {
  color: var(--text1);
  background: var(--surface);
  flex: 1;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  display: flex;
}

.ck-coupon-status-item + .ck-coupon-status-item {
  border-left: 1px solid var(--border);
}

.ck-coupon-section-title {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.ck-coupon-result-row {
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  overflow: hidden;
}

.ck-coupon-result-item {
  color: var(--text1);
  background: var(--surface);
  flex: 1;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  display: flex;
}

.ck-coupon-result-item + .ck-coupon-result-item {
  border-left: 1px solid var(--border);
}

.addr-add-btn {
  border: 1.5px dashed rgba(var(--accent-r),.4);
  background: var(--accent-s);
  width: 100%;
  color: var(--accent);
  cursor: pointer;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 13px;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.addr-add-btn:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-r),.1);
}

.addr-add-btn svg {
  width: 15px;
  height: 15px;
}

.addr-list {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.addr-item {
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
}

.addr-item:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(var(--accent-r),.1);
}

.addr-item.selected {
  border-color: var(--accent);
  background: var(--accent-s);
}

.addr-item-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  display: flex;
}

.addr-item-title-row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.addr-icon {
  width: 15px;
  height: 15px;
  stroke: var(--accent);
  flex-shrink: 0;
}

.addr-name {
  color: var(--text1);
  font-size: .9rem;
  font-weight: 700;
}

.addr-item-btns {
  gap: 6px;
  display: flex;
}

.addr-item-body {
  padding: 12px 14px;
}

.addr-item-person {
  color: var(--text1);
  margin-bottom: 4px;
  font-size: .875rem;
  font-weight: 500;
}

.addr-sep {
  color: var(--border2);
  margin: 0 6px;
}

.addr-item-addr {
  color: var(--text2);
  font-size: .8125rem;
}

.addr-item-addr .addr-zip {
  color: var(--text3);
  margin-right: 6px;
}

.addr-item-footer {
  border-top: 1px solid var(--border);
  justify-content: flex-end;
  padding: 8px 14px;
  display: flex;
}

.addr-delete-btn {
  color: var(--text3);
  cursor: pointer;
  background: none;
  border: none;
  font-size: .8rem;
  text-decoration: underline;
  transition: color .15s;
}

.addr-delete-btn:hover {
  color: #ef4444;
}

.ck-pay-method-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-direction: column;
  margin-bottom: 16px;
  display: flex;
  overflow: hidden;
}

.ck-pay-method-item {
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  transition: background .12s;
  display: flex;
}

.ck-pay-method-item:last-child {
  border-bottom: none;
}

.ck-pay-method-item:hover {
  background: var(--bg2);
}

.ck-pay-method-item input[type="radio"] {
  display: none;
}

.ck-pay-method-radio {
  border: 2px solid var(--border2);
  border-radius: 50%;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: all .15s;
  position: relative;
}

.ck-pay-method-item:has(input:checked) .ck-pay-method-radio {
  border-color: var(--accent);
  background: var(--accent);
}

.ck-pay-method-item:has(input:checked) .ck-pay-method-radio:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ck-pay-method-label {
  color: var(--text1);
  font-size: .9rem;
  font-weight: 500;
}

.ck-pay-method-item:has(input:checked) .ck-pay-method-label {
  color: var(--accent);
  font-weight: 700;
}

.ck-pay-tabs {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
}

.ck-pay-tab {
  border: 1.5px solid var(--border2);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: .875rem;
  font-weight: 500;
  transition: all .15s;
  position: relative;
}

.ck-pay-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.ck-pay-tab.active {
  border-color: var(--text1);
  color: var(--text1);
  font-weight: 700;
  box-shadow: 0 1px 4px #0000001a;
}

.ck-tab-badge {
  color: #fff;
  white-space: nowrap;
  background: #ef4444;
  border-radius: 999px;
  padding: 1px 5px;
  font-size: .6rem;
  font-weight: 700;
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
}

.ck-card-selects {
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.ck-card-reg {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  display: flex;
}

.ck-card-reg-txt {
  color: var(--text1);
  font-size: .875rem;
}

.ck-card-reg-sub {
  color: var(--text3);
  margin-top: 2px;
  font-size: .75rem;
}

.ck-virtual-info {
  background: var(--accent-s);
  border: 1px solid rgba(var(--accent-r),.15);
  color: var(--text2);
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: .8125rem;
  display: flex;
}

.ck-transfer-notice {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: .8125rem;
  display: flex;
}

.ck-virtual-info svg, .ck-transfer-notice svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .ck-table-wrap, .ck-products {
    padding: 0 16px;
  }

  .ck-table th {
    width: 90px;
  }

  .ck-coupon-status-row {
    flex-direction: column;
  }

  .ck-coupon-status-item + .ck-coupon-status-item {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 480px) {
  .ck-pay-tabs {
    gap: 4px;
  }

  .ck-coupon-discount-summary {
    flex-direction: column;
  }

  .ck-coupon-discount-sep {
    width: 100%;
    height: 1px;
  }
}

.dv-summary-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  display: grid;
}

.dv-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  display: flex;
}

.dv-summary-card.accent-card {
  border: 1px solid var(--border);
  background: rgba(var(--accent-r),.1);
}

.dv-summary-icon {
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  display: flex;
}

.dv-summary-icon svg {
  width: 22px;
  height: 22px;
}

.dv-summary-icon.pc {
  background: #6366f11a;
}

.dv-summary-icon.pc svg {
  stroke: #6366f1;
}

.dv-summary-icon.mobile {
  background: #10b9811a;
}

.dv-summary-icon.mobile svg {
  stroke: #10b981;
}

.dv-summary-icon.refresh {
  background: var(--bg);
}

.dv-summary-icon.refresh svg {
  stroke: var(--accent);
}

.dv-summary-info {
  flex: 1;
  min-width: 0;
}

.dv-summary-label {
  color: var(--text1);
  margin-bottom: 3px;
  font-size: .75rem;
}

.dv-summary-val {
  color: var(--text1);
  font-size: .9375rem;
}

.dv-summary-val strong {
  color: var(--text1);
  font-size: 1.125rem;
  font-weight: 700;
}

.dv-summary-bar-wrap {
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 4px;
  display: flex;
}

.dv-summary-bar {
  background: var(--bg3);
  border-radius: 999px;
  width: 60px;
  height: 5px;
  overflow: hidden;
}

.dv-summary-bar-fill {
  background: var(--accent);
  border-radius: 999px;
  height: 100%;
}

.dv-summary-remain {
  color: var(--text3);
  font-size: .7rem;
}

.dv-notice {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  display: flex;
}

.dv-notice-item {
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.dv-notice-item svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.dv-notice-item p {
  color: var(--text2);
  font-size: .8125rem;
  line-height: 1.5;
}

.dv-notice-item strong {
  color: var(--text1);
  font-weight: 700;
}

.dv-type-cell {
  color: var(--text1);
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  display: flex;
}

.dv-type-icon {
  width: 15px;
  height: 15px;
}

.dv-type-icon.mobile {
  stroke: #10b981;
}

.dv-type-icon.pc {
  stroke: #6366f1;
}

.dv-model-cell {
  align-items: center;
  gap: 8px;
  display: flex;
}

.dv-model-name {
  color: var(--text1);
  font-size: .875rem;
  font-weight: 500;
}

.dv-current-badge {
  font-size: .65rem;
}

.dv-release-btn {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  transition: all .15s;
  display: inline-flex;
}

.dv-release-btn:hover {
  background: var(--bg3);
  color: #ef4444;
}

.dv-release-btn svg {
  width: 13px;
  height: 13px;
}

.dv-login-list {
  flex-direction: column;
  gap: 10px;
  margin: 20px 0;
  display: flex;
}

.dv-login-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s;
  overflow: hidden;
}

.dv-login-item.current {
  border-color: rgba(var(--accent-r),.3);
}

.dv-login-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  display: flex;
}

.dv-login-device {
  align-items: center;
  gap: 8px;
  display: flex;
}

.dv-login-icon {
  width: 18px;
  height: 18px;
  stroke: var(--text2);
}

.dv-login-item.current .dv-login-icon {
  stroke: var(--accent);
}

.dv-login-name {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.dv-login-current-badge {
  color: var(--accent);
  font-size: .8125rem;
  font-weight: 700;
}

.dv-login-info {
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  display: flex;
}

.dv-login-row {
  align-items: center;
  gap: 16px;
  display: flex;
}

.dv-login-label {
  color: var(--text3);
  flex-shrink: 0;
  min-width: 90px;
  font-size: .8125rem;
  font-weight: 600;
}

.dv-login-val {
  color: var(--text1);
  font-size: .8125rem;
}

.dv-reset-warn {
  background: #ef44440d;
  border: 1px solid #ef444426;
  border-radius: 8px;
  gap: 14px;
  padding: 16px;
  display: flex;
}

.dv-reset-warn svg {
  stroke: #ef4444;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.dv-reset-title {
  color: var(--text1);
  margin-bottom: 8px;
  font-size: .9375rem;
  font-weight: 700;
}

.dv-reset-desc {
  color: var(--text2);
  font-size: .8125rem;
  line-height: 1.8;
}

@media (max-width: 900px) {
  .dv-summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .dv-summary-grid {
    grid-template-columns: 1fr;
  }

  .dv-summary-bar-wrap {
    display: none;
  }

  .dv-login-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  .dv-login-label {
    min-width: 70px;
  }
}

@media (max-width: 480px) {
  .tabDevice.tab-primary {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .dv-login-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  #deviceTable.table_01 th, #deviceTable.table_01 td {
    padding: 10px;
    display: table-cell;
  }

  #deviceTable.table_01 th:first-child, #deviceTable.table_01 td:first-child {
    display: none;
  }

  #deviceTable .dv-model-cell {
    width: 35%;
  }

  #deviceTable .mi-form-body {
    padding: 0;
  }

  .dv-login-list {
    margin-top: 0;
  }

  .dv-summary-card.accent-card {
    display: block;
  }
}

.login-main {
  min-height: calc(100vh - var(--header-height) - 60px);
  background: var(--bg2);
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  display: flex;
}

.login-wrap {
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 480px;
  display: flex;
}

.login-logo {
  text-align: center;
}

.login-logo-desc {
  color: var(--text3);
  margin-top: 6px;
  font-size: .875rem;
}

.login-box {
  flex-direction: column;
  gap: 0;
  padding: 28px;
  display: flex;
}

.login-submit-btn {
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  font-size: .82rem;
  font-weight: 700;
  transition: opacity .15s;
  display: flex;
}

.login-submit-btn:hover {
  opacity: .88;
}

.login-submit-btn svg {
  width: 16px;
  height: 16px;
}

.login-options {
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  margin-bottom: 4px;
  display: flex;
}

.login-save-id {
  color: var(--text2);
  cursor: pointer;
  gap: 6px;
  font-size: .875rem;
}

.login-save-id input {
  accent-color: var(--accent);
}

.login-find-link {
  color: var(--accent);
  font-size: .8125rem;
  text-decoration: none;
  transition: opacity .15s;
}

.login-find-link:hover {
  opacity: .75;
}

.login-security-hint {
  color: var(--text3);
  margin-bottom: 20px;
  font-size: .75rem;
}

.login-divider {
  margin: 16px 0;
}

.login-sns-btns {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.login-sns-btn {
  cursor: pointer;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px;
  font-size: .82rem;
  font-weight: 600;
  transition: opacity .15s;
  display: flex;
  position: relative;
}

.login-sns-btn:hover {
  opacity: .88;
}

.login-sns-icon {
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  display: flex;
  position: absolute;
  left: 16px;
}

.login-sns-btn.google {
  color: #3c4043;
  border: 1px solid var(--border2);
  background: #fff;
}

.login-sns-btn.google .login-sns-icon {
  background: none;
}

.login-sns-btn.apple {
  color: #fff;
  background: #000;
}

.login-sns-btn.apple .login-sns-icon {
  background: none;
}

.login-sns-btn.kakao {
  color: #191919;
  background: #fee500;
}

.login-sns-btn.kakao .login-sns-icon {
  background: none;
}

.login-sns-btn.naver {
  color: #fff;
  background: #03c75a;
}

.login-sns-btn.naver .login-sns-icon {
  background: none;
}

.login-register-row {
  gap: 8px;
  margin-top: 4px;
  display: flex;
}

.login-register-btn {
  border: 1.5px solid var(--accent);
  color: var(--accent);
  border-radius: 8px;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: 12px;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s;
  display: flex;
}

.login-register-btn:hover {
  background: var(--accent-s);
}

.login-legacy-btn {
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--text2);
  border-radius: 8px;
  flex: 1;
  padding: 12px;
}

.login-legacy-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.modal-backdrop {
  z-index: 900;
  opacity: 0;
  transition: opacity .25s cubic-bezier(.16,1,.3,1), display .25s allow-discrete;
  background: #000000a6;
  display: none;
  position: fixed;
  inset: 0;
}

.modal-backdrop.open {
  opacity: 1;
  display: block;
}

@starting-style {
  .modal-backdrop.open {
    opacity: 0;
  }
}

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  z-index: 901;
  opacity: 0;
  width: 90%;
  max-width: 480px;
  max-height: 90vh;
  transition: opacity .25s cubic-bezier(.16,1,.3,1), transform .25s cubic-bezier(.16,1,.3,1), display .25s allow-discrete;
  border-radius: 12px;
  flex-direction: column;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%, -50%)scale(.92);
  box-shadow: 0 8px 32px #0000002e;
}

.modal.open {
  opacity: 1;
  display: flex;
  transform: translate(-50%, -50%)scale(1);
}

@starting-style {
  .modal.open {
    opacity: 0;
    transform: translate(-50%, -50%)scale(.92);
  }
}

.modal-header {
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  display: flex;
}

.modal-title {
  color: var(--text1);
  font-size: 1rem;
  font-weight: 700;
}

.modal-close {
  cursor: pointer;
  width: 28px;
  height: 28px;
  color: var(--text3);
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: color .15s;
  display: flex;
}

.modal-close:hover {
  background: var(--bg3);
  color: var(--text1);
}

.modal-close svg {
  width: 18px;
  height: 18px;
}

.modal-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.modal-body > * + * {
  margin-top: 14px;
}

.layer-footer {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  display: flex;
}

.login-legacy-modal {
  max-width: 480px !important;
}

.login-legacy-modal-header {
  padding: 20px 20px 0;
}

.login-legacy-close-row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.login-legacy-today {
  color: var(--text3);
  cursor: pointer;
  gap: 6px;
  font-size: .8125rem;
}

.login-legacy-today input {
  accent-color: var(--accent);
}

.login-legacy-title {
  color: var(--text1);
  text-align: center;
  margin-bottom: 10px;
  font-size: 1.125rem;
  font-weight: 700;
}

.login-legacy-desc {
  color: var(--text3);
  text-align: center;
  margin-bottom: 0;
  font-size: .8125rem;
  line-height: 1.7;
}

.login-legacy-modal .modal-body {
  padding-top: 16px;
}

.login-legacy-modal .form-wrap {
  gap: 12px;
}

.login-legacy-modal .login-submit-btn {
  margin-top: 0;
}

@media (max-width: 480px) {
  .login-main {
    align-items: flex-start;
    padding: 32px 16px 24px;
  }

  .login-box {
    padding: 20px 16px;
  }

  .login-register-row {
    flex-direction: column;
  }
}

.modal-alert {
  text-align: center;
  max-width: 340px;
}

.modal-alert .modal-body {
  padding: 28px 24px 24px;
}

.modal-alert-icon {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: flex;
}

.modal-alert-icon svg {
  width: 26px;
  height: 26px;
}

.modal-alert-icon.info {
  background: var(--accent-s);
  color: var(--accent);
}

.modal-alert-icon.success {
  color: #16a34a;
  background: #16a34a1a;
}

.modal-alert-icon.warning {
  color: #d97706;
  background: #d977061a;
}

.modal-alert-icon.danger {
  color: #dc2626;
  background: #dc26261a;
}

[data-theme="dark"] .modal-alert-icon.success {
  color: #4ade80;
  background: #22c55e26;
}

[data-theme="dark"] .modal-alert-icon.warning {
  color: #facc15;
  background: #eab30826;
}

[data-theme="dark"] .modal-alert-icon.danger {
  color: #f87171;
  background: #ef444426;
}

.modal-alert-title {
  color: var(--text1);
  margin-bottom: 8px;
  font-size: 1.0625rem;
  font-weight: 700;
}

.modal-alert-msg {
  color: var(--text2);
  margin-bottom: 22px;
  font-size: .875rem;
  line-height: 1.6;
}

.modal-alert-actions {
  gap: 8px;
  display: flex;
}

.modal-alert-actions .action-btn {
  flex: 1;
  justify-content: center;
}

.toast-container {
  z-index: 1000;
  pointer-events: none;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
  display: flex;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
}

.toast {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  opacity: 0;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  min-width: 280px;
  max-width: 360px;
  padding: 14px 16px;
  transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
  display: flex;
  transform: translateY(16px)scale(.96);
  box-shadow: 0 8px 24px #0000001f;
}

.toast.show {
  opacity: 1;
  transform: translateY(0)scale(1);
}

.toast.hide {
  opacity: 0;
  transform: translateY(16px)scale(.96);
}

.toast-icon {
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  display: flex;
}

.toast-icon svg {
  width: 12px;
  height: 12px;
}

.toast-icon.info {
  background: var(--accent-s);
  color: var(--accent);
}

.toast-icon.success {
  color: #16a34a;
  background: #16a34a1a;
}

.toast-icon.warning {
  color: #d97706;
  background: #d977061a;
}

.toast-icon.danger {
  color: #dc2626;
  background: #dc26261a;
}

[data-theme="dark"] .toast-icon.success {
  color: #4ade80;
  background: #22c55e26;
}

[data-theme="dark"] .toast-icon.warning {
  color: #facc15;
  background: #eab30826;
}

[data-theme="dark"] .toast-icon.danger {
  color: #f87171;
  background: #ef444426;
}

.toast-msg {
  color: var(--text1);
  flex: 1;
  font-size: .8125rem;
  line-height: 1.5;
}

.toast-close {
  cursor: pointer;
  width: 18px;
  height: 18px;
  color: var(--text3);
  background: none;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 0;
  display: flex;
}

.toast-close svg {
  width: 12px;
  height: 12px;
}

@media (max-width: 480px) {
  .toast-container {
    bottom: 12px;
    left: 12px;
    right: 12px;
    transform: none;
  }

  .toast {
    width: 100%;
    min-width: 0;
    max-width: none;
  }
}

.ag-demo-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
  display: grid;
}

.ag-demo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  display: flex;
}

.ag-demo-card p {
  color: var(--text2);
  font-size: .8125rem;
  line-height: 1.5;
}

.ag-code {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text1);
  white-space: pre;
  border-radius: 10px;
  margin-bottom: 28px;
  padding: 16px 18px;
  font-family: ui-monospace, SF Mono, Consolas, monospace;
  font-size: .8125rem;
  line-height: 1.7;
  overflow-x: auto;
}

.ag-demo-card .action-btn.btn-sm {
  padding: 12px;
}

.fa-tab-wrap {
  background: var(--bg3);
  border-radius: 10px;
  gap: 4px;
  margin-bottom: 0;
  padding: 4px;
  display: flex;
}

.fa-tab {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  border-radius: 8px;
  flex: 1;
  padding: 10px 0;
  font-size: .9375rem;
  font-weight: 600;
  transition: all .2s;
}

.fa-tab.active {
  background: var(--surface);
  color: var(--text1);
  box-shadow: 0 1px 4px #0000001a;
}

.fa-method-tabs {
  gap: 8px;
  margin-bottom: 20px;
  display: flex;
}

.fa-method-tab {
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text3);
  cursor: pointer;
  border-radius: 8px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.fa-method-tab svg {
  width: 15px;
  height: 15px;
}

.fa-method-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.fa-method-tab.active {
  border-color: var(--accent);
  background: var(--accent-s);
  color: var(--accent);
}

.fa-timer {
  color: #ef4444;
  white-space: nowrap;
  flex-shrink: 0;
  align-items: center;
  padding: 0 4px;
  font-size: .8125rem;
  font-weight: 700;
  display: inline-flex;
}

.fa-result {
  text-align: center;
  padding: 8px 0 4px;
}

.fa-result-icon {
  justify-content: center;
  margin-bottom: 14px;
  display: flex;
}

.fa-result-icon.success svg {
  stroke: #0ab39c;
  width: 52px;
  height: 52px;
}

.fa-result-label {
  color: var(--text1);
  margin-bottom: 6px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}

.fa-result-value {
  color: var(--accent);
  letter-spacing: .05em;
  margin-bottom: 6px;
  font-size: 1.5rem;
  font-weight: 700;
}

.fa-result-desc {
  color: var(--text3);
  margin-bottom: 20px;
  font-size: .8125rem;
}

.fa-result-btns {
  justify-content: center;
  gap: 8px;
  display: flex;
}

.fa-bottom-links {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.fa-bottom-link {
  color: var(--text3);
  align-items: center;
  gap: 4px;
  font-size: .8125rem;
  text-decoration: none;
  transition: color .15s;
  display: inline-flex;
}

.fa-bottom-link:hover {
  color: var(--accent);
}

.fa-bottom-link svg {
  width: 13px;
  height: 13px;
}

.sub-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 12px;
  overflow: hidden;
}

.sub-item.expired {
  opacity: .7;
}

.sub-item-header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  display: flex;
}

.sub-item-plan {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.sub-item-date {
  color: var(--text3);
  font-size: .8125rem;
}

.sub-item-date strong {
  color: var(--text1);
  margin-left: 4px;
}

.sub-item-body {
  padding: 18px 20px;
}

.sub-info-grid {
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-direction: column;
  gap: 0;
  display: flex;
  overflow: hidden;
}

.sub-info-row {
  border-bottom: 1px solid var(--border);
  align-items: center;
  padding: 11px 16px;
  display: flex;
}

.sub-info-row:last-child {
  border-bottom: none;
}

.sub-info-row:hover {
  background: var(--bg2);
}

.sub-info-label {
  color: var(--text3);
  flex-shrink: 0;
  min-width: 110px;
  font-size: .8125rem;
  font-weight: 600;
}

.sub-info-val {
  color: var(--text1);
  flex: 1;
  font-size: .875rem;
}

.sub-info-price {
  color: var(--accent);
  font-weight: 700;
}

.sub-info-card {
  align-items: center;
  gap: 6px;
  display: flex;
}

.sub-info-card svg {
  width: 14px;
  height: 14px;
  stroke: var(--text3);
}

.sub-card-change {
  color: var(--accent);
  cursor: pointer;
  margin-left: 8px;
  font-size: .75rem;
  text-decoration: underline;
}

.sub-card-change:hover {
  opacity: .75;
}

.sub-item-acc {
  border-top: 1px solid var(--border);
}

.sub-acc-btn {
  cursor: pointer;
  width: 100%;
  color: var(--text2);
  background: none;
  border: none;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  font-size: .875rem;
  font-weight: 600;
  transition: background .12s;
  display: flex;
}

.sub-acc-btn:hover {
  background: var(--bg2);
}

.sub-acc-cnt {
  background: var(--accent-s);
  width: 18px;
  height: 18px;
  color: var(--accent);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  margin-left: 4px;
  font-size: .7rem;
  font-weight: 700;
  display: inline-flex;
}

.sub-acc-icon {
  width: 15px;
  height: 15px;
  stroke: var(--text3);
  transition: transform .2s;
}

.sub-acc-btn.open .sub-acc-icon {
  transform: rotate(180deg);
}

.sub-acc-body {
  padding: 0 20px 16px;
}

.sub-cancel-info {
  background: #ef44440d;
  border: 1px solid #ef444426;
  border-radius: 8px;
  gap: 14px;
  padding: 16px;
  display: flex;
}

.sub-cancel-info svg {
  stroke: #ef4444;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 2px;
}

.sub-cancel-title {
  color: var(--text1);
  margin-bottom: 8px;
  font-size: .9375rem;
  font-weight: 700;
}

.sub-cancel-desc {
  color: var(--text2);
  font-size: .8125rem;
  line-height: 1.7;
}

@media (max-width: 768px) {
  .sub-item-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .sub-info-label {
    min-width: 90px;
  }

  .sub-acc-body {
    padding: 0 14px 14px;
  }
}

@media (max-width: 480px) {
  .sub-info-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  .sub-info-label {
    min-width: 100%;
  }
}

.sp-slide-item {
  flex: 0 0 calc(33.3333% - 13.3333px);
  min-width: 0;
}

@media (max-width: 1024px) {
  .sp-slide-item {
    flex: 0 0 calc(50% - 10px);
  }
}

@media (max-width: 640px) {
  .sp-slide-item {
    flex: 0 0 100%;
  }
}

.tc-slider-wrap.no-slide .tc-slider-btn, .tc-slider-wrap.no-slide .tc-slider-dots {
  display: none;
}

.sp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-direction: column;
  height: 100%;
  padding: 28px 24px 24px;
  transition: box-shadow .2s, border-color .2s;
  display: flex;
}

.sp-card:hover {
  border-color: var(--border2);
  box-shadow: var(--shadow);
}

.sp-card-badge {
  justify-content: center;
  margin-bottom: 14px;
  display: flex;
}

.sp-card-title {
  color: var(--text1);
  text-align: center;
  margin-bottom: 18px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
}

.sp-card-divider {
  border-top: 1px solid var(--border);
  margin: 0 0 16px;
}

.sp-card .course-price-option {
  margin-bottom: 18px;
}

.sp-card .sub-info-grid {
  margin-bottom: 20px;
}

.sp-card .sub-info-val {
  text-align: right;
}

.sp-info-btn {
  vertical-align: middle;
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  padding: 0;
  display: inline-flex;
}

.sp-info-btn svg {
  width: 13px;
  height: 13px;
  stroke: var(--text3);
  transition: stroke .15s;
}

.sp-info-btn:hover svg {
  stroke: var(--accent);
}

.sp-include-modal {
  max-width: 380px;
}

.sp-include-modal .modal-body {
  padding: 22px 20px 20px;
  position: relative;
}

.sp-include-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.sp-include-head {
  align-items: center;
  gap: 7px;
  margin: 6px 0 14px;
  display: flex;
}

.sp-include-bar {
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
  width: 3px;
  height: 14px;
}

.sp-include-title {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.sp-include-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.sp-include-list-head {
  background: var(--bg2);
  text-align: center;
  color: var(--text2);
  padding: 10px;
  font-size: .8125rem;
  font-weight: 700;
}

.sp-include-item {
  text-align: center;
  color: var(--text1);
  border-top: 1px solid var(--border);
  padding: 13px 10px;
  font-size: .875rem;
}

.sp-include-confirm {
  text-align: center;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 13px;
  font-size: .9375rem;
  font-weight: 700;
  display: block;
}

.sp-card-cta {
  margin-top: auto;
}

.sp-card-price-row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.sp-card-price-label {
  color: var(--text3);
  font-size: .8125rem;
}

.sp-card-price-val {
  font-size: 1.0625rem;
}

.sp-card-cta .action-btn {
  justify-content: center;
  width: 100%;
}

@media (max-width: 640px) {
  .sp-card {
    padding: 22px 18px 18px;
  }
}

.sub-product-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-direction: column;
  padding: 18px;
  display: flex;
}

.sub-product-name {
  color: var(--accent);
  margin-bottom: 14px;
  font-size: 1rem;
  font-weight: 700;
}

.sub-product-info {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.sub-product-row {
  align-items: center;
  display: flex;
}

.sub-product-label {
  color: var(--text3);
  min-width: 120px;
  font-size: .8125rem;
}

.sub-product-val {
  color: var(--text2);
  font-size: .875rem;
}

.sub-product-price {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.sub-card-list {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.sub-card-item {
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  transition: border-color .15s, background .15s;
  display: flex;
}

.sub-card-item:hover {
  border-color: var(--border2);
}

.sub-card-item:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-s);
}

.sub-card-item input[type="radio"] {
  display: none;
}

.sub-card-radio {
  border: 2px solid var(--border2);
  border-radius: 50%;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transition: all .15s;
  position: relative;
}

.sub-card-item:has(input:checked) .sub-card-radio {
  border-color: var(--accent);
  background: var(--accent);
}

.sub-card-item:has(input:checked) .sub-card-radio:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sub-card-info {
  flex: 1;
  align-items: center;
  gap: 10px;
  display: flex;
}

.sub-card-icon {
  width: 16px;
  height: 16px;
  stroke: var(--text3);
  flex-shrink: 0;
}

.sub-card-item:has(input:checked) .sub-card-icon {
  stroke: var(--accent);
}

.sub-card-name {
  color: var(--text1);
  font-size: .9rem;
  font-weight: 700;
}

.sub-card-num {
  color: var(--text3);
  font-size: .8rem;
}

.sub-card-empty {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 0;
  display: flex;
}

.sub-card-empty svg {
  width: 32px;
  height: 32px;
  stroke: var(--text3);
}

.sub-card-empty p {
  color: var(--text3);
  font-size: .875rem;
}

.sub-agree-row {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  padding: 14px 18px;
}

.sub-agree-check {
  cursor: pointer;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.sub-agree-check input[type="checkbox"] {
  accent-color: var(--accent);
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 2px;
}

.sub-agree-txt {
  color: var(--text2);
  font-size: .8125rem;
  line-height: 1.5;
}

.sub-pay-btns {
  gap: 8px;
  padding: 14px 18px;
  display: flex;
}

.sub-pay-btn {
  flex: 1;
  justify-content: center;
  padding: 12px;
  font-size: .9rem;
  font-weight: 600;
}

.sub-coupon-list {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.sub-coupon-item {
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  transition: border-color .15s;
  overflow: hidden;
}

.sub-coupon-item:hover {
  border-color: var(--border2);
}

.sub-coupon-item.selected {
  border-color: var(--accent);
}

.sub-coupon-item-top {
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  display: flex;
}

.sub-coupon-radio {
  border: 2px solid var(--border2);
  border-radius: 50%;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  transition: all .15s;
  position: relative;
}

.sub-coupon-item.selected .sub-coupon-radio {
  border-color: var(--accent);
  background: var(--accent);
}

.sub-coupon-item.selected .sub-coupon-radio:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sub-coupon-info {
  flex: 1;
  min-width: 0;
}

.sub-coupon-amount {
  color: var(--accent);
  margin-bottom: 3px;
  font-size: 1rem;
  font-weight: 700;
}

.sub-coupon-name {
  color: var(--text1);
  margin-bottom: 2px;
  font-size: .875rem;
  font-weight: 600;
}

.sub-coupon-desc {
  color: var(--text3);
  font-size: .8rem;
}

.sub-coupon-item-bottom {
  border-top: 1px dashed var(--border);
  background: var(--bg2);
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  display: flex;
}

.sub-coupon-expire {
  color: var(--text3);
  font-size: .75rem;
}

@media (max-width: 1024px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .ck-summary {
    position: static;
  }
}

@media (max-width: 768px) {
  .ck-section-bd {
    padding: 14px 16px;
  }

  .sub-product-label {
    min-width: 100px;
  }
}

.pm-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.pm-section-header {
  border-bottom: 2px solid var(--border2);
  background: var(--bg2);
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  display: flex;
}

.pm-section-icon {
  width: 16px;
  height: 16px;
  stroke: var(--accent);
}

.pm-section-title {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.pm-add-btn {
  border: 1.5px dashed rgba(var(--accent-r),.4);
  background: var(--accent-s);
  width: calc(100% - 40px);
  color: var(--accent);
  cursor: pointer;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 16px 20px;
  padding: 12px;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.pm-add-btn:hover {
  border-color: var(--accent);
  background: rgba(var(--accent-r),.1);
}

.pm-add-btn svg {
  width: 15px;
  height: 15px;
}

.pm-table-wrap {
  padding: 0 20px 20px;
}

.pm-card-name {
  color: var(--text1);
  font-weight: 600;
}

.pm-card-num {
  color: var(--text2);
  font-family: monospace;
  font-size: .8125rem;
}

.pm-card-date {
  color: var(--text3);
  font-size: .8125rem;
}

.pm-card-del-cell {
  text-align: center;
}

.pm-del-btn {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  transition: all .15s;
  display: inline-flex;
}

.pm-del-btn:hover {
  background: var(--bg3);
  color: #ef4444;
}

.pm-del-btn svg {
  width: 14px;
  height: 14px;
}

.pm-empty {
  color: var(--text3);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 40px 0;
  display: flex;
}

.pm-empty svg {
  width: 36px;
  height: 36px;
  stroke: var(--text3);
}

.pm-empty p {
  font-size: .875rem;
}

.pm-card-num-inputs {
  align-items: center;
  gap: 6px;
  display: flex;
}

.pm-card-input {
  text-align: center;
  width: 70px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.pm-card-sep {
  color: var(--text3);
  flex-shrink: 0;
  font-size: 1rem;
}

.pm-security-notice {
  background: var(--accent-s);
  border: 1px solid rgba(var(--accent-r),.15);
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  display: flex;
}

.pm-security-notice svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  flex-shrink: 0;
}

.pm-security-notice p {
  color: var(--accent);
  font-size: .8rem;
}

@media (max-width: 768px) {
  .pm-card-num-inputs {
    flex-wrap: wrap;
  }

  .pm-card-input {
    width: calc(50% - 20px) !important;
  }
}

@media (max-width: 480px) {
  .table_01 th:nth-child(3), .table_01 td:nth-child(3) {
    display: none;
  }
}

.bbs-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

.bbs-table thead tr {
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--border);
}

.bbs-table th {
  color: var(--text2);
  background: var(--bg2);
  text-align: center;
  padding: 12px 10px;
  font-size: .8125rem;
  font-weight: 700;
}

.bbs-table th:nth-child(2) {
  text-align: left;
}

.bbs-table td {
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  text-align: center;
  vertical-align: middle;
  padding: 13px 10px;
  font-size: .875rem;
}

.bbs-table tr:hover td {
  background: var(--bg2);
}

.bbs-table td:nth-child(2) {
  text-align: left;
}

.bbs-empty {
  text-align: center;
  color: var(--text3);
  padding: 40px 0;
  font-size: .9rem;
}

.bbs-col-num {
  width: 70px;
}

.bbs-col-date {
  width: 120px;
}

.bbs-col-views {
  width: 100px;
}

@media (max-width: 768px) {
  .bbs-table th:nth-child(4), .bbs-table td:nth-child(4), .bbs-col-views {
    display: none;
  }
}

@media (max-width: 480px) {
  .bbs-table th, .bbs-table td {
    padding: 11px 8px;
    font-size: .8125rem;
  }

  .bbs-table th:first-child, .bbs-table td:first-child, .bbs-col-num {
    display: none;
  }
}

.board-view-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.board-view-header {
  border-bottom: 1px solid var(--border);
  padding: 20px 25px;
}

.board-view-title {
  color: var(--text1);
  margin-bottom: 12px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

.board-view-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  display: flex;
}

.board-view-meta-item {
  color: var(--text3);
  align-items: center;
  gap: 4px;
  font-size: .8125rem;
  display: flex;
}

.board-view-meta-item svg {
  width: 12px;
  height: 12px;
}

.board-view-meta-sep {
  color: var(--border2);
}

.board-view-content {
  color: var(--text1);
  min-height: 160px;
  padding: 25px;
  font-size: .9375rem;
  line-height: 1.9;
}

.board-view-attach {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  align-items: center;
  gap: 10px;
  padding: 15px 25px;
  display: flex;
}

.board-view-attach-label {
  color: var(--text3);
  flex-shrink: 0;
  font-size: .8125rem;
  font-weight: 600;
}

.board-view-attach-file {
  color: var(--accent);
  align-items: center;
  gap: 5px;
  font-size: .8125rem;
  text-decoration: none;
  display: inline-flex;
}

.board-view-attach-file svg {
  width: 13px;
  height: 13px;
}

.board-nav {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.board-nav-item {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 15px;
  padding: 13px 20px;
  text-decoration: none;
  transition: background .12s;
  display: flex;
}

.board-nav-item:last-child {
  border-bottom: none;
}

.board-nav-item:hover {
  background: var(--bg2);
}

.board-nav-label {
  color: var(--text3);
  flex-shrink: 0;
  min-width: 40px;
  font-size: .75rem;
  font-weight: 700;
}

.board-nav-title {
  color: var(--text1);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: .875rem;
  font-weight: 600;
  overflow: hidden;
}

.board-nav-date {
  color: var(--text3);
  flex-shrink: 0;
  font-size: .75rem;
}

.bbs-search-bar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
}

.bbs-search-inner {
  align-items: center;
  gap: 8px;
  display: flex;
}

.bbs-search-input-wrap {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 6px;
  flex: 1;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}

.bbs-search-input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r),.1);
}

.bbs-search-input-wrap svg {
  width: 15px;
  height: 15px;
  stroke: var(--text3);
  flex-shrink: 0;
}

.bbs-search-input {
  color: var(--text1);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  padding: 9px 0;
  font-family: inherit;
  font-size: .875rem;
}

.bbs-search-input::placeholder {
  color: var(--text3);
}

.bbs-search-btn {
  flex-shrink: 0;
}

.bbs-total {
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
  font-size: .8125rem;
}

.bbs-total strong {
  color: var(--text1);
  font-weight: 700;
}

.bbs-search-type, .qna-search-type {
  flex-shrink: 0;
  width: 110px;
}

@media (max-width: 768px) {
  .bbs-search-inner {
    flex-wrap: wrap;
  }

  .bbs-search-input-wrap {
    width: 100%;
  }

  .bbs-search-btn {
    justify-content: center;
    width: 100%;
  }

  .qna-search-type {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .bbs-search-type, .qna-search-type {
    width: 100%;
  }
}

.qna-form {
  flex-direction: column;
  gap: 0;
  display: flex;
}

.qna-field {
  border-bottom: 1px solid var(--border);
  grid-template-columns: 100px 1fr;
  align-items: start;
  padding: 15px 0;
  display: grid;
}

.qna-field:last-of-type {
  border-bottom: none;
}

.qna-label {
  color: var(--text2);
  padding-top: 8px;
  font-size: .875rem;
  font-weight: 600;
}

.qna-required {
  color: #ef4444;
  margin-left: 2px;
}

.qna-input-wrap {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.qna-input-wrap .custom-check {
  flex-direction: row;
}

.qna-input {
  border: 1px solid var(--border2);
  background: var(--surface);
  width: 100%;
  color: var(--text1);
  border-radius: 6px;
  outline: none;
  padding: 9px 12px;
  font-family: inherit;
  font-size: .875rem;
  transition: border-color .15s;
}

.qna-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r),.1);
}

.qna-input::placeholder {
  color: var(--text3);
}

.qna-textarea {
  border: 1px solid var(--border2);
  background: var(--surface);
  width: 100%;
  min-height: 160px;
  color: var(--text1);
  resize: vertical;
  border-radius: 6px;
  outline: none;
  padding: 12px;
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.7;
  transition: border-color .15s;
}

.qna-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r),.1);
}

.qna-textarea::placeholder {
  color: var(--text3);
}

.qna-count {
  color: var(--text3);
  text-align: right;
  font-size: .75rem;
}

.qna-divider {
  background: var(--border);
  height: 1px;
  margin: 20px 0;
}

.qna-product-btn {
  border: 1px solid var(--border2);
  background: var(--surface);
  width: 100%;
  color: var(--text3);
  cursor: pointer;
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: .875rem;
  transition: border-color .15s;
  display: flex;
}

.qna-product-btn:hover {
  border-color: var(--accent);
}

.qna-product-btn svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.qna-product-item {
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 12px;
  margin-bottom: 5px;
  padding: 12px 14px;
  transition: all .15s;
  display: flex;
}

.qna-file-area {
  border: 1.5px dashed var(--border2);
  cursor: pointer;
  color: var(--text3);
  border-radius: 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 20px;
  font-size: .8125rem;
  transition: all .15s;
  display: flex;
}

.qna-file-area:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-s);
}

.qna-file-area svg {
  width: 22px;
  height: 22px;
}

.qna-file-list {
  flex-direction: column;
  gap: 5px;
  margin-top: 8px;
  display: flex;
}

.qna-file-guide {
  color: var(--text3);
  margin-top: 5px;
  font-size: .75rem;
}

.qna-file-remove {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  align-items: center;
  padding: 0;
  transition: color .15s;
  display: inline-flex;
}

.qna-file-remove:hover {
  color: #ef4444;
}

.qna-file-remove svg {
  width: 13px;
  height: 13px;
}

.qna-recv-row {
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
  display: flex;
}

.qna-sms-guide {
  color: var(--text3);
  font-size: .8rem;
}

.qna-phone {
  color: var(--text1);
  font-size: .875rem;
  font-weight: 600;
}

.qna-info-link {
  color: var(--accent);
  cursor: pointer;
  font-size: .8rem;
  text-decoration: underline;
}

.qna-notice {
  background: var(--accent-s);
  border: 1px solid rgba(var(--accent-r),.15);
  color: var(--text2);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: .8125rem;
  line-height: 1.6;
}

.qna-view-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.qna-view-header {
  border-bottom: 1px solid var(--border);
  padding: 20px 25px;
}

.qna-view-title {
  color: var(--text1);
  margin-top: 10px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.5;
}

.qna-view-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  display: flex;
}

.qna-view-meta-item {
  color: var(--text3);
  align-items: center;
  gap: 4px;
  font-size: .8125rem;
  display: flex;
}

.qna-view-meta-item svg {
  width: 12px;
  height: 12px;
}

.qna-view-meta-sep {
  color: var(--border2);
}

.qna-view-product {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 8px;
  padding: 12px 25px;
  display: flex;
}

.qna-view-product-label {
  color: var(--text3);
  flex-shrink: 0;
  font-size: .8125rem;
  font-weight: 600;
}

.qna-view-product-name {
  color: var(--text1);
  font-size: .875rem;
  font-weight: 600;
}

.qna-view-content {
  color: var(--text1);
  min-height: 120px;
  padding: 25px;
  font-size: .9375rem;
  line-height: 1.9;
}

.qna-view-attach {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  align-items: center;
  gap: 10px;
  padding: 12px 25px;
  display: flex;
}

.qna-sec-bar-title {
  color: var(--text1);
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: .9375rem;
  font-weight: 700;
  display: flex;
}

.qna-reply-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.qna-reply-header {
  border-bottom: 1px solid var(--border);
  background: rgba(var(--accent-r),.05);
  justify-content: space-between;
  align-items: center;
  padding: 13px 20px;
  display: flex;
}

.qna-reply-header-title {
  color: var(--accent);
  align-items: center;
  gap: 8px;
  font-size: .875rem;
  font-weight: 700;
  display: flex;
}

.qna-reply-header-title svg {
  width: 15px;
  height: 15px;
  stroke: var(--accent);
}

.qna-reply-inner {
  color: var(--text1);
  padding: 5px 25px;
  font-size: .9375rem;
  line-height: 1.9;
}

.qna-comments {
  margin-bottom: 10px;
}

.qna-comment-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.qna-comment-item {
  border-bottom: 1px solid var(--border);
  gap: 5px;
  padding: 15px 20px;
  display: flex;
}

.qna-comment-item:last-child {
  border-bottom: none;
}

.qna-comment-label {
  color: var(--text3);
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
}

.qna-comment-author {
  color: var(--text1);
  font-size: .875rem;
  font-weight: 700;
}

.qna-comment-date {
  color: var(--text3);
  vertical-align: text-bottom;
  font-size: .75rem;
  display: contents;
}

.qna-comment-text {
  color: var(--text1);
  font-size: .875rem;
  line-height: 1.7;
}

.qna-comment-btn {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  padding: 0;
  font-size: .75rem;
  transition: color .15s;
}

.qna-comment-btn:hover {
  color: #ef4444;
}

.qna-comment-del {
  color: var(--text3);
}

.qna-comment-write {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.qna-comment-footer {
  background: var(--bg2);
  justify-content: space-between;
  align-items: center;
  padding: 8px 14px;
  display: flex;
}

.qna-comment-footer-label {
  color: var(--text3);
  font-size: .8125rem;
}

.qna-comment-input-row {
  gap: 0;
  display: flex;
}

.qna-comment-textarea {
  width: 100%;
  min-height: 70px;
  color: var(--text1);
  background: var(--surface);
  resize: none;
  border: none;
  border-bottom: 1px solid var(--border);
  outline: none;
  flex: 1;
  padding: 12px 14px;
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.6;
  display: block;
}

.qna-list-type {
  color: var(--accent);
  letter-spacing: -.9px;
  margin: 0 6px;
  font-weight: 500;
  display: inline-flex;
}

.qna-list-title {
  color: var(--text1);
  font-size: .9rem;
  font-weight: 600;
}

@media (max-width: 768px) {
  .qna-field {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .qna-label {
    padding-top: 0;
  }

  .board-view-content {
    padding: 20px;
  }

  .qna-comment-item, .qna-comment-author {
    display: block;
  }
}

@media (max-width: 480px) {
  .board-view-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .board-view-meta-sep {
    display: none;
  }
}

.cs-layout {
  grid-template-columns: 200px 1fr;
  align-items: start;
  gap: 32px;
  padding: 40px 0;
  display: grid;
}

@media (max-width: 768px) {
  .cs-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .mypage-side {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
  }
}

.bbs-table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.bbs-notice-row td {
  background: rgba(var(--accent-r),.03);
  font-weight: 500;
}

.bbs-num {
  color: var(--text3);
  font-size: .8125rem;
}

.rv-thumb {
  background: var(--bg3);
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.rv-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.rv-thumb-16x9 {
  aspect-ratio: 4 / 3;
  width: 100%;
}

.rv-thumb-sq {
  width: 90px;
  height: 90px;
}

.rv-thumb-sm {
  width: 70px;
  height: 50px;
}

.rv-thumb-no-img {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.rv-thumb-no-img svg {
  width: 30px;
  height: 30px;
  stroke: var(--border2);
  fill: none;
}

.rv-star.half {
  stroke: #f7b84b;
  fill: url("#halfGrad");
}

.rv-star-lg {
  width: 20px;
  height: 20px;
}

.rv-section-title {
  align-items: center;
  gap: 5px;
  display: flex;
}

.rv-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  display: grid;
}

.rv-card {
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 10px;
  transition: box-shadow .2s, transform .2s;
  overflow: hidden;
}

.rv-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.rv-card.best {
  border-color: #f7b84b;
}

.rv-card-thumb {
  position: relative;
}

.rv-best-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}

.rv-card-body {
  padding: 15px;
}

.rv-card-stars {
  gap: 2px;
  margin-bottom: 10px;
  display: flex;
}

.rv-card-title {
  color: var(--text1);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 5px;
  font-size: .9rem;
  font-weight: 700;
  display: -webkit-box;
  overflow: hidden;
}

.rv-card-content {
  color: var(--text1);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
  font-size: .82rem;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
}

.rv-card-meta {
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  display: flex;
}

.rv-card-course {
  color: var(--accent);
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  width: calc(100% - 100px);
  font-size: .75rem;
  font-weight: 600;
  display: -webkit-box;
  overflow: hidden;
}

.rv-card-author {
  color: var(--text3);
  white-space: nowrap;
  font-size: .75rem;
}

.rv-slider-wrap {
  position: relative;
}

.rv-slider-viewport {
  border-radius: 10px;
  padding: 2px 0;
  overflow: hidden;
}

.rv-slider-track {
  will-change: transform;
  gap: 15px;
  transition: transform .4s cubic-bezier(.25, .46, .45, .94);
  display: flex;
}

.rv-slide-item {
  flex: 0 0 calc(25% - 11.25px);
  min-width: 0;
}

.rv-slider-btn {
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  width: 35px;
  height: 35px;
  box-shadow: var(--shadow);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
  position: absolute;
  top: calc(50% - 25px);
}

.rv-slider-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.rv-slider-btn:hover svg {
  stroke: #fff;
}

.rv-slider-btn svg {
  width: 15px;
  height: 15px;
  stroke: var(--text2);
}

.rv-slider-prev {
  left: -20px;
}

.rv-slider-next {
  right: -20px;
}

.rv-slider-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.rv-slider-btn:disabled:hover {
  background: var(--surface);
  border-color: var(--border);
}

.rv-slider-btn:disabled:hover svg {
  stroke: var(--text2);
}

.rv-slider-dots {
  justify-content: center;
  gap: 5px;
  margin-top: 15px;
  display: flex;
}

.rv-slider-dot {
  background: var(--border2);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  padding: 0;
  transition: all .2s;
}

.rv-slider-dot.active {
  background: var(--accent);
  border-radius: 999px;
  width: 20px;
}

.rv-list-best {
  border: 1px solid #f7b84b;
  border-radius: 8px;
  overflow: hidden;
}

.rv-list-item.best {
  background: #f7b84b0a;
}

.rv-list-course {
  color: var(--accent);
  font-size: .8rem;
  font-weight: 600;
}

.sort-wrap {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.rv-write-course {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  display: flex;
}

.rv-write-course-name {
  color: var(--text1);
  margin-bottom: 5px;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
}

.rv-write-course-teacher {
  color: var(--text3);
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  display: flex;
}

.rv-write-course-teacher svg {
  width: 12px;
  height: 12px;
}

.rv-course-selector {
  cursor: pointer;
  transition: border-color .15s;
}

.rv-course-selector:hover {
  border-color: var(--accent);
}

.qna-product-item {
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  transition: all .15s;
  display: flex;
}

.qna-product-item:hover {
  border-color: var(--accent);
  background: var(--accent-s);
}

.qna-product-item:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-s);
}

.qna-product-item input[type="radio"] {
  accent-color: var(--accent);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.qna-product-item-info {
  flex: 1;
  min-width: 0;
}

.qna-product-item-name {
  color: var(--text1);
  margin-bottom: 3px;
  font-size: .875rem;
  font-weight: 600;
}

.qna-product-item-date {
  color: var(--text3);
  font-size: .75rem;
}

.rv-star-field {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.rv-write-stars {
  gap: 5px;
  display: flex;
}

.rv-write-star {
  cursor: pointer;
  background: none;
  border: none;
  padding: 2px;
  transition: transform .1s;
}

.rv-write-star:hover {
  transform: scale(1.2);
}

.rv-write-star svg {
  width: 35px;
  height: 35px;
  stroke: var(--border2);
  fill: #0000;
  transition: stroke .1s, fill .1s;
}

.rv-write-star.on svg {
  stroke: #f7b84b;
  fill: #f7b84b;
}

.rv-write-score-label {
  color: var(--text2);
  font-size: .9375rem;
  font-weight: 700;
}

.rv-img-upload-area {
  border: 1.5px dashed var(--border2);
  cursor: pointer;
  width: 90px;
  height: 90px;
  color: var(--text3);
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  transition: all .15s;
  display: flex;
}

.rv-img-upload-area:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-s);
}

.rv-img-upload-area svg {
  width: 22px;
  height: 22px;
}

.rv-img-preview-list {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  display: flex;
}

.rv-img-preview-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 90px;
  height: 90px;
  position: relative;
  overflow: hidden;
}

.rv-img-preview-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.rv-img-preview-del {
  cursor: pointer;
  background: #000000a6;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: flex;
  position: absolute;
  top: 5px;
  right: 5px;
}

.rv-img-preview-del svg {
  stroke: #fff;
  width: 10px;
  height: 10px;
}

.rv-admin-field {
  background: rgba(var(--accent-r),.03);
  border-radius: 6px;
  padding: 10px;
}

.rvv-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.rvv-course {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  display: flex;
}

.rvv-course-name {
  color: var(--text1);
  margin-bottom: 5px;
  font-size: .9rem;
  font-weight: 700;
}

.rvv-course-teacher {
  color: var(--text3);
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  display: flex;
}

.rvv-course-teacher svg {
  width: 12px;
  height: 12px;
}

.rvv-header {
  padding: 20px 20px 0;
}

.rvv-stars {
  align-items: center;
  gap: 3px;
  margin-bottom: 10px;
  display: flex;
}

.rvv-score {
  color: #f7b84b;
  margin-left: 5px;
  font-size: .875rem;
  font-weight: 700;
}

.rvv-title {
  color: var(--text1);
  margin-bottom: 10px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.rvv-meta {
  align-items: center;
  gap: 5px;
  display: flex;
}

.rvv-meta-item {
  color: var(--text3);
  align-items: center;
  gap: 5px;
  font-size: .8125rem;
  display: flex;
}

.rvv-meta-item svg {
  width: 12px;
  height: 12px;
}

.rvv-meta-sep {
  color: var(--border2);
}

.rvv-content {
  color: var(--text1);
  border-top: 1px solid var(--border);
  margin-top: 15px;
  padding: 20px;
  font-size: .9375rem;
  line-height: 1.9;
}

.rvv-images {
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 20px 20px;
  display: flex;
}

.rvv-img-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  width: 120px;
  height: 120px;
  transition: opacity .15s;
  overflow: hidden;
}

.rvv-img-item:hover {
  opacity: .85;
}

.rvv-img-item svg {
  width: 30px;
  height: 30px;
  stroke: var(--border2);
}

.rvv-actions {
  border-top: 1px solid var(--border);
  justify-content: center;
  padding: 15px 20px;
  display: flex;
}

.rvv-like-btn {
  border: 1.5px solid var(--border2);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  border-radius: 999px;
  align-items: center;
  gap: 10px;
  padding: 10px 25px;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s;
  display: inline-flex;
}

.rvv-like-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.rvv-like-btn.liked {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.rvv-like-btn svg {
  width: 15px;
  height: 15px;
}

.rvv-like-cnt {
  background: #00000014;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .8rem;
}

.rvv-like-btn.liked .rvv-like-cnt {
  background: #fff3;
}

.rvv-reply {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

.rvv-reply-header {
  border-bottom: 1px solid var(--border);
  background: rgba(var(--accent-r),.05);
  color: var(--accent);
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  font-size: .875rem;
  font-weight: 700;
  display: flex;
}

.rvv-reply-header svg {
  width: 15px;
  height: 15px;
  stroke: var(--accent);
}

.rvv-reply-body {
  padding: 15px 20px;
}

.rvv-reply-meta {
  color: var(--text3);
  margin-bottom: 10px;
  font-size: .8rem;
}

.rvv-reply-content {
  color: var(--text2);
  font-size: .9rem;
  line-height: 1.8;
}

.rvv-nav {
  border: 1px solid var(--border);
  border-radius: 10px;
  grid-template-columns: 1fr 1fr;
  display: grid;
  overflow: hidden;
}

.rvv-nav-item {
  flex-direction: column;
  gap: 5px;
  padding: 15px 20px;
  text-decoration: none;
  transition: background .15s;
  display: flex;
}

.rvv-nav-item:hover {
  background: var(--bg2);
}

.rvv-nav-item.prev {
  border-right: 1px solid var(--border);
}

.rvv-nav-item.next {
  text-align: right;
}

.rvv-nav-label {
  color: var(--text3);
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
}

.rvv-nav-item.next .rvv-nav-label {
  justify-content: flex-end;
}

.rvv-nav-label svg {
  width: 12px;
  height: 12px;
  stroke: var(--text3);
}

.rvv-nav-title {
  color: var(--text1);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 600;
  overflow: hidden;
}

.rvv-nav-date {
  color: var(--text3);
  font-size: .75rem;
}

@media (max-width: 1024px) {
  .rv-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rv-slide-item {
    flex: 0 0 calc(33.3333% - 10px);
  }
}

@media (max-width: 768px) {
  .rv-grid {
    grid-template-columns: 2fr;
  }

  .rv-list-item {
    flex-wrap: wrap;
  }

  .rv-list-meta {
    flex-direction: row;
    justify-content: flex-end;
    width: 100%;
  }

  .rv-slide-item {
    flex: 0 0 calc(50% - 7.5px);
  }

  .rv-slider-prev {
    left: -10px;
  }

  .rv-slider-next {
    right: -10px;
  }

  .rvv-content {
    font-size: .875rem;
  }

  .rvv-img-item {
    width: 90px;
    height: 90px;
  }

  .rvv-title {
    font-size: 1rem;
  }

  .rv-write-course-name {
    font-size: .82rem;
  }
}

@media (max-width: 480px) {
  .rv-list-star-col {
    min-width: 60px;
  }

  .rv-slide-item {
    flex: 0 0 100%;
  }

  .rv-star-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .rv-write-star svg {
    width: 30px;
    height: 30px;
  }

  .rvv-nav {
    grid-template-columns: 1fr;
  }

  .rvv-nav-item.prev {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .rvv-nav-item.next {
    text-align: left;
  }

  .rvv-nav-item.next .rvv-nav-label {
    justify-content: flex-start;
  }
}

.cs-side-phone {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 20px 0;
  padding: 16px;
}

.cs-side-phone-label {
  color: var(--text1);
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-size: .8rem;
  display: flex;
}

.cs-side-phone-num {
  color: var(--accent);
  margin-bottom: 8px;
  font-size: 1.25rem;
  font-weight: 700;
}

.cs-side-phone-time {
  color: var(--text1);
  font-size: .8rem;
  line-height: 1.8;
}

.mi-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.mi-section-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  display: flex;
}

.mi-section-title {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.mi-form-body {
  padding: 20px 18px;
}

.mi-profile-row {
  align-items: center;
  gap: 20px;
  padding: 20px 18px;
  display: flex;
}

.mi-avatar-wrap {
  flex-shrink: 0;
  position: relative;
}

.mi-avatar {
  background: var(--accent-s);
  width: 72px;
  height: 72px;
  color: var(--accent);
  border: 2px solid var(--border);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  overflow: hidden;
}

.mi-avatar img {
  object-fit: cover;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.mi-avatar-btn {
  background: var(--accent);
  border: 2px solid var(--surface);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  transition: opacity .15s;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
}

.mi-avatar-btn:hover {
  opacity: .85;
}

.mi-avatar-btn svg {
  stroke: #fff;
  width: 12px;
  height: 12px;
}

.mi-profile-info {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.mi-profile-name {
  color: var(--text1);
  font-size: 1rem;
  font-weight: 700;
}

.mi-profile-email {
  color: var(--text3);
  font-size: .8125rem;
}

@media (max-width: 768px) {
  .mi-form-body, .mi-profile-row {
    padding: 16px;
  }
}

.detail-tab-panel {
  padding: 25px 0;
}

.breadcrumb {
  color: var(--text3);
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  display: flex;
}

.breadcrumb a {
  color: var(--text3);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--accent);
}

.breadcrumb svg {
  width: 12px;
  height: 12px;
  stroke: var(--text3);
}

.breadcrumb span {
  color: var(--text1);
}

.bd-layout {
  grid-template-columns: 280px 1fr;
  align-items: start;
  gap: 40px;
  display: grid;
}

.bd-thumb-wrap {
  flex-direction: column;
  gap: 10px;
  display: flex;
  position: sticky;
  top: 80px;
}

.bd-thumb {
  aspect-ratio: 3 / 4;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.bd-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.bd-title {
  color: var(--text1);
  margin-bottom: 8px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}

.bd-author {
  color: var(--text2);
  align-items: center;
  gap: 5px;
  margin-bottom: 20px;
  font-size: .9rem;
  display: flex;
}

.bd-author svg {
  width: 14px;
  height: 14px;
}

.bd-meta-grid {
  background: var(--bg2);
  border-radius: 8px;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 16px;
  display: flex;
}

.bd-meta-row {
  align-items: center;
  gap: 10px;
  font-size: .8125rem;
  display: flex;
}

.bd-meta-label {
  color: var(--text3);
  flex-shrink: 0;
  min-width: 60px;
  font-weight: 600;
}

.bd-meta-val {
  color: var(--text1);
}

.bd-price-box {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
  padding: 16px 0;
}

.bd-price-origin {
  color: var(--text3);
  font-size: .9rem;
  text-decoration: line-through;
}

.bd-price {
  color: var(--text1);
  margin-top: 4px;
  font-size: 1.2rem;
  font-weight: 700;
  display: block;
}

.bd-qty-row {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  display: flex;
}

.bd-qty {
  border: 1px solid var(--border2);
  border-radius: 6px;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.bd-qty-btn {
  background: var(--bg2);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  transition: background .15s;
  display: flex;
}

.bd-qty-btn:hover {
  background: var(--bg3);
}

.bd-qty-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--text2);
}

.bd-qty-input {
  text-align: center;
  border: none;
  border-left: 1px solid var(--border2);
  border-right: 1px solid var(--border2);
  background: var(--surface);
  width: 48px;
  height: 36px;
  color: var(--text1);
  font-family: inherit;
  font-size: .9375rem;
  font-weight: 700;
}

.bd-qty-total {
  color: var(--text2);
  font-size: .875rem;
}

.bd-qty-total strong {
  color: var(--accent);
  font-size: 1.125rem;
  font-weight: 700;
}

.bd-btn-group {
  gap: 10px;
  display: flex;
}

.bd-btn-group .action-btn {
  flex: 1;
  justify-content: center;
  padding: 13px;
  font-size: .9375rem;
}

.bd-buy-btn {
  flex: 2 !important;
}

.bd-rel-label {
  color: var(--text2);
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: .8125rem;
  font-weight: 700;
  display: flex;
}

.bd-rel-label svg {
  width: 14px;
  height: 14px;
}

.bd-rel-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 10px;
  text-decoration: none;
  transition: background .12s, border-color .12s;
  display: flex;
}

.bd-rel-item:hover {
  background: var(--bg2);
  border-color: var(--accent);
}

.bd-rel-title {
  color: var(--text1);
  flex: 1;
  font-size: .875rem;
  font-weight: 600;
}

.bd-rel-price {
  color: var(--accent);
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 700;
}

.bd-tab-panel {
  padding: 25px 0;
}

.bd-desc-box {
  background: var(--bg2);
  border-radius: 10px;
  padding: 20px;
}

.bd-desc-title {
  color: var(--text1);
  margin-bottom: 10px;
  font-size: .9375rem;
  font-weight: 700;
}

.bd-desc-list {
  flex-direction: column;
  gap: 6px;
  padding-left: 18px;
  display: flex;
}

.bd-desc-list li {
  color: var(--text2);
  font-size: .875rem;
  line-height: 1.6;
}

.bd-toc {
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-direction: column;
  gap: 0;
  display: flex;
  overflow: hidden;
}

.bd-toc-chapter {
  border-bottom: 1px solid var(--border);
}

.bd-toc-chapter:last-child {
  border-bottom: none;
}

.bd-toc-header {
  cursor: pointer;
  background: var(--surface);
  color: var(--text1);
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font-size: .9375rem;
  font-weight: 700;
  transition: background .12s;
  display: flex;
}

.bd-toc-header:hover {
  background: var(--bg2);
}

.bd-toc-icon {
  width: 16px;
  height: 16px;
  stroke: var(--text3);
  transition: transform .2s;
}

.bd-toc-header.open .bd-toc-icon {
  transform: rotate(180deg);
}

.bd-toc-body {
  flex-direction: column;
  gap: 6px;
  padding: 0 16px 14px;
  display: flex;
}

.bd-toc-item {
  color: var(--text2);
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
  font-size: .875rem;
}

.bd-toc-item:last-child {
  border-bottom: none;
}

.rv-score-cnt {
  color: var(--text3);
  margin-top: 5px;
  font-size: .8125rem;
}

.rv-list-meta {
  color: var(--text3);
  white-space: nowrap;
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 4px;
  font-size: .75rem;
  display: flex;
}

@media (max-width: 1024px) {
  .bd-layout {
    grid-template-columns: 220px 1fr;
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .bd-layout {
    grid-template-columns: 1fr;
  }

  .bd-thumb-wrap {
    flex-direction: row;
    align-items: flex-start;
    position: static;
  }

  .bd-thumb {
    flex-shrink: 0;
    width: 140px;
  }

  .bd-thumb-actions {
    flex-direction: column;
  }

  .rv-summary {
    flex-direction: column;
    gap: 15px;
  }

  .rv-score-bars {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .bd-thumb-wrap {
    flex-direction: column;
  }

  .bd-thumb {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
  }

  .bd-price {
    font-size: 1rem;
  }

  .bd-qty-total strong {
    font-size: 1.2rem;
  }

  .bd-rel-item {
    grid-template-columns: repeat(1, 1fr);
    display: grid;
  }

  .bd-rel-price {
    text-align: right;
  }

  .bd-rel-price-item em {
    margin-right: 6px;
  }

  .bd-rel-item .badge-type {
    width: fit-content;
    display: inline-block;
  }
}

.clist-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg3);
  cursor: pointer;
  background-size: cover;
  border-radius: 10px 10px 0 0;
  flex-shrink: 0;
  width: 100%;
  position: relative;
}

.course-no-img svg {
  width: 44px;
  height: 44px;
  stroke: var(--border2);
}

.clist-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.course-title a {
  color: var(--text1);
  text-decoration: none;
}

.course-title a:hover {
  color: var(--accent);
}

.clist-title a {
  color: var(--text1);
  text-decoration: none;
}

.clist-title a:hover {
  color: var(--accent);
}

.book-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  flex-direction: column;
  display: flex;
}

.wd-notice-block {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.wd-notice-top-msg {
  color: var(--accent);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  font-size: .875rem;
  line-height: 1.7;
}

.wd-notice-section {
  padding: 18px 20px;
}

.wd-notice-section-title {
  color: var(--accent);
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font-size: .9375rem;
  font-weight: 700;
  display: flex;
}

.wd-notice-section-title:before {
  content: "";
  background: var(--accent);
  border-radius: 2px;
  width: 3px;
  height: 16px;
  display: inline-block;
}

.wd-notice-list {
  flex-direction: column;
  gap: 10px;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.wd-notice-list li {
  color: var(--text2);
  gap: 8px;
  font-size: .875rem;
  line-height: 1.7;
  display: flex;
}

.wd-notice-list li:before {
  content: "•";
  color: var(--text3);
  flex-shrink: 0;
  margin-top: 1px;
}

.wd-notice-warn {
  color: var(--text1) !important;
}

.wd-notice-warn strong {
  color: var(--accent);
}

.wd-form-box {
  padding: 24px;
}

.wd-optional {
  color: var(--text3);
  margin-left: 4px;
  font-size: .8rem;
  font-weight: 400;
}

.wd-agree-box {
  background: #ef44440d;
  border: 1px solid #ef444426;
  border-radius: 8px;
  padding: 14px 16px;
}

.wd-agree-check {
  color: var(--text1);
  cursor: pointer;
  align-items: flex-start;
  gap: 10px;
  font-size: .875rem;
  line-height: 1.5;
  display: flex;
}

.wd-agree-check input {
  accent-color: #ef4444;
  flex-shrink: 0;
  margin-top: 2px;
}

.wd-submit-btn {
  color: #fff;
  cursor: pointer;
  opacity: .4;
  pointer-events: none;
  background: #ef4444;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  font-weight: 700;
  transition: opacity .15s;
  display: flex;
}

.wd-submit-btn.enabled {
  opacity: 1;
  pointer-events: auto;
}

.wd-submit-btn.enabled:hover {
  opacity: .88;
}

.wd-submit-btn svg {
  width: 16px;
  height: 16px;
}

.wd-cancel-hint {
  color: var(--text3);
  text-align: center;
  margin-top: 4px;
  font-size: .8125rem;
}

.wd-cancel-hint a {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .wd-form-box {
    padding: 18px 16px;
  }

  .wd-notice-section {
    padding: 14px 16px;
  }
}

.oc-main {
  background: radial-gradient(ellipse 600px 300px at 50% 0%, rgba(var(--accent-r),.06), transparent 70%);
  padding: 64px 20px 100px;
}

.oc-wrap {
  max-width: 460px;
  margin: 0 auto;
}

.oc-headline {
  text-align: center;
  color: var(--text1);
  letter-spacing: -.01em;
  margin-bottom: 6px;
  font-size: 1.4rem;
  font-weight: 800;
}

.oc-headline .accent {
  color: var(--accent);
}

.oc-sub {
  text-align: center;
  color: var(--text3);
  margin-bottom: 40px;
  font-size: .8375rem;
}

.oc-stub {
  background: var(--surface);
  border: 1px solid var(--border);
  opacity: 0;
  border-radius: 18px;
  animation: .55s cubic-bezier(.2, .8, .2, 1) .1s forwards oc-rise;
  position: relative;
  overflow: visible;
  transform: translateY(14px);
}

@keyframes oc-rise {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.oc-stub-top {
  padding: 30px 28px 22px;
}

.oc-product-lbl {
  color: var(--text3);
  margin-bottom: 6px;
  font-size: .7rem;
  font-weight: 600;
}

.oc-product-name {
  color: var(--text1);
  padding-right: 70px;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.4;
}

.oc-perf {
  border-top: 1.5px dashed var(--border2);
  height: 0;
  margin: 0;
  position: relative;
}

.oc-perf:before, .oc-perf:after {
  content: "";
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.oc-perf:before {
  left: -11px;
}

.oc-perf:after {
  right: -11px;
}

.oc-stub-bottom {
  padding: 22px 28px 28px;
}

.oc-row {
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  display: flex;
}

.oc-row-lbl {
  color: var(--text3);
  flex-shrink: 0;
  font-size: .8125rem;
}

.oc-row-val {
  color: var(--text1);
  text-align: right;
  font-size: .875rem;
  font-weight: 600;
}

.oc-row-val.mono {
  letter-spacing: .03em;
  font-family: oswald;
}

.oc-row.total {
  border-top: 1px solid var(--border);
  margin-top: 6px;
  padding-top: 16px;
}

.oc-row.total .oc-row-lbl {
  color: var(--text1);
  font-size: .875rem;
  font-weight: 700;
}

.oc-row.total .oc-row-val {
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 800;
}

.oc-notice {
  color: var(--text3);
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 28px 0 24px;
  font-size: .8rem;
  display: flex;
}

.oc-notice svg {
  width: 14px;
  height: 14px;
  stroke: var(--text3);
}

.oc-actions {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.oc-btn {
  cursor: pointer;
  border: 1.5px solid #0000;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  font-size: .875rem;
  font-weight: 700;
  transition: all .15s;
  display: flex;
}

.oc-btn svg {
  width: 15px;
  height: 15px;
}

.oc-btn-primary {
  background: var(--accent);
  color: #fff;
}

.oc-btn-primary:hover {
  box-shadow: 0 8px 20px -6px rgba(var(--accent-r),.5);
  transform: translateY(-1px);
}

.oc-btn-ghost {
  color: var(--text2);
  border-color: var(--border);
  background: none;
}

.oc-btn-ghost:hover {
  color: var(--text1);
  border-color: var(--border2);
}

@media (max-width: 480px) {
  .oc-main {
    padding: 44px 16px 70px;
  }

  .oc-stub-top {
    padding: 26px 22px 18px;
  }

  .oc-stub-bottom {
    padding: 18px 22px 24px;
  }

  .oc-product-name {
    padding-right: 60px;
    font-size: .95rem;
  }
}

.pt-page-header {
  border-bottom: 1px solid var(--text1);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  display: flex;
}

.pt-page-title {
  color: var(--text1);
  font-size: 1.125rem;
  font-weight: 700;
}

.pt-total {
  color: var(--text3);
  font-size: .875rem;
}

.pt-total strong {
  color: var(--text1);
  font-weight: 500;
}

.pt-page-header .pt-total strong {
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: underline;
}

.pt-list {
  ddisplay: flex;
  flex-direction: column;
  gap: 10px;
}

.pt-item {
  background: var(--surface);
}

.pt-item.expired {
  opacity: .5;
}

.pt-item .text-right {
  text-align: right !important;
}

.table_01 .pt-amount {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
}

.pt-empty {
  color: var(--text3);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 60px 0;
  display: flex;
}

.pt-empty svg {
  width: 36px;
  height: 36px;
  stroke: var(--text3);
}

.pt-empty p {
  font-size: .875rem;
}

.pt-reg-input {
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--text1);
  border-radius: 4px;
  outline: none;
  flex: 1;
  padding: 8px 12px;
  font-family: inherit;
  font-size: .875rem;
}

.pt-reg-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r),.1);
}

.pt-reg-input::placeholder {
  color: var(--text3);
}

@media (max-width: 768px) {
  .pt-page-header {
    flex-wrap: wrap;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .pt-amount {
    font-size: .9rem;
  }

  .pt-name {
    font-size: .875rem;
  }

  .pt-reg-input {
    font-size: .8125rem;
  }
}

.reg-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

.reg-desc {
  color: var(--text3);
  text-align: center;
  margin-bottom: 24px;
  font-size: .9rem;
}

.reg-steps {
  justify-content: center;
  align-items: center;
  margin-bottom: 32px;
  display: flex;
}

.reg-step {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  display: flex;
}

.reg-step-num {
  background: var(--bg3);
  width: 32px;
  height: 32px;
  color: var(--text3);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: .8125rem;
  font-weight: 700;
  transition: all .2s;
  display: flex;
}

.reg-step-label {
  color: var(--text3);
  font-size: .8rem;
  transition: color .2s;
}

.reg-step.active .reg-step-num {
  background: var(--accent);
  color: #fff;
}

.reg-step.active .reg-step-label {
  color: var(--accent);
  font-weight: 700;
}

.reg-step.done .reg-step-num {
  background: var(--accent-s);
  color: var(--accent);
}

.reg-step.done .reg-step-label {
  color: var(--text2);
}

.reg-step-line {
  background: var(--border2);
  flex: 1;
  min-width: 40px;
  height: 1px;
  margin: 0 12px 20px;
}

@media (max-width: 480px) {
  .reg-step-line {
    min-width: 24px;
  }
}

.reg-agree-desc {
  color: var(--text1);
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  padding-bottom: 20px;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.6;
}

.reg-agree-all {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 16px;
}

.reg-agree-all-check {
  margin-bottom: 8px;
}

.reg-agree-all-label {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.reg-agree-all-desc {
  color: var(--text3);
  padding-left: 24px;
  font-size: .8125rem;
  line-height: 1.7;
}

.reg-agree-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden;
}

.reg-agree-item {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  display: flex;
}

.reg-agree-item:last-child {
  border-bottom: none;
}

.reg-agree-item .form-check-item {
  flex: 1;
}

.reg-optional {
  color: var(--text3);
  margin-left: 2px;
  font-size: .75rem;
}

.reg-sns-section {
  margin-bottom: 8px;
}

.reg-sns-title {
  color: var(--text2);
  margin-bottom: 12px;
  font-size: .875rem;
  font-weight: 700;
}

.reg-sns-btns {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.reg-sns-btn {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  font-size: .875rem;
  font-weight: 600;
  transition: opacity .15s;
  display: flex;
}

.reg-sns-btn:hover {
  opacity: .88;
}

.reg-sns-kakao {
  color: #191919;
  background: #fee500;
}

.reg-sns-naver {
  color: #fff;
  background: #03c75a;
}

.form-input-sm {
  max-width: 200px;
}

.form-input-zip {
  max-width: 160px;
}

.form-btn-nowrap {
  white-space: nowrap;
}

.form-btns-sep {
  border-top: 1px solid var(--border);
  margin-top: 24px;
  padding-top: 20px;
}

.form-btns-center {
  justify-content: center;
}

.reg-done {
  text-align: center;
  padding: 48px 28px;
}

.reg-done-icon {
  margin-bottom: 16px;
}

.reg-done-icon svg {
  width: 56px;
  height: 56px;
  stroke: var(--accent);
}

.reg-done-title {
  color: var(--text1);
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-weight: 700;
}

.reg-done-desc {
  color: var(--text3);
  margin-bottom: 24px;
  font-size: .9rem;
  line-height: 1.8;
}

.la-current-account {
  align-items: center;
  gap: 16px;
  padding: 4px 0;
  display: flex;
}

.la-account-avatar {
  background: var(--accent-s);
  width: 52px;
  height: 52px;
  color: var(--accent);
  border: 2px solid rgba(var(--accent-r),.2);
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
}

.la-account-info {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.la-account-name {
  color: var(--text1);
  font-size: 1rem;
  font-weight: 700;
}

.la-account-email {
  color: var(--text3);
  font-size: .8125rem;
}

.la-sns-list {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.la-sns-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  transition: border-color .15s;
  display: flex;
}

.la-sns-item:hover {
  border-color: var(--border2);
}

.la-sns-item.is-connected {
  border-color: rgba(var(--accent-r),.2);
  background: var(--accent-s);
}

.la-sns-icon {
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.la-sns-icon svg {
  width: 20px;
  height: 20px;
}

.la-sns-icon.kakao {
  color: #191919;
  background: #fee500;
}

.la-sns-icon.naver {
  color: #fff;
  background: #03c75a;
}

.la-sns-icon.google {
  border: 1px solid var(--border);
  background: #fff;
}

.la-sns-icon.apple {
  color: #fff;
  background: #000;
}

.la-sns-info {
  flex: 1;
  min-width: 0;
}

.la-sns-name {
  color: var(--text1);
  margin-bottom: 3px;
  font-size: .9rem;
  font-weight: 700;
}

.la-sns-status {
  color: var(--text3);
  font-size: .8rem;
}

.la-sns-status.connected {
  color: #0ab39c;
  font-weight: 600;
}

@media (max-width: 768px) {
  .reg-agree-item .action-btn.btn-sm {
    width: auto;
  }
}

@media (max-width: 480px) {
  .la-sns-item {
    display: block;
  }

  .la-sns-info {
    margin-bottom: 5px;
  }
}

.tc-layout {
  grid-template-columns: 200px 1fr;
  align-items: start;
  gap: 32px;
  padding: 40px 0;
  display: grid;
}

.tc-profile {
  text-align: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
}

.tc-avatar {
  background: var(--bg3);
  border: 2px solid var(--border);
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: 0 auto 12px;
  overflow: hidden;
}

.tc-no-img {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.tc-no-img svg {
  width: 32px;
  height: 32px;
  stroke: var(--border2);
}

.tc-avatar img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.tc-subject {
  color: var(--text3);
  margin-bottom: 4px;
  font-size: .8rem;
}

.tc-name {
  color: var(--text1);
  font-size: 1.125rem;
  font-weight: 700;
}

.tc-name span {
  font-size: .9rem;
  font-weight: 400;
}

.tc-nav-cnt {
  color: var(--accent);
  margin-left: 4px;
  font-size: .8rem;
  font-weight: 700;
}

.tc-banner {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.tc-banner-bg {
  background: var(--bg3);
  width: 100%;
  height: 160px;
  position: relative;
  overflow: hidden;
}

.tc-banner-no-img {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.tc-banner-no-img svg {
  width: 40px;
  height: 40px;
  stroke: var(--border2);
}

.tc-banner-bg img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.tc-banner-info {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  display: flex;
}

.tc-banner-subject {
  color: var(--text3);
  font-size: .8rem;
}

.tc-banner-name {
  color: var(--text1);
  flex: 1;
  font-size: 1.125rem;
  font-weight: 700;
}

.tc-banner-name span {
  font-size: .9rem;
  font-weight: 400;
}

.tc-banner-sns {
  gap: 6px;
  display: flex;
}

.tc-sns-btn {
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  transition: opacity .15s;
  display: flex;
}

.tc-sns-btn:hover {
  opacity: .8;
}

.tc-sns-btn svg {
  width: 16px;
  height: 16px;
}

.tc-sns-btn.youtube {
  color: #fff;
  background: red;
}

.tc-sns-btn.insta {
  color: #fff;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.tc-banner-notice {
  background: var(--bg2);
  padding: 14px 18px;
}

.tc-new-badge {
  color: var(--text1);
  letter-spacing: .03em;
  font-size: 1rem;
  font-weight: 900;
}

.tc-update-badge {
  color: var(--accent);
  letter-spacing: .03em;
  font-size: 1rem;
  font-weight: 700;
}

.tc-notice-list {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.tc-notice-item {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: opacity .15s;
  display: flex;
}

.tc-notice-item:hover {
  opacity: .75;
}

.tc-notice-title {
  color: var(--text1);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .825rem;
  overflow: hidden;
}

.tc-section {
  border-top: 1px solid var(--border);
  padding: 30px 0;
}

.tc-section:first-child {
  border-top: none;
  padding-top: 0;
}

.tc-sec-header {
  align-items: center;
  gap: 6px;
  margin-bottom: 15px;
  display: flex;
}

.tc-sec-title {
  color: var(--text1);
  font-size: 1rem;
  font-weight: 700;
}

.bbs-table tr:last-child td {
  border-bottom: none;
}

.bbs-title {
  color: var(--text1);
  align-items: center;
  gap: 5px;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
  display: flex;
}

.bbs-title:hover {
  color: var(--accent);
}

.bbs-title-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}

.bbs-cmt-count {
  color: var(--text3);
  flex-shrink: 0;
  font-size: .8125rem;
  font-weight: 600;
}

.bbs-new {
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  display: inline-block;
}

.bbs-attach-icon {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  vertical-align: middle;
  display: inline-block;
}

.rv-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: center;
  gap: 30px;
  padding: 20px;
  display: flex;
}

.rv-summary-score {
  flex-shrink: 0;
  align-items: center;
  gap: 15px;
  display: flex;
}

.rv-score-big {
  color: var(--text1);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.rv-score-cnt {
  color: var(--text3);
  font-size: .8125rem;
}

.rv-score-bars {
  flex-direction: column;
  flex: 1;
  gap: 8px;
  display: flex;
}

.rv-bar-row {
  align-items: center;
  gap: 8px;
  display: flex;
}

.rv-bar-label {
  color: var(--text1);
  flex-shrink: 0;
  width: 25px;
  font-size: .75rem;
}

.rv-bar-bg {
  background: var(--bg3);
  border-radius: 999px;
  flex: 1;
  height: 6px;
  overflow: hidden;
}

.rv-bar-fill {
  background: var(--accent);
  border-radius: 999px;
  height: 100%;
}

.rv-bar-pct {
  color: var(--text3);
  text-align: right;
  flex-shrink: 0;
  width: 30px;
  font-size: .75rem;
}

.rv-stars {
  gap: 2px;
  display: flex;
}

.rv-star {
  width: 14px;
  height: 14px;
  stroke: var(--border2);
  fill: #0000;
  flex-shrink: 0;
}

.rv-star.filled {
  stroke: #f7b84b;
  fill: #f7b84b;
}

.rv-list {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.rv-list-item {
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  transition: background .12s;
  display: flex;
}

.rv-list-item:last-child {
  border-bottom: none;
}

.rv-list-item:hover {
  background: var(--bg2);
}

.rv-list-star-col {
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  min-width: 70px;
  display: flex;
}

.rv-list-score {
  color: #f7b84b;
  font-size: .875rem;
  font-weight: 700;
}

.rv-list-body {
  flex: 1;
  min-width: 0;
}

.rv-list-course {
  color: var(--accent);
  margin-bottom: 3px;
  font-size: .75rem;
  font-weight: 600;
}

.rv-list-title {
  color: var(--text1);
  margin-bottom: 4px;
  font-size: .9rem;
  font-weight: 700;
}

.rv-list-content {
  color: var(--text2);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: .8125rem;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
}

.rv-list-meta {
  color: var(--text3);
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 4px;
  font-size: .75rem;
  display: flex;
}

@media (max-width: 768px) {
  .tc-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .mypage-side {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
  }

  .tc-profile {
    text-align: left;
    align-items: center;
    gap: 16px;
    padding: 16px;
    display: flex;
  }

  .tc-avatar {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    margin: 0;
  }

  .tc-banner-bg {
    height: 120px;
  }
}

@media (max-width: 480px) {
  .tc-banner-info {
    flex-wrap: wrap;
    gap: 8px;
  }

  .tc-notice-title {
    font-size: .75rem;
  }
}

.tc-slider-wrap {
  position: relative;
}

.tc-slider-viewport {
  border-radius: 10px;
  padding: 2px 0;
  overflow: hidden;
}

.tc-slider-track {
  will-change: transform;
  gap: 15px;
  transition: transform .4s cubic-bezier(.25, .46, .45, .94);
  display: flex;
}

.tc-slide-item {
  flex: 0 0 calc(25% - 11.25px);
  min-width: 0;
}

.tc-slider-btn {
  z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  width: 36px;
  height: 36px;
  box-shadow: var(--shadow);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.tc-slider-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.tc-slider-btn:hover svg {
  stroke: #fff;
}

.tc-slider-btn svg {
  width: 15px;
  height: 15px;
  stroke: var(--text2);
}

.tc-slider-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}

.tc-slider-btn:disabled:hover {
  background: var(--surface);
  border-color: var(--border);
}

.tc-slider-btn:disabled:hover svg {
  stroke: var(--text2);
}

.tc-slider-prev {
  left: -6px;
}

.tc-slider-next {
  right: -6px;
}

.tc-slider-dots {
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  display: flex;
}

.tc-slider-dot {
  background: var(--border2);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  width: 7px;
  height: 7px;
  padding: 0;
  transition: all .2s;
}

.tc-slider-dot.active {
  background: var(--accent);
  border-radius: 999px;
  width: 20px;
}

@media (max-width: 1024px) {
  .tc-slide-item {
    flex: 0 0 calc(33.3333% - 10px);
  }
}

@media (max-width: 768px) {
  .tc-slide-item {
    flex: 0 0 calc(50% - 7.5px);
  }
}

@media (max-width: 480px) {
  .tc-slide-item {
    flex: 0 0 100%;
  }
}

.tc-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  display: grid;
}

.tc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.tc-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.tc-card-best {
  border-color: rgba(var(--accent-r),.3);
}

.tc-card-best:hover {
  border-color: var(--accent);
}

.tc-best-badge {
  z-index: 1;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: .7rem;
  font-weight: 700;
  display: inline-flex;
  position: absolute;
  top: 10px;
  left: 10px;
}

.tc-best-badge svg {
  stroke: #fff;
  fill: #fff;
  width: 10px;
  height: 10px;
}

.tc-avatar-wrap {
  aspect-ratio: 3 / 3.5;
  background: var(--bg3);
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.tc-avatar-wrap svg {
  width: 52px;
  height: 52px;
  stroke: var(--border2);
}

.tc-avatar-wrap img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.tc-info {
  flex-direction: column;
  gap: 6px;
  padding: 10px 15px;
  display: flex;
}

.tc-name {
  color: var(--text1);
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.tc-subject {
  color: var(--text2);
  margin: 0;
  font-size: .8125rem;
}

.tc-tags {
  flex-wrap: wrap;
  gap: 5px;
  display: flex;
}

.tc-tag {
  border: 1px solid rgba(var(--accent-r),.2);
  background: var(--accent-s);
  color: var(--accent);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 600;
}

.tc-meta {
  flex-direction: column;
  gap: 4px;
  display: flex;
}

.tc-meta-row {
  color: var(--text3);
  align-items: center;
  gap: 5px;
  font-size: .75rem;
  display: flex;
}

.tc-meta-row svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.tc-rating {
  border-top: 1px solid var(--border);
  align-items: center;
  gap: 2px;
  padding-top: 5px;
  display: flex;
}

.tc-star {
  width: 13px;
  height: 13px;
  stroke: var(--border2);
  fill: #0000;
  flex-shrink: 0;
}

.tc-star.on {
  stroke: #f7b84b;
  fill: #f7b84b;
}

.tc-rating-num {
  color: #f7b84b;
  margin-left: 4px;
  font-size: .8rem;
  font-weight: 700;
}

.tc-tab-wrap {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.tc-tab {
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s;
}

.tc-tab:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.tc-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.tc-empty {
  color: var(--text3);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 50px 0;
  font-size: .9rem;
  display: none;
}

.tc-empty svg {
  width: 40px;
  height: 40px;
  stroke: var(--border2);
}

@media (max-width: 1024px) {
  .tc-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .tc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .tc-grid {
    grid-template-columns: 1fr;
  }
}

.rvc-event-banner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

.rvc-event-title {
  color: var(--text1);
  margin: 10px 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}

.rvc-event-desc {
  color: var(--text2);
  margin-bottom: 14px;
  font-size: .875rem;
  line-height: 1.6;
}

.rvc-event-meta {
  color: var(--text3);
  flex-wrap: wrap;
  gap: 6px 24px;
  font-size: .8125rem;
  display: flex;
}

.rvc-event-meta i {
  vertical-align: -3px;
  width: 14px;
  height: 14px;
  stroke: var(--text3);
  margin-right: 4px;
}

.rvc-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.rvc-item {
  border-bottom: 1px solid var(--border);
  padding: 16px 125px 16px 20px;
  position: relative;
}

.rvc-item:last-child {
  border-bottom: none;
}

.rvc-item-head {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
}

.rvc-author {
  color: var(--text1);
  font-size: .875rem;
  font-weight: 700;
}

.rvc-author-mask {
  color: var(--text3);
  margin-left: 2px;
  font-weight: 400;
}

.rvc-winner-badge {
  padding: 2px 8px;
  font-size: .6875rem;
}

.rvc-date {
  color: var(--text3);
  margin-left: auto;
  font-size: .75rem;
}

.rvc-text {
  color: var(--text1);
  word-break: break-word;
  font-size: .875rem;
  line-height: 1.7;
}

.rvc-actions {
  gap: 12px;
  display: flex;
  position: absolute;
  top: 16px;
  right: 20px;
}

.rvc-action-btn {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  align-items: center;
  gap: 3px;
  padding: 0;
  font-size: .75rem;
  transition: color .15s;
  display: flex;
}

.rvc-action-btn svg {
  width: 12px;
  height: 12px;
}

.rvc-action-btn.rvc-edit:hover {
  color: var(--accent);
}

.rvc-action-btn.rvc-del:hover {
  color: #ef4444;
}

.rvc-edit-box {
  margin-top: 8px;
  display: none;
}

.rvc-item.editing .rvc-text, .rvc-item.editing .rvc-actions {
  display: none;
}

.rvc-item.editing .rvc-edit-box {
  display: block;
}

.rvc-edit-textarea {
  border: 1px solid var(--border);
  width: 100%;
  min-height: 70px;
  color: var(--text1);
  background: var(--bg2);
  resize: vertical;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 10px;
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.6;
}

.rvc-edit-actions {
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.rvc-empty {
  text-align: center;
  color: var(--text3);
  padding: 60px 20px;
  font-size: .875rem;
  display: none;
}

.rvc-list.is-empty .rvc-empty {
  display: block;
}

.rvc-write {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.rvc-textarea {
  width: 100%;
  min-height: 80px;
  color: var(--text1);
  background: var(--surface);
  resize: none;
  border: none;
  border-bottom: 1px solid var(--border);
  outline: none;
  padding: 14px 16px;
  font-family: inherit;
  font-size: .875rem;
  line-height: 1.6;
  display: block;
}

.rvc-write-footer {
  background: var(--bg2);
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  display: flex;
}

.rvc-count {
  color: var(--text3);
  font-size: .75rem;
}

@media (max-width: 640px) {
  .rvc-event-banner {
    padding: 18px;
  }

  .rvc-event-title {
    font-size: 1rem;
  }

  .rvc-item {
    padding: 14px 16px;
  }

  .rvc-actions {
    justify-content: flex-end;
    margin-top: 10px;
    position: static;
  }

  .rvc-date {
    margin-left: 0;
  }
}

.mm-compare {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 28px;
  display: flex;
}

.mm-frame-wrap {
  flex: none;
}

.mm-frame-label {
  color: var(--text2);
  text-align: center;
  margin-bottom: 10px;
  font-size: .8125rem;
  font-weight: 700;
}

.mm-phone {
  background: var(--surface);
  border: 8px solid var(--text1);
  border-radius: 20px;
  width: 340px;
  height: 620px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px #00000029;
}

.mm-phone-notch {
  background: var(--text1);
  z-index: 5;
  border-radius: 0 0 14px 14px;
  width: 120px;
  height: 14px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.mm-phone-screen {
  scrollbar-width: thin;
  padding: 20px 15px;
  position: absolute;
  inset: 0;
  overflow-y: auto;
}

.mm-quick {
  background: var(--accent-s);
  border-radius: 12px;
  margin-bottom: 18px;
  padding: 14px;
}

.mm-quick-label {
  color: var(--accent);
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
}

.mm-quick-label svg {
  width: 13px;
  height: 13px;
}

.mm-quick-item {
  background: var(--surface);
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}

.mm-quick-item + .mm-quick-item {
  margin-top: 8px;
}

.mm-quick-thumb {
  background: var(--bg3);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.mm-quick-thumb svg {
  width: 18px;
  height: 18px;
  stroke: var(--border2);
}

.mm-quick-info {
  flex: 1;
  min-width: 0;
}

.mm-quick-title {
  color: var(--text1);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
  font-size: .8125rem;
  font-weight: 700;
  overflow: hidden;
}

.mm-quick-progress {
  align-items: center;
  gap: 6px;
  display: flex;
}

.mm-quick-progress .lecture-bar {
  flex: 1;
  height: 4px;
}

.mm-quick-pct {
  color: var(--text3);
  flex-shrink: 0;
  font-size: .6875rem;
  font-weight: 700;
}

.mm-quick-go {
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
}

.mm-quick-go svg {
  width: 14px;
  height: 14px;
}

.mm-a-head {
  cursor: pointer;
  color: var(--text1);
  justify-content: space-between;
  align-items: center;
  padding: 14px 4px;
  font-size: .9375rem;
  font-weight: 600;
  transition: color .15s;
  display: flex;
}

.mm-a-head .mm-a-chev {
  width: 16px;
  height: 16px;
  color: var(--text3);
  flex-shrink: 0;
  transition: transform .2s, color .15s;
}

.mm-a-item.open .mm-a-head {
  color: var(--accent);
}

.mm-a-item.open .mm-a-head .mm-a-chev {
  color: var(--accent);
  transform: rotate(180deg);
}

.mm-a-panel {
  max-height: 0;
  transition: max-height .25s;
  overflow: hidden;
}

.mm-a-sub {
  border-left: 2px solid var(--accent-s);
  flex-direction: column;
  gap: 2px;
  margin-left: 4px;
  padding: 2px 4px 12px 14px;
  display: flex;
}

.mm-a-sub a {
  color: var(--text2);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .855rem;
  transition: color .15s, background .15s;
}

.mm-a-sub a:hover {
  background: var(--bg2);
  color: var(--text1);
}

.mm-a-plain {
  color: var(--text1);
  align-items: center;
  padding: 14px 4px;
  font-size: .9375rem;
  font-weight: 600;
  display: flex;
}

.mm-menu-foot {
  gap: 8px;
  margin-top: 16px;
  display: flex;
}

.mm-menu-foot a {
  text-align: center;
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 8px;
  flex: 1;
  padding: 11px;
  font-size: .855rem;
  font-weight: 600;
}

.mm-menu-foot a.mm-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.mm-phone-screen.mm-split-screen {
  flex-direction: column;
  display: flex;
  overflow: hidden;
}

.mm-split-screen .mm-quick {
  flex-shrink: 0;
}

.mm-c-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
}

.mm-c-side {
  background: var(--bg2);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  width: 104px;
  overflow-y: auto;
}

.mm-c-side-item {
  text-align: left;
  width: 100%;
  color: var(--text2);
  cursor: pointer;
  background: none;
  border: none;
  border-left: 3px solid #0000;
  padding: 15px 10px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  display: block;
}

.mm-c-side-item.active {
  background: var(--surface);
  color: var(--text1);
  border-left-color: var(--accent);
  font-weight: 700;
}

.mm-c-panel {
  flex: 1;
  padding: 6px 0 15px 15px;
  overflow-y: auto;
}

.mm-c-panel-cat {
  display: none;
}

.mm-c-panel-cat.active {
  display: block;
}

.mm-c-panel-link {
  color: var(--text1);
  padding: 14px 2px;
  font-size: .855rem;
  transition: color .15s;
  display: block;
}

.mm-c-panel-link:hover {
  color: var(--accent);
}

.mm-quick3-group {
  margin-bottom: 22px;
}

.mm-group-head {
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.mm-group-label {
  color: var(--text1);
  flex-shrink: 0;
  font-size: .8125rem;
  font-weight: 700;
}

.mm-group-line {
  border-top: 1px dashed var(--border);
  flex: 1;
}

.mm-quick3 {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 16px 4px;
  display: grid;
}

.mm-quick3-item {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  display: flex;
  position: relative;
}

.mm-quick3-icon {
  background: var(--surface);
  width: 44px;
  height: 44px;
  color: var(--text1);
  border-radius: 13px;
  justify-content: center;
  align-items: center;
  transition: border-color .15s, color .15s, transform .15s;
  display: flex;
}

.mm-quick3-item:hover .mm-quick3-icon, .mm-quick3-item:hover .mm-quick3-label {
  color: var(--accent);
}

.mm-quick3-item:active .mm-quick3-icon {
  border-color: var(--accent);
  color: var(--accent);
  transform: scale(.92);
}

.mm-quick3-icon svg {
  width: 25px;
  height: 25px;
}

.mm-quick3-label {
  color: var(--text1);
  font-size: .75rem;
  font-weight: 600;
}

.mm-quick3-badge {
  background: var(--accent);
  border-radius: 999px;
  width: 3px;
  height: 3px;
  padding: 3px;
  display: flex;
  position: absolute;
  top: 8px;
  right: 15px;
}

.mm-d-group {
  padding: 0 4px 20px;
}

.mm-d-group .mm-group-head {
  margin-bottom: 11px;
}

.mm-d-label {
  color: var(--text1);
  flex-shrink: 0;
  font-size: .8125rem;
  font-weight: 700;
}

.mm-d-chips {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.mm-d-chip {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text1);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .8125rem;
  transition: color .15s, background .15s, border-color .15s;
  display: inline-block;
}

.mm-d-chip:hover {
  color: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 720px) {
  .mm-compare {
    justify-content: center;
  }

  .mm-phone {
    width: 100%;
    max-width: 340px;
  }
}

.mm-dg-group {
  margin-bottom: 15px;
}

.mm-dg-group .mm-group-head {
  cursor: pointer;
}

.mm-group-chev {
  width: 14px;
  height: 14px;
  color: var(--accent);
  flex-shrink: 0;
  margin-left: 2px;
  transition: transform .2s;
}

.mm-dg-group.closed .mm-group-chev {
  transform: rotate(-90deg);
}

.mm-group-body {
  opacity: 1;
  max-height: 800px;
  transition: max-height .3s, opacity .25s, margin-top .25s;
  overflow: hidden;
}

.mm-dg-group.closed .mm-group-body {
  opacity: 0;
  max-height: 0;
}

.mm-dg-group .mm-quick3, .mm-dg-group .mm-d-chips {
  margin-top: 2px;
}

.mm-status {
  background: var(--bg2);
  border-radius: 12px;
  align-items: stretch;
  margin: 5px 0 15px;
  display: flex;
}

.mm-status-item {
  text-align: center;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  padding: 12px 4px;
  position: relative;
}

.mm-status-item:not(:first-child):before {
  content: "";
  background: var(--border);
  width: 1px;
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: 0;
}

.mm-status-label {
  color: var(--text1);
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
  font-size: .6875rem;
  display: flex;
}

.mm-status-dot {
  background: #ef4444;
  border-radius: 50%;
  flex-shrink: 0;
  width: 5px;
  height: 5px;
}

.mm-status-value {
  color: var(--text1);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .8125rem;
  font-weight: 700;
  overflow: hidden;
}

.mm-e-toggle {
  justify-content: center;
  gap: 6px;
  margin: 10px 0;
  display: flex;
}

.mm-e-toggle-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .8125rem;
  font-weight: 600;
}

.mm-e-toggle-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.mm-phone.has-sticky .mm-phone-screen {
  padding-top: 88px;
}

.mm-e-sticky {
  background: var(--surface);
  z-index: 4;
  padding: 24px 16px 14px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.mm-e-sticky-btn {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 13px;
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.mm-a-head_e, .mm-a-plain_e {
  border-top: 1px dashed var(--border);
}

.mm-a-item_e.open {
  padding-bottom: 20px;
}

.gnav-drawer {
  z-index: 500;
  width: 150px;
  height: 100vh;
  transition: width .25s;
  position: fixed;
  top: 0;
  left: 0;
  overflow: visible;
}

.gnav-drawer.closed {
  width: 0;
}

.gnav-clip {
  background: var(--surface);
  border-right: 1px solid var(--border);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gnav-drawer.closed .gnav-clip {
  border-right-color: #0000;
}

.gnav-inner {
  width: 150px;
  height: 100%;
  overflow: hidden auto;
}

.gnav-link {
  color: var(--text2);
  white-space: nowrap;
  border-radius: 8px;
  align-items: center;
  gap: 9px;
  margin: 0 6px 2px;
  padding: 6px 10px;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
  display: flex;
}

.gnav-link:hover {
  background: var(--bg2);
  color: var(--text1);
}

.gnav-link-icon {
  width: 15px;
  height: 15px;
  color: var(--text3);
  flex-shrink: 0;
  transition: color .15s;
}

.gnav-link:hover .gnav-link-icon {
  color: var(--accent);
}

.gnav-ext-icon {
  width: 11px;
  height: 11px;
  color: var(--text3);
  opacity: 0;
  flex-shrink: 0;
  margin-left: auto;
  transition: opacity .15s, transform .15s;
  transform: translate(-2px, 2px);
}

.gnav-link:hover .gnav-ext-icon, .gnav-sub-link:hover .gnav-ext-icon {
  opacity: 1;
  transform: translate(0);
}

.gnav-group-head {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3);
  cursor: pointer;
  white-space: nowrap;
  justify-content: space-between;
  align-items: center;
  margin: 16px 6px 6px;
  padding: 0 10px;
  font-size: .6875rem;
  font-weight: 700;
  transition: color .15s;
  display: flex;
}

.gnav-group-head:hover {
  color: var(--text1);
}

.gnav-chev {
  width: 15px;
  height: 15px;
  color: var(--text3);
  flex-shrink: 0;
  transition: transform .2s;
}

.gnav-group.open .gnav-chev {
  transform: rotate(180deg);
}

.gnav-group-body {
  max-height: 0;
  transition: max-height .22s;
  overflow: hidden;
}

.gnav-sub-link {
  border-left: 2px solid var(--border);
  color: var(--text2);
  white-space: nowrap;
  border-radius: 0 8px 8px 0;
  align-items: center;
  gap: 8px;
  margin: 0 6px 1px 16px;
  padding: 6px 10px;
  font-size: .8125rem;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
  display: flex;
}

.gnav-sub-link:hover {
  background: var(--bg2);
  color: var(--text1);
  border-left-color: var(--accent);
}

.gnav-toggle {
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  width: 30px;
  height: 30px;
  color: var(--text2);
  z-index: 1;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 20px;
  right: -15px;
}

.gnav-toggle:hover {
  background: var(--bg2);
  color: var(--text1);
}

.gnav-toggle svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  transition: transform .25s;
}

.gnav-drawer.closed .gnav-toggle svg {
  transform: rotate(180deg);
}

.gnav-logo-row {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 18px 14px 16px;
  display: flex;
}

.gnav-logo-mark {
  background: var(--accent);
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  display: flex;
}

.gnav-logo-mark svg {
  color: #fff;
  width: 12px;
  height: 12px;
}

.gnav-toggle-2 {
  border-left: none;
  border-radius: 0 8px 8px 0;
  width: 18px;
  height: 34px;
  right: -18px;
}

.gnav-logo-name {
  color: var(--text1);
  white-space: nowrap;
  align-items: center;
  gap: 6px;
  font-family: oswald;
  font-size: .9375rem;
  display: flex;
}

.gnav-logo-url {
  color: var(--text3);
  white-space: nowrap;
  margin-top: 3px;
  font-size: .625rem;
}

.gnav-h2 {
  border-bottom: 1px solid var(--border);
  align-items: center;
  margin-bottom: 8px;
  padding: 16px 14px 14px;
  display: flex;
}

.gnav-h2-divider {
  background: var(--border);
  flex-shrink: 0;
  width: 1px;
  height: 20px;
  margin: 0 10px;
}

.gnav-h2 .gnav-mtoggle {
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  border-radius: 7px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  display: flex;
}

.gnav-h2 .gnav-mtoggle:hover {
  background: var(--bg2);
}

.gnav-h2 .gnav-mtoggle svg {
  width: 15px;
  height: 15px;
  color: var(--text2);
  transition: transform .25s;
}

.gnav-h2 .gnav-mtoggle.open svg {
  transform: rotate(180deg);
}

.gnav-mbar {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  display: flex;
}

.gnav-macc {
  border-bottom: 1px solid var(--border);
  max-height: 0;
  transition: max-height .3s;
  overflow: hidden;
}

.gnav-demo-frame {
  height: 420px;
  margin-bottom: 16px;
  position: relative;
}

.gnav-demo-frame .gnav-drawer {
  height: 100%;
  position: absolute;
}

.gnav-demo-page {
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: 12px;
  padding: 20px 24px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gnav-demo-page-header {
  border-bottom: 1px solid var(--border);
  color: var(--text2);
  justify-content: flex-end;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  font-size: .8125rem;
  display: flex;
}

.gnav-demo-page-line {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  height: 10px;
  margin-bottom: 10px;
}

.gnav-mobile-frame {
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: 12px;
  width: 340px;
  overflow: hidden;
}

.gnav-mobile-frame .gnav-demo-page {
  border: none;
  border-radius: 0;
  position: static;
}

.gnav-header-toggle {
  background: var(--surface);
  cursor: pointer;
  border-radius: 7px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  display: none;
}

.gnav-header-toggle:hover {
  background: var(--bg2);
}

.gnav-header-toggle svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  transition: transform .25s;
}

.gnav-header-toggle.open svg {
  transform: rotate(180deg);
}

.gnav-header-logo-group {
  align-items: center;
  display: flex;
}

.gnav-mobile-panel {
  top: var(--header-height);
  background: var(--surface);
  z-index: 198;
  max-height: 0;
  transition: max-height .3s;
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  overflow-y: auto;
}

.gnav-mobile-panel .gnav-link, .gnav-mobile-panel .gnav-group-head, .gnav-mobile-panel .gnav-sub-link {
  color: var(--text2);
}

.gnav-mobile-panel .gnav-link:hover, .gnav-mobile-panel .gnav-group-head:hover, .gnav-mobile-panel .gnav-sub-link:hover {
  background: var(--bg2);
  color: var(--text1);
}

.gnav-mobile-panel.open {
  border-bottom: 1px solid var(--border);
}

@media (max-width: 960px) {
  .gnav-drawer {
    display: none;
  }

  .gnav-header-toggle {
    display: flex;
  }

  .gnav-mobile-panel {
    display: block;
  }
}

/* [project]/apps/web/src/styles/design/customize.css [app-client] (css) */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 200;
  position: sticky;
  top: 0;
}

.header-util {
  align-items: center;
  gap: 4px;
  margin-bottom: auto;
  display: flex;
}

.header-util a, .header-util button {
  flex-shrink: 0;
}

.header-a .header-top {
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  display: flex;
}

.header-a .header-in {
  min-height: var(--header-height);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.header-a .nav {
  flex: 1;
}

.header-a .srch {
  margin-left: auto;
}

.header-b .header-top {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 5px 0;
  display: grid;
}

.header-b .header-top .logo, .header-b .header-top .gnav-header-logo-group {
  grid-column: 2;
  justify-self: center;
}

.header-b .header-top .header-util {
  grid-column: 3;
  justify-self: end;
  margin-bottom: auto;
}

.header-b .header-top .header-util-left {
  grid-column: 1;
}

.header-b .header-in {
  min-height: var(--header-height);
  justify-content: center;
  align-items: center;
  gap: 0;
  display: flex;
}

.header-b .nav {
  flex: 0 auto;
  justify-content: center;
  display: flex;
}

.header-b .srch {
  position: absolute;
  right: 0;
}

.header-b .header-in-wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.header-c .header-top {
  display: none;
}

.header-c .header-in {
  align-items: center;
  gap: 20px;
  display: flex;
}

.header-c .header-c-logo, .header-c .gnav-header-logo-group {
  flex-shrink: 0;
}

.header-c .nav {
  flex: 1;
  min-width: 0;
}

.header-c .header-c-right {
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  display: flex;
}

.header-c .srch {
  order: 0;
}

.nav {
  align-items: center;
  display: flex;
}

.nav .nav-item {
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .header-a .header-in {
    flex-wrap: wrap;
    display: none !important;
  }

  .header-c .nav {
    display: none;
  }

  .header-c .header-in {
    height: unset;
    justify-content: space-between;
    padding: 5px 0;
    display: flex !important;
  }
}

@media (max-width: 768px) {
  .header-a .header-in {
    min-height: 48px;
  }

  .header-a .nav, .header-a .srch {
    display: none;
  }

  .header-b .header-in-wrap {
    justify-content: flex-end;
    min-height: 48px;
    padding: 6px 0;
    display: none;
  }

  .header-b .nav, .header-b .srch {
    display: none;
  }
}

.style-switcher {
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
  padding: 15px 0;
  display: flex;
}

.style-btn {
  border: 1.5px solid var(--border2);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: .875rem;
  font-weight: 600;
  transition: all .15s;
  display: flex;
}

.style-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.style-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.style-btn svg {
  width: 14px;
  height: 14px;
}

.style-label {
  color: var(--text3);
  margin-left: 5px;
  font-size: .8125rem;
}

.header-demo {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 30px;
  overflow: hidden;
}

.header-demo-label {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  display: flex;
}

.header-demo-name {
  color: var(--text1);
  font-size: .875rem;
  font-weight: 700;
}

.header-demo-desc {
  color: var(--text3);
  font-size: .8rem;
}

.header-demo-badge {
  background: var(--accent-s);
  color: var(--accent);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 700;
}

.bn-img-mo {
  display: none;
}

.bn-img-pc {
  display: block;
}

@media (max-width: 768px) {
  .bn-img-pc {
    display: none;
  }

  .bn-img-mo {
    display: block;
  }
}

.bn-slider-unit {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.bn-slider-unit .bn-track {
  transition: transform .45s cubic-bezier(.25, .46, .45, .94);
  display: flex;
}

.bn-slider-unit .bn-slide {
  flex: 0 0 100%;
  min-width: 0;
}

.bn-slider-unit .bn-slide a {
  line-height: 0;
  display: block;
}

.bn-slider-unit .bn-slide img, .bn-slider-unit .bn-slide .bn-dummy-img {
  text-align: center;
  align-content: center;
  width: 100%;
  display: block;
}

.bn-arr {
  z-index: 10;
  cursor: pointer;
  background: #00000059;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  transition: background .15s;
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.bn-arr:hover {
  background: #0009;
}

.bn-arr svg {
  stroke: #fff;
  width: 13px;
  height: 13px;
}

.bn-arr-prev {
  left: 10px;
}

.bn-arr-next {
  right: 10px;
}

.bn-dots {
  z-index: 10;
  gap: 5px;
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.bn-dot {
  cursor: pointer;
  background: #ffffff80;
  border: none;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  padding: 0;
  transition: all .2s;
}

.bn-dot.on {
  background: #fff;
  border-radius: 999px;
  width: 18px;
}

.bn-fullwide .bn-dummy-img {
  height: 120px;
}

@media (max-width: 768px) {
  .bn-fullwide .bn-dummy-img {
    height: 80px;
  }
}

.bn-grid {
  gap: 0;
  display: grid;
}

.bn-grid.col-1 {
  grid-template-columns: 1fr;
}

.bn-grid.col-2 {
  grid-template-columns: repeat(2, 1fr);
}

.bn-grid.col-3 {
  grid-template-columns: repeat(3, 1fr);
}

.bn-grid.col-4 {
  grid-template-columns: repeat(4, 1fr);
}

.bn-grid.col-5 {
  grid-template-columns: repeat(5, 1fr);
}

.bn-grid.col-2-1 {
  grid-template-columns: 2fr 1fr;
}

.bn-grid.col-2-1-1 {
  grid-template-columns: 2fr 1fr 1fr;
}

.bn-grid .bn-slider-unit .bn-dummy-img {
  aspect-ratio: 5 / 2;
}

.bn-grid.col-1 .bn-slider-unit .bn-dummy-img {
  aspect-ratio: 5;
  min-height: 80px;
}

.bn-grid.col-4 .bn-slider-unit .bn-dummy-img, .bn-grid.col-5 .bn-slider-unit .bn-dummy-img {
  aspect-ratio: 3 / 2;
}

@media (max-width: 768px) {
  .bn-grid.col-3, .bn-grid.col-4, .bn-grid.col-5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .bn-grid.col-2-1, .bn-grid.col-2-1-1 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .bn-grid.col-2, .bn-grid.col-3, .bn-grid.col-4, .bn-grid.col-5 {
    grid-template-columns: 1fr;
  }
}

.bn-side-wrap {
  z-index: 100;
  flex-direction: column;
  gap: 0;
  display: flex;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.bn-side-wrap.left {
  left: calc(50vw - 770px);
}

.bn-side-wrap.right {
  right: calc(50vw - 770px);
}

.bn-side-item {
  width: 120px;
  position: relative;
}

.bn-side-item a {
  line-height: 0;
  display: block;
}

.bn-side-item .bn-dummy-img {
  width: 120px;
  height: 160px;
}

.bn-side-item img {
  width: 120px;
}

.bn-side-close {
  cursor: pointer;
  background: #00000080;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  display: flex;
  position: absolute;
  top: 5px;
  right: 5px;
}

.bn-side-close svg {
  stroke: #fff;
  width: 9px;
  height: 9px;
}

@media (max-width: 1540px) {
  .bn-side-wrap {
    display: none;
  }
}

.bn-popup-backdrop {
  z-index: 1000;
  background: #00000080;
  display: none;
  position: fixed;
  inset: 0;
}

.bn-popup-backdrop.on {
  display: block;
}

.bn-popup {
  z-index: 1001;
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.bn-popup.on {
  display: block;
}

.bn-popup-inner {
  border-radius: 10px;
  width: calc(100vw - 48px);
  max-width: 480px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px #0000004d;
}

.bn-popup-inner .bn-slider-unit .bn-dummy-img {
  height: 320px;
}

.bn-popup-close {
  cursor: pointer;
  z-index: 10;
  background: #00000080;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
}

.bn-popup-close svg {
  stroke: #fff;
  width: 14px;
  height: 14px;
}

.bn-popup-foot {
  background: #222;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  display: flex;
}

.bn-popup-today {
  color: #ffffffbf;
  cursor: pointer;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  display: flex;
}

.bn-popup-today input {
  accent-color: #fff;
}

.bn-popup-close-txt {
  cursor: pointer;
  color: #ffffffbf;
  background: none;
  border: none;
  font-size: .8rem;
}

.bn-float {
  z-index: 500;
  width: 80px;
  position: fixed;
  bottom: 80px;
  right: 20px;
}

.bn-float a {
  line-height: 0;
  display: block;
}

.bn-float .bn-dummy-img {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

.bn-float-close {
  cursor: pointer;
  background: #333;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  display: flex;
  position: absolute;
  top: -4px;
  right: -4px;
}

.bn-float-close svg {
  stroke: #fff;
  width: 9px;
  height: 9px;
}

@keyframes bnFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

.bn-float {
  animation: 3s ease-in-out infinite bnFloat;
}

:root {
  --bn-floatbar-h: 80px;
}

.bn-float-bar {
  width: 100%;
  height: var(--bn-floatbar-h);
  background: var(--surface);
  box-shadow: 0 0 12px #0000001f;
}

.bn-top-sticky-wrap {
  z-index: 250;
  position: sticky;
  top: 0;
}

.bn-top-sticky-wrap .header {
  position: static;
}

.bn-float-bar.bottom {
  z-index: 500;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.bn-float-bar-inner {
  width: 100%;
  height: 100%;
  position: relative;
}

.bn-float-bar-link {
  line-height: 0;
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bn-float-bar-link .bn-dummy-img {
  border-radius: 0;
  width: 100%;
  height: 100%;
}

.bn-float-bar-actions {
  z-index: 2;
  align-items: center;
  gap: 8px;
  display: flex;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

.bn-float-bar-today {
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  background: #00000080;
  border: 1px solid #ffffff4d;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: .8125rem;
  transition: background .15s;
}

.bn-float-bar-today:hover {
  background: #000000b3;
}

.bn-float-bar-close {
  cursor: pointer;
  background: #00000080;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  transition: background .15s;
  display: flex;
}

.bn-float-bar-close:hover {
  background: #000000b3;
}

.bn-float-bar-close svg {
  stroke: #fff;
  width: 14px;
  height: 14px;
}

@media (max-width: 780px) {
  .bn-float-bar {
    display: none;
  }
}

.bn-inline {
  background: var(--accent-s);
  border: 1px solid rgba(var(--accent-r),.2);
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 14px 20px;
  text-decoration: none;
  transition: background .15s;
  display: flex;
}

.bn-inline:hover {
  background: rgba(var(--accent-r),.1);
}

.bn-inline-left {
  align-items: center;
  gap: 12px;
  display: flex;
}

.bn-inline-icon {
  background: var(--accent);
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  display: flex;
}

.bn-inline-icon svg {
  stroke: #fff;
  width: 20px;
  height: 20px;
}

.bn-inline-title {
  color: var(--text1);
  font-size: .9375rem;
  font-weight: 700;
}

.bn-inline-sub {
  color: var(--text2);
  margin-top: 2px;
  font-size: .8125rem;
}

@media (max-width: 768px) {
  .bn-inline {
    gap: 12px;
    padding: 12px 15px;
  }

  .bn-inline-title {
    font-size: .875rem;
  }

  .bn-inline-sub {
    font-size: .75rem;
  }
}

@media (max-width: 480px) {
  .bn-inline {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
  }

  .bn-inline-left {
    width: 100%;
    display: grid;
  }

  .bn-inline-btn {
    width: 100%;
  }

  .bn-inline-btn .action-btn {
    background: var(--accent);
    color: #fff;
    justify-content: center;
    width: 100%;
  }
}

.bn-icon-pick {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 15px;
}

.bn-icon-grid {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.bn-icon-btn {
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 64px;
  padding: 10px 12px;
  transition: all .15s;
  display: flex;
}

.bn-icon-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.bn-icon-btn.active {
  border-color: var(--accent);
  background: var(--accent-s);
  color: var(--accent);
}

.bn-icon-btn svg {
  width: 20px;
  height: 20px;
}

.bn-icon-btn span {
  color: var(--text3);
  font-size: .7rem;
}

.bn-dummy-img {
  background: linear-gradient(135deg, rgba(var(--accent-r),.12) 0%, rgba(var(--accent-r),.04) 100%);
  width: 100%;
  color: var(--text1);
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  font-weight: 600;
  display: flex;
}

.bn-dummy-img svg {
  width: 18px;
  height: 18px;
  stroke: var(--text1);
}

.sec-label {
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
}

.sec-label svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
}

.tc-side-banner {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 15px;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
  display: block;
  overflow: hidden;
}

.tc-side-banner:hover {
  transform: translateY(-1px);
}

.tc-side-banner-img {
  width: 100%;
  display: block;
}

.tc-side-banner-body {
  background: linear-gradient(135deg, rgba(var(--accent-r),.08) 0%, rgba(var(--accent-r),.02) 100%);
  padding: 16px;
}

.tc-side-banner-title {
  color: var(--text1);
  margin-bottom: 8px;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
}

.tc-side-banner-sub {
  color: var(--text2);
  margin-bottom: 14px;
  font-size: .8rem;
  line-height: 1.7;
}

.tc-side-banner-btn {
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-size: .8125rem;
  font-weight: 700;
  transition: opacity .15s;
  display: inline-flex;
}

.tc-side-banner-btn svg {
  stroke: #fff;
  width: 13px;
  height: 13px;
}

.bn-side-preview {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  grid-template-columns: 200px 1fr;
  align-items: start;
  gap: 20px;
  padding: 20px;
  display: grid;
}

.bn-side-preview-bar {
  flex-direction: column;
  display: flex;
}

.bn-side-preview-label {
  color: var(--text3);
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
}

.bn-side-preview-label svg {
  width: 13px;
  height: 13px;
}

.bn-side-nav {
  flex-direction: column;
  gap: 0;
  margin-bottom: 12px;
  display: flex;
}

.bn-side-nav-link {
  color: var(--text2);
  border-radius: 5px;
  padding: 7px 10px;
  font-size: .875rem;
  text-decoration: none;
  transition: background .12s;
}

.bn-side-nav-link.active {
  background: var(--accent-s);
  color: var(--accent);
  font-weight: 600;
}

.bn-side-phone {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
}

.bn-side-preview-content {
  flex-direction: column;
  gap: 0;
  display: flex;
}

@media (max-width: 768px) {
  .bn-side-preview {
    grid-template-columns: 1fr;
  }
}

/* [project]/apps/web/src/styles/web.css [app-client] (css) */
@supports (color: oklch(from red l c h)) {
  html:root[data-theme="light"] {
    --bg2: oklch(from var(--accent) 98.8% calc(c * .042) h);
  }
}

.notice-box {
  margin-top: 20px;
}

.notice-box .mi-section-header svg {
  stroke: var(--text2);
}

.notice-box-body {
  color: var(--text2);
  padding: 16px 18px;
  font-size: .8125rem;
  line-height: 1.8;
}

.notice-box-body :is(p, li) {
  font-size: inherit;
  line-height: inherit;
}

.notice-box-body :is(h1, h2, h3, h4) {
  color: var(--text1);
  margin: 12px 0 6px;
  font-size: .875rem;
  font-weight: 700;
}

.notice-box-body :is(h1, h2, h3, h4):first-child {
  margin-top: 0;
}

.notice-box-body ul {
  padding-left: 18px;
  list-style: outside;
}

.notice-box-body ol {
  padding-left: 18px;
  list-style: decimal;
}

.notice-box-body img {
  max-width: 100%;
  height: auto;
}

.notice-box-body table {
  display: block;
  overflow-x: auto;
}

.notice-box-body > :last-child {
  margin-bottom: 0;
}

.sub-shorten {
  color: var(--accent-text, var(--accent));
  margin-left: 6px;
  font-size: .75rem;
  font-weight: 600;
}

.sub-change-dates {
  color: var(--text1);
  margin-top: 6px;
  font-size: .875rem;
}

.sub-change-dates strong {
  color: var(--accent-text, var(--accent));
}

.sub-item-foot {
  justify-content: flex-end;
  margin-top: 14px;
  display: flex;
}

.sub-cancel-link {
  color: var(--text3);
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  font-size: .75rem;
  text-decoration: underline;
}

.sub-cancel-link:hover {
  color: var(--text2);
}

.sub-cancel-link:disabled {
  opacity: .5;
  cursor: default;
}

.sub-change-info {
  background: var(--accent-s);
  border: 1px solid rgba(var(--accent-r), .35);
  border-radius: 8px;
  gap: 12px;
  padding: 14px 16px;
  display: flex;
}

.sub-change-info svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent-text, var(--accent));
  flex-shrink: 0;
  margin-top: 1px;
}

.sub-change-title {
  color: var(--accent-text, var(--accent));
  margin-bottom: 4px;
  font-size: .9375rem;
  font-weight: 700;
}

.sub-change-desc {
  color: var(--text1);
  font-size: .8125rem;
  line-height: 1.7;
}

.pm-zones {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 16px 20px 0;
  display: grid;
}

@media (max-width: 640px) {
  .pm-zones {
    grid-template-columns: 1fr;
  }
}

.pm-zone {
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: 8px;
  padding: 12px 14px;
}

.pm-zone.warn {
  border-color: #dc2626;
}

.pm-zone-title {
  color: var(--text1);
  font-size: .875rem;
  font-weight: 700;
}

.pm-zone-hint {
  color: var(--text3);
  margin-top: 2px;
  font-size: .75rem;
}

.pm-zone-body {
  flex-wrap: wrap;
  gap: 6px;
  min-height: 34px;
  margin-top: 10px;
  display: flex;
}

.pm-zone-empty {
  color: var(--text3);
  align-self: center;
  font-size: .8125rem;
}

.pm-card-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: .8125rem;
  display: inline-flex;
}

.pm-card-chip b {
  color: var(--text1);
  font-weight: 600;
}

.pm-card-chip svg {
  width: 14px;
  height: 14px;
}

.pm-zone-warn {
  color: #dc2626;
  align-items: center;
  gap: 6px;
  margin: 10px 20px 0;
  font-size: .8125rem;
  display: flex;
}

.pm-role-btns {
  gap: 6px;
  display: inline-flex;
}

.pm-role-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: .75rem;
  transition: all .15s;
}

.pm-role-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-text, var(--accent));
}

.pm-role-btn:disabled {
  opacity: .4;
  cursor: default;
}

@media (max-width: 960px) {
  .header-a .header-in, .header-b .header-in {
    display: none;
  }
}

.promotion-body img {
  max-width: 100%;
  height: auto;
}

.promotion-body table {
  display: block;
  overflow-x: auto;
}

.evt-form {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  margin: 12px 0;
  padding: 16px;
}

.evt-field {
  margin-bottom: 10px;
}

.evt-label {
  color: var(--text2);
  margin-bottom: 4px;
  font-size: .8125rem;
  display: block;
}

.evt-field input[type="text"], .evt-field textarea, .evt-field select {
  box-sizing: border-box;
  border: 1px solid var(--border);
  background: var(--bg);
  width: 100%;
  color: var(--text1);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: .875rem;
}

.evt-field textarea {
  min-height: 90px;
}

.evt-field label {
  color: var(--text1);
  margin-right: 12px;
  font-size: .875rem;
}

.evt-btn {
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: .875rem;
}

.evt-btn:disabled {
  opacity: .5;
  cursor: default;
}

.evt-msg {
  color: var(--accent-text, var(--accent));
  margin-top: 8px;
  font-size: .8125rem;
}

.evt-msg.is-error {
  color: #dc2626;
}

.sec-more {
  border: 1px solid var(--border);
  width: 26px;
  height: 26px;
  color: var(--text2);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.sec-more:hover {
  color: var(--accent-text, var(--accent));
  border-color: var(--accent);
}

.sec-more svg {
  width: 14px;
  height: 14px;
}

.main-board-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-board-list li a {
  border-bottom: 1px solid var(--border);
  color: var(--text1);
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: .875rem;
  display: flex;
}

.main-board-subject {
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  overflow: hidden;
}

.main-board-date {
  color: var(--text3);
  font-size: .8125rem;
}

.main-board-empty {
  color: var(--text3);
  padding: 10px 0;
  font-size: .875rem;
}

.teacher-carousel {
  position: relative;
}

.teacher-carousel .bn-arr {
  top: 40%;
}

.teacher-track {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: 16px;
  display: flex;
  overflow-x: auto;
}

.teacher-track::-webkit-scrollbar {
  display: none;
}

.teacher-card {
  scroll-snap-align: start;
  flex: 0 0 240px;
}

main .sec {
  margin-top: 10px;
  margin-bottom: 10px;
}

.bn-float-bar {
  height: auto;
  box-shadow: none;
  background: none;
}

.bn-float-bar-inner {
  height: auto;
}

.bn-float-bar-link {
  position: static;
}

.bn-float-bar-link img {
  width: 100%;
  height: auto;
  display: block;
}

.bn-float-bar.top .bn-float-bar-actions {
  top: 10%;
  bottom: auto;
  transform: none;
}

.bn-float-bar.bottom .bn-float-bar-actions {
  top: auto;
  bottom: 10%;
  transform: none;
}

.pd-thumb .course-wish {
  width: 34px;
  height: 34px;
  top: 14px;
  right: 14px;
}

.pd-thumb .course-wish svg {
  width: 17px;
  height: 17px;
}

.bd-thumb {
  position: relative;
}

.bd-thumb .course-wish {
  top: 10px;
  right: 10px;
}

.bd-info .pd-meta-row .pd-meta-item {
  white-space: pre-line;
  line-height: 1.6;
  display: block;
}

.bn-fullwide > .bn-slide img {
  width: 100%;
  display: block;
}

.zip-finder {
  width: calc(100% - 32px);
  max-width: 500px;
  height: auto;
  max-height: calc(100dvh - 40px);
}

.zip-finder-body {
  padding: 0;
  overflow: hidden;
}

.zip-finder-box {
  width: 100%;
  height: min(470px, 100dvh - 120px);
}

.my-nav-link.is-soon {
  color: var(--text3);
  cursor: default;
  opacity: .55;
}

.my-nav-link.is-soon:hover {
  color: var(--text3);
  background: none;
}

.cp-empty {
  text-align: center;
  color: var(--text3);
  padding: 60px 20px;
}

.cp-empty svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5px;
  width: 34px;
  height: 34px;
  margin-bottom: 10px;
}

.lab-desc {
  color: var(--text2);
  margin-bottom: 10px;
  font-size: .855rem;
  line-height: 1.6;
}

.lab-note {
  color: var(--text3);
  margin-top: 10px;
  font-size: .8125rem;
}

.lab-sub {
  color: var(--text1);
  border-top: 1px solid var(--border);
  margin: 22px 0 6px;
  padding-top: 16px;
  font-size: .9375rem;
  font-weight: 700;
}

.lab-desc code, .lab-note code {
  background: var(--bg3);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .95em;
}

.lab-verdict {
  color: var(--accent);
  background: var(--accent-s);
  border-radius: 999px;
  margin-left: auto;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 700;
}

.lab-bar-btn {
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  width: 100%;
  padding: 0;
}

.lab-bar-btn[aria-pressed="true"] .rv-bar-label {
  color: var(--accent);
  font-weight: 700;
}

.lab-bar-btn[aria-pressed="true"] .rv-bar-bg {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

.lab-row {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 26px;
  margin: 4px 0 14px;
  display: flex;
}

.lab-field {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.lab-field-label {
  color: var(--text3);
  font-size: .75rem;
  font-weight: 700;
}

.lab-field input[type="range"] {
  width: 180px;
  accent-color: var(--accent);
}

.lab-choice {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.lab-chip {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: .8125rem;
}

.lab-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.lab-chip.on {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.lab-2col {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}

@media (max-width: 700px) {
  .lab-2col {
    grid-template-columns: 1fr;
  }
}

.lab-box {
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: 10px;
  padding: 14px;
}

.lab-box.on {
  border-color: var(--accent);
  background: var(--accent-s);
}

.lab-tag {
  color: var(--text3);
  margin-bottom: 8px;
  font-size: .75rem;
  font-weight: 700;
}

.lab-box.on .lab-tag {
  color: var(--accent);
}

.lab-toggle {
  cursor: pointer;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: .855rem;
  display: inline-flex;
}

.lab-log {
  color: var(--text2);
  margin-top: 10px;
  font-size: .8125rem;
}

.lab-log li {
  border-bottom: 1px dashed var(--border);
  padding: 3px 0;
}

.lab-stage {
  border: 1px dashed var(--border);
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  min-height: 150px;
  padding: 14px;
  display: flex;
}

.lab-morph-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  display: grid;
}

.lab-morph-card {
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  border-radius: 10px;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  display: flex;
  overflow: hidden;
}

.lab-morph-thumb {
  background: var(--accent);
  color: #fff;
  justify-content: center;
  align-items: center;
  height: 84px;
  font-family: oswald, sans-serif;
  font-size: 1.6rem;
  display: flex;
}

.lab-morph-title {
  color: var(--text1);
  padding: 0 12px 12px;
  font-size: .855rem;
  font-weight: 600;
}

.lab-morph-detail {
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.lab-morph-hero {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 240px;
  height: 160px;
  font-family: oswald, sans-serif;
  font-size: 3rem;
  display: flex;
}

@media (max-width: 700px) {
  .lab-morph-grid {
    grid-template-columns: 1fr;
  }

  .lab-morph-detail {
    flex-direction: column;
  }
}

.lab-skel-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
  display: grid;
}

@media (max-width: 700px) {
  .lab-skel-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lab-skel-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 10px;
}

.lab-skel {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: 1.2s linear infinite lab-shimmer;
}

.lab-skel-thumb {
  height: 70px;
  margin-bottom: 8px;
}

.lab-skel-line {
  height: 11px;
  margin-bottom: 6px;
}

.lab-skel-line.short {
  width: 55%;
}

@keyframes lab-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

.lab-cart {
  background: var(--accent);
  color: #fff;
  border: none;
  transition: background .18s, transform .18s;
}

.lab-cart.is-added {
  background: #16a34a;
  transform: scale(1.04);
}

.lab-cart-badge {
  color: var(--text2);
  font-size: .8125rem;
}

.lab-toast {
  background: var(--text1);
  color: var(--surface);
  z-index: 900;
  border-radius: 999px;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  font-size: .855rem;
  animation: .22s ease-out lab-rise;
  display: flex;
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 6px 20px #00000040;
}

@keyframes lab-rise {
  from {
    opacity: 0;
    transform: translateX(-50%)translateY(10px);
  }
}

.lab-dialog {
  border: 1px solid var(--border);
  background: var(--surface);
  width: 92vw;
  max-width: 460px;
  color: var(--text1);
  border-radius: 12px;
  padding: 0;
}

.lab-dialog::backdrop {
  background: #00000073;
}

.lab-motion-row {
  align-items: center;
  gap: 12px;
  display: flex;
}

.lab-motion-ball {
  background: var(--accent);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  animation: 1s ease-in-out infinite alternate lab-bounce;
}

@keyframes lab-bounce {
  to {
    transform: translateX(70px);
  }
}

.lab-cq-grid {
  border: 1px dashed var(--accent);
  border-radius: 10px;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 100%;
  padding: 12px;
  display: grid;
}

.lab-cq-wrap {
  container-type: inline-size;
}

.lab-cq-badges {
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 5px;
  display: flex;
}

.lab-cq-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  gap: 12px;
  height: 100%;
  display: flex;
  overflow: hidden;
}

.lab-cq-thumb {
  background: var(--accent);
  color: #fff;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 96px;
  height: 90px;
  font-family: oswald, sans-serif;
  font-size: 1.5rem;
  display: flex;
}

.lab-cq-body {
  padding: 10px 12px 12px 0;
}

@container (max-width: 220px) {
  .lab-cq-card {
    flex-direction: column;
  }

  .lab-cq-thumb {
    width: 100%;
    height: 74px;
  }

  .lab-cq-body {
    padding: 0 12px 12px;
  }

  .lab-cq-extra, .lab-cq-badges {
    display: none;
  }
}

.lab-cq-extra {
  color: var(--text3);
  margin: 4px 0 6px;
  font-size: .8125rem;
}

.lab-scroll {
  border: 1px dashed var(--border);
  border-radius: 10px;
  max-height: 260px;
  padding: 12px;
  overflow-y: auto;
}

.lab-scroll-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 8px;
  margin-bottom: 10px;
  padding: 22px 14px;
  font-size: .855rem;
}

@supports (animation-timeline: view()) {
  .lab-scroll-anim {
    animation: linear both lab-rise-in;
    animation-timeline: view();
    animation-range: entry cover 30%;
  }

  @keyframes lab-rise-in {
    from {
      opacity: 0;
      transform: translateY(46px)scale(.9);
    }

    to {
      opacity: 1;
      transform: none;
    }
  }
}

.lab-support {
  color: var(--text2);
  margin-bottom: 12px;
  font-size: .855rem;
}

.lab-support .ok {
  color: #16a34a;
}

.lab-support .no {
  color: #ea580c;
}

.lab-sentinel {
  text-align: center;
  color: var(--text3);
  padding: 14px;
  font-size: .8125rem;
}

.lab-swatches {
  gap: 6px;
  margin-bottom: 8px;
  display: flex;
}

.lab-swatches span {
  border: 1px solid var(--border);
  border-radius: 6px;
  flex: 1;
  height: 42px;
}

.lab-oklch span:first-child {
  background: oklch(from var(--accent) 45% c h);
}

.lab-oklch span:nth-child(2) {
  background: oklch(from var(--accent) 60% c h);
}

.lab-oklch span:nth-child(3) {
  background: oklch(from var(--accent) 72% c h);
}

.lab-oklch span:nth-child(4) {
  background: oklch(from var(--accent) 85% c h);
}

.lab-oklch span:nth-child(5) {
  background: oklch(from var(--accent) 94% c h);
}

.lab-static {
  position: static;
}

.lab-springy {
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
  position: static;
}

.lab-springy:active {
  transform: scale(.86);
}

.lab-springy.on {
  transform: scale(1.14);
}

.lab-palette-dim {
  z-index: 800;
  background: #0006;
  position: fixed;
  inset: 0;
}

.lab-palette {
  background: var(--surface);
  border: 1px solid var(--border);
  z-index: 810;
  border-radius: 14px;
  width: min(560px, 92vw);
  animation: .16s ease-out lab-pop;
  position: fixed;
  top: 14vh;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%);
  box-shadow: 0 24px 60px #00000047;
}

@keyframes lab-pop {
  from {
    opacity: 0;
    transform: translateX(-50%)translateY(-8px)scale(.98);
  }
}

.lab-palette-input {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  display: flex;
}

.lab-palette-input input {
  color: var(--text1);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  font-family: inherit;
  font-size: .9375rem;
}

.lab-palette-input kbd {
  color: var(--text3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .6875rem;
}

.lab-palette-list {
  max-height: 320px;
  padding: 6px;
  overflow-y: auto;
}

.lab-palette-row {
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--text1);
  background: none;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: .875rem;
  display: flex;
}

.lab-palette-row:hover {
  background: var(--accent-s);
  color: var(--accent);
}

.lab-palette-row em {
  color: var(--text3);
  margin-left: auto;
  font-size: .75rem;
  font-style: normal;
}

.lab-hover-card {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
}

.lab-hover-card .course-title {
  margin: 0;
  padding: 10px 12px 12px;
}

.lab-hover-thumb {
  height: 84px;
}

.lab-hover-play {
  background: #111;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 100%;
  display: flex;
}

.lab-hover-bar {
  background: #ffffff47;
  border-radius: 2px;
  width: 70%;
  height: 3px;
  overflow: hidden;
}

.lab-hover-bar span {
  background: var(--accent);
  height: 100%;
  animation: 4s linear forwards lab-progress;
  display: block;
}

@keyframes lab-progress {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

.lab-hover-label {
  color: #fffc;
  align-items: center;
  gap: 4px;
  font-size: .75rem;
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .lab-motion-ball, .lab-skel, .lab-hover-bar span, .lab-toast, .lab-palette {
    animation: none !important;
  }

  .lab-springy, .lab-cart {
    transition: none !important;
  }

  .lab-scroll-anim {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

.lab-cq-readout {
  color: var(--text2);
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: .855rem;
  display: flex;
}

.lab-cq-readout span {
  border-radius: 999px;
  padding: 2px 9px;
  font-size: .75rem;
  font-weight: 700;
}

.lab-cq-readout .wide {
  background: var(--accent-s);
  color: var(--accent);
}

.lab-cq-readout .fold {
  color: #ea580c;
  background: #fff1e7;
}

.lab-color-picker {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  display: flex;
}

.lab-color-input {
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  border-radius: 8px;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 5px;
  display: inline-flex;
}

.lab-color-input input {
  cursor: pointer;
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  padding: 0;
}

.lab-color-input span {
  color: var(--text2);
  font-family: monospace;
  font-size: .8125rem;
}

.lab-color-chip {
  cursor: pointer;
  border: 2px solid #0000;
  border-radius: 8px;
  width: 30px;
  height: 30px;
}

.lab-color-chip.on {
  border-color: var(--text1);
}

.lab-color-reset {
  color: var(--text2);
  border: 1px solid var(--border);
  cursor: pointer;
  background: none;
  border-radius: 8px;
  padding: 6px 11px;
  font-size: .8125rem;
}

.lab-ui-sample {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  display: flex;
}

.lab-ui-btn {
  color: #fff;
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-family: inherit;
  font-size: .855rem;
  font-weight: 500;
}

.lab-ui-btn.ghost {
  background: var(--surface);
  border: 1.5px solid;
}

.lab-ui-badge {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: .7rem;
  font-weight: 700;
}

.lab-ui-chip {
  border: 1px solid;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: .8125rem;
}

.lab-ui-link {
  font-size: .855rem;
  font-weight: 600;
  text-decoration: none;
}

.lab-ui-card {
  border: 1px solid;
  border-radius: 10px;
  margin-bottom: 12px;
  padding: 12px 14px;
}

.lab-ui-card p {
  margin: 0 0 3px;
}

.lab-ratio {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 10px;
  display: grid;
}

.lab-ratio dt {
  color: var(--text3);
  margin-bottom: 2px;
  font-size: .75rem;
}

.lab-ratio dd {
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: .875rem;
  display: flex;
}

.lab-ratio span {
  border-radius: 999px;
  padding: 1px 7px;
  font-size: .6875rem;
  font-weight: 700;
}

.lab-ratio .ok {
  color: #15803d;
  background: #dcfce7;
}

.lab-ratio .warn {
  color: #b45309;
  background: #fef3c7;
}

.lab-ratio .bad {
  color: #b91c1c;
  background: #fee2e2;
}

.lab-color-explain {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-top: 14px;
  padding: 14px;
}

.lab-color-explain p {
  color: var(--text2);
  margin: 0 0 8px;
  font-size: .855rem;
}

.lab-color-explain ul {
  margin: 0 0 8px;
  padding-left: 18px;
}

.lab-color-explain li {
  color: var(--text2);
  margin-bottom: 5px;
  font-size: .855rem;
  line-height: 1.65;
}

.sk {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: 1.2s linear infinite sk-shimmer;
  display: block;
}

@keyframes sk-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

.sk-title {
  width: 140px;
  height: 26px;
}

.sk-row {
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: 10px;
}

.sk-row-tabs {
  border-radius: 6px 6px 0 0;
  height: 46px;
}

.sk-row-cat {
  height: 64px;
}

.sk-row-search {
  height: 62px;
}

.sk-row-sort {
  width: 200px;
  height: 32px;
  margin-left: auto;
}

.sk-thumb {
  aspect-ratio: 4 / 3;
  border-radius: 10px 10px 0 0;
}

.sk-line {
  height: 12px;
  margin-bottom: 7px;
}

.sk-line.short {
  width: 55%;
}

.sk-price {
  width: 40%;
  height: 16px;
  margin-top: 10px;
}

.sk-block {
  border-radius: 12px;
  height: 320px;
}

.sk-summary-card {
  border-radius: 8px;
  height: 140px;
}

.sk-my-row {
  height: 132px;
  margin-bottom: 10px;
}

.sk-my-user {
  height: 68px;
}

.sk-my-nav {
  height: 420px;
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.course-wish, .clist-wish {
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background .15s;
}

.course-wish:active, .clist-wish:active {
  transform: scale(.86);
}

.course-wish.on, .clist-wish.on {
  transform: scale(1.12);
}

.course-cart {
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background .18s, color .18s;
}

.course-cart:active {
  transform: scale(.92);
}

.course-cart.is-added {
  transform: scale(1.06);
  color: #fff !important;
  background: #16a34a !important;
  border-color: #16a34a !important;
}

.list-sentinel {
  text-align: center;
  color: var(--text3);
  min-height: 40px;
  padding: 18px 0 6px;
  font-size: .8125rem;
}

.list-sentinel.is-done {
  min-height: 0;
  padding: 0;
}

.pal-dim {
  z-index: 940;
  background: #0006;
  position: fixed;
  inset: 0;
}

.pal {
  background: var(--surface);
  border: 1px solid var(--border);
  z-index: 941;
  border-radius: 14px;
  width: min(560px, 92vw);
  animation: .16s ease-out pal-pop;
  position: fixed;
  top: 14vh;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%);
  box-shadow: 0 24px 60px #00000047;
}

@keyframes pal-pop {
  from {
    opacity: 0;
    transform: translateX(-50%)translateY(-8px)scale(.98);
  }
}

.pal-input {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 9px;
  padding: 14px 16px;
  display: flex;
}

.pal-input svg {
  stroke: var(--text3);
  flex-shrink: 0;
}

.pal-input input {
  color: var(--text1);
  background: none;
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: .9375rem;
}

.pal-input kbd {
  color: var(--text3);
  border: 1px solid var(--border);
  border-radius: 4px;
  flex-shrink: 0;
  padding: 1px 5px;
  font-size: .6875rem;
}

.pal-esc {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: inline-flex;
}

.pal-esc:hover kbd {
  color: var(--text1);
  border-color: var(--text3);
}

.pal-busy {
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  animation: .7s linear infinite pal-spin;
}

@keyframes pal-spin {
  to {
    transform: rotate(360deg);
  }
}

.pal-list {
  max-height: 320px;
  padding: 6px;
  overflow-y: auto;
}

.pal-row {
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: var(--text1);
  background: none;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .875rem;
  display: flex;
}

.pal-row.active {
  background: var(--accent-s);
  color: var(--accent-text, var(--accent));
}

.pal-row span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.pal-row em {
  color: var(--text3);
  flex-shrink: 0;
  margin-left: auto;
  font-size: .75rem;
  font-style: normal;
}

.hp-controls {
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 8px;
  display: flex;
}

.hp-controls label {
  color: var(--text2);
  align-items: center;
  gap: 8px;
  font-size: .855rem;
  display: flex;
}

.hp-controls input[type="range"] {
  width: 140px;
}

.hp-quality {
  gap: 4px;
  display: inline-flex;
}

.hp-q {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  cursor: pointer;
  border-radius: 999px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: .75rem;
}

.hp-q.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.hp-thumb {
  aspect-ratio: 16 / 9;
  background: #111;
  position: relative;
  overflow: hidden;
}

.hp-frame {
  background-repeat: no-repeat;
  position: absolute;
  inset: 0;
}

.hp-frame.fade {
  transition: opacity .28s linear;
}

.lab-morph-grid.hp-real {
  grid-template-columns: repeat(auto-fill, 288px);
}

.hp-lbl {
  color: var(--text3);
  margin-right: 2px;
  font-size: .75rem;
}

.hp-badge {
  color: #fff;
  background: #0000009e;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  font-size: .6875rem;
  font-weight: 600;
  display: inline-flex;
  position: absolute;
  top: 8px;
  left: 8px;
}

.hp-time {
  color: #fff;
  background: #000000b8;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: .6875rem;
  position: absolute;
  bottom: 8px;
  right: 8px;
}

.hp-none {
  color: #fff9;
  justify-content: center;
  align-items: center;
  font-size: .8125rem;
  display: flex;
  position: absolute;
  inset: 0;
}

.hp-video {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
}

.hp-kind {
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .6875rem;
  font-weight: 700;
  position: absolute;
  top: 8px;
  right: 8px;
}

.hp-meta {
  color: var(--text3);
  padding: 0 12px 12px;
  font-size: .6875rem;
  line-height: 1.5;
}

.course-card:has(.cp-wrap) {
  z-index: 5;
  position: relative;
}

.clist-item:has(.cp-wrap) {
  z-index: 5;
}

.clist-item .course-thumb, .clist-item .clist-thumb {
  aspect-ratio: 1;
  width: 72px;
  height: 72px;
}

@media (max-width: 768px) {
  .clist-item .course-thumb, .clist-item .clist-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 480px) {
  .clist-item .course-thumb, .clist-item .clist-thumb {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
  }
}

.clist-item .course-thumb, .clist-item .clist-thumb {
  overflow: hidden;
}

.clist-item .course-thumb img {
  border-radius: 0;
}

.course-thumb {
  min-width: 0;
  min-height: 0;
}

.course-thumb:has(.cp-wrap) {
  overflow: visible;
}

.cp-wrap {
  aspect-ratio: 16 / 9;
  z-index: 6;
  pointer-events: none;
  width: auto;
  height: 100%;
  transform: translate(-50%,-50%) scaleX(var(--cp-from));
  opacity: 0;
  --cp-from: .75;
  background: #000;
  border: 0;
  border-radius: 10px;
  animation: .2s ease-out forwards cp-in;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  box-shadow: 0 12px 32px #00000052;
}

@keyframes cp-in {
  to {
    opacity: 1;
    transform: translate(-50%, -50%)scaleX(1);
  }
}

.cp-media {
  object-fit: cover;
  transform-origin: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  animation: .2s ease-out forwards cp-in-media;
  display: block;
  position: absolute;
  inset: 0;
}

@keyframes cp-in-media {
  from {
    transform: scaleX(1.33333);
  }

  to {
    transform: scaleX(1);
  }
}

.cp-wrap.is-closing {
  pointer-events: none;
  animation: .18s ease-in forwards cp-out;
}

@keyframes cp-out {
  from {
    opacity: 1;
    transform: translate(-50%, -50%)scaleX(1);
  }

  to {
    transform: translate(-50%,-50%) scaleX(var(--cp-from));
    opacity: 0;
  }
}

.cp-wrap.is-closing .cp-media {
  animation: .18s ease-in forwards cp-out-media;
}

@keyframes cp-out-media {
  from {
    transform: scaleX(1);
  }

  to {
    transform: scaleX(1.33333);
  }
}

.cp-wrap.no-anim, .cp-wrap.no-anim .cp-media {
  animation: none;
}

.cp-wrap.no-anim {
  opacity: 1;
  transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  .cp-wrap, .cp-media {
    animation: none;
  }

  .cp-wrap {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

.cart-group-other {
  border-style: dashed;
}

.cart-group-other .cart-group-header {
  background: var(--bg3);
}

.cart-group-foot {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  display: flex;
}

.cart-item-plat {
  vertical-align: middle;
  margin-right: 5px;
}

.cart-item-benefit {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  margin-bottom: 3px;
  padding: 1px 7px;
  font-size: .6875rem;
  font-weight: 700;
  display: inline-block;
}

.cart-item-price del {
  color: var(--text3);
  margin-right: 6px;
  font-size: .8125rem;
  font-weight: 400;
}

.cart-user-info {
  align-items: center;
  gap: 8px;
  display: flex;
}

.cart-info-item {
  color: var(--text3);
  font-size: .8125rem;
}

.cart-info-item strong {
  color: var(--text1);
  font-weight: 700;
}

.cart-info-item strong.accent {
  color: var(--accent);
}

.cart-info-sep {
  color: var(--border2);
}

.cart-info-val {
  color: var(--text1);
  font-weight: 700;
}

.cart-info-val.accent {
  color: var(--accent);
}

.cart-toolbar {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px 14px;
  display: flex;
}

.cart-toolbar .custom-check, .cart-list-wrap .custom-check {
  flex-direction: row;
}

.cart-layout {
  grid-template-columns: 1fr 280px;
  align-items: start;
  gap: 16px;
  display: grid;
}

.cart-list-wrap {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.cart-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.cart-group-header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  display: flex;
}

.cart-group-title {
  color: var(--text1);
  font-size: .9rem;
  font-weight: 700;
}

.cart-group-total {
  color: var(--accent);
  font-size: .9rem;
  font-weight: 700;
}

.cart-total-cnt {
  color: var(--text1);
}

.cart-item {
  border-bottom: 1px solid var(--border);
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  transition: background .12s;
  display: flex;
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item:hover {
  background: var(--bg2);
}

.cart-item-chk {
  flex-shrink: 0;
}

.cart-item-thumb {
  aspect-ratio: 4 / 3;
  background: var(--bg3);
  cursor: pointer;
  border-radius: 6px;
  flex-shrink: 0;
  flex-basis: 80px;
  overflow: hidden;
}

.cart-thumb-no-img {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.cart-thumb-no-img svg {
  width: 22px;
  height: 22px;
  stroke: var(--border2);
}

.cart-thumb-no-img i {
  color: var(--border2);
}

.cart-item-info {
  flex: 1;
  min-width: 0;
}

.cart-item-depth {
  color: var(--text3);
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-bottom: 4px;
  font-size: .75rem;
  display: flex;
}

.cart-item-depth svg {
  width: 11px;
  height: 11px;
  stroke: var(--text3);
}

.cart-depth-del {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  align-items: center;
  padding: 0;
  transition: color .15s;
  display: inline-flex;
}

.cart-depth-del:hover {
  color: #ef4444;
}

.cart-depth-del svg {
  width: 12px;
  height: 12px;
}

.cart-item-name {
  color: var(--text1);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
}

.cart-qty {
  border: 1px solid var(--border2);
  border-radius: 4px;
  align-items: center;
  gap: 0;
  width: fit-content;
  margin-top: 8px;
  display: flex;
  overflow: hidden;
}

.cart-qty-btn {
  background: var(--bg2);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 1;
  transition: background .12s;
  display: flex;
}

.cart-qty-btn:hover {
  background: var(--bg3);
}

.cart-qty-btn svg {
  width: 12px;
  height: 12px;
}

.cart-qty-input {
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
  width: 40px;
  height: 28px;
  color: var(--text1);
  background: var(--surface);
  outline: none;
  font-size: .8125rem;
}

.cart-item-right {
  flex-direction: column;
  flex-shrink: 0;
  align-items: flex-end;
  gap: 8px;
  display: flex;
}

.cart-item-price {
  color: var(--text1);
  white-space: nowrap;
  font-size: .9375rem;
  font-weight: 700;
}

.cart-del-btn {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  align-items: center;
  padding: 0;
  transition: color .15s;
  display: flex;
}

.cart-del-btn:hover {
  color: #ef4444;
}

.cart-del-btn svg {
  width: 15px;
  height: 15px;
}

.cart-empty-row {
  color: var(--text3);
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 24px;
  font-size: .875rem;
  display: flex;
}

.cart-empty-row svg {
  width: 18px;
  height: 18px;
  stroke: var(--text3);
}

.cart-summary-inner {
  top: calc(var(--header-height) + 16px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  position: sticky;
  overflow: hidden;
}

.cart-summary-title {
  color: var(--text1);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  padding: 14px 18px;
  font-size: .9375rem;
  font-weight: 700;
}

.cart-summary-rows {
  border-bottom: 1px solid var(--border);
  flex-direction: column;
  gap: 10px;
  padding: 14px 18px;
  display: flex;
}

.cart-summary-row {
  color: var(--text2);
  justify-content: space-between;
  font-size: .875rem;
  display: flex;
}

.cart-summary-total {
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  display: flex;
}

.cart-summary-total span:first-child {
  color: var(--text1);
  font-size: .9rem;
  font-weight: 700;
}

.cart-total-price {
  color: var(--accent);
  font-size: 1.125rem;
  font-weight: 700;
}

.cart-buy-btns {
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  display: flex;
}

.cart-buy-btns button {
  display: list-item;
}

@media (max-width: 1024px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .cart-summary-inner {
    position: static;
  }
}

@media (max-width: 768px) {
  .cart-item {
    gap: 8px;
    padding: 12px;
  }

  .cart-item-thumb {
    width: 52px;
    height: 52px;
  }

  .cart-item-name {
    font-size: .8125rem;
  }

  .cart-user-info {
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
  }

  .cart-info-sep {
    display: none;
  }
}

@media (max-width: 480px) {
  .cart-item-right {
    flex-direction: column-reverse;
    gap: 10px;
  }

  .cart-item-price {
    flex-direction: column;
    display: flex;
  }
}

.ck-start-row {
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  display: flex;
}

.ck-start-row .ck-select {
  width: auto;
  min-width: 160px;
  padding-top: 6px;
  padding-bottom: 6px;
  font-size: .8125rem;
}

.ck-note-body {
  color: var(--text2);
  font-size: .8125rem;
  line-height: 1.6;
}

.ck-note-body img {
  max-width: 100%;
  height: auto;
}

.ck-note-body table {
  display: block;
  overflow-x: auto;
}

.ck-product.is-present {
  background: var(--bg2);
}

.ck-product-thumb img {
  object-fit: cover;
  border-radius: 6px;
  width: 100%;
  height: 100%;
}

.oh-total {
  color: var(--text2);
  text-align: right;
  padding: 10px 16px 14px;
  font-size: .8125rem;
}

.oh-total strong {
  color: var(--text1);
}

.oh-method {
  color: var(--text3);
}

.oh-period {
  width: auto;
  min-width: 110px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: .8125rem;
}

.oh-thumb img {
  object-fit: cover;
  border-radius: 6px;
  width: 100%;
  height: 100%;
}

.od-ship-msg {
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px;
}

.od-acc > .od-acc-header {
  cursor: default;
}

.od-acc > .od-acc-header:hover {
  background: var(--bg2);
}

.ck-expired {
  max-width: 560px;
  margin: 40px auto;
}

.ck-expired-title {
  color: var(--text1);
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: 700;
  display: flex;
}

.ck-expired-title svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}

.login-find-links {
  align-items: center;
  gap: 5px;
  display: inline-flex;
}

.login-find-sep {
  color: var(--text3);
  font-size: .8125rem;
}

.ck-product-meta, .oh-product-meta {
  color: var(--text3);
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: .75rem;
  display: flex;
}

.fs13 {
  font-size: 13px;
}

.price-discount {
  color: var(--accent);
  font-weight: 700;
}

.ck-present-head {
  color: var(--text2);
  align-items: center;
  gap: 6px;
  padding: 10px 0 2px;
  display: flex;
}

.ck-present-head svg {
  width: 14px;
  height: 14px;
}

.addr-item.selected {
  background: none;
}

.ck-point-input-wrap {
  flex: 1;
  display: flex;
  position: relative;
}

.ck-point-input-wrap .ck-point-input {
  flex: 1;
  padding-right: 34px;
}

.ck-point-input-wrap .ck-point-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ck-point-input-wrap .ck-point-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ck-point-input-wrap .ck-point-input[type="number"] {
  appearance: textfield;
}

.ck-point-clear {
  background: var(--bg3);
  width: 20px;
  height: 20px;
  color: var(--text3);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background .15s, color .15s;
  display: flex;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.ck-point-clear:hover {
  background: var(--border2);
  color: var(--text1);
}

.ck-point-clear svg {
  width: 12px;
  height: 12px;
}

.ck-note {
  padding: 0 18px;
}

.ck-note-head {
  cursor: pointer;
  width: auto;
  color: var(--text2);
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  gap: 4px;
  padding: 5px 0;
  font-size: .8125rem;
  display: inline-flex;
}

.ck-note-head:hover {
  color: var(--text1);
}

.ck-note-head svg {
  stroke-width: 2px;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.ck-note .ck-note-body {
  background: rgba(var(--accent-r), .06);
  border-radius: 6px;
  margin: 2px 0 10px;
  padding: 12px 14px;
  line-height: 1.7;
}

.ck-summary-total + .ck-note {
  padding-top: 8px;
}

.bd-rel-price-item + .bd-rel-price-item {
  border-left: 1px solid var(--border);
  margin-left: 8px;
  padding-left: 8px;
}

.bd-rel-price-item em {
  color: var(--text3);
  margin-right: 3px;
  font-style: normal;
  font-weight: 500;
}

.pd-benefit {
  border: 1px solid var(--accent);
  background: var(--accent-soft, #00000005);
  border-radius: 10px;
  margin-bottom: 24px;
  padding: 16px 18px;
}

.pd-benefit-head {
  color: var(--accent);
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: .9375rem;
  font-weight: 700;
  display: flex;
}

.pd-benefit-head svg {
  width: 15px;
  height: 15px;
}

.pd-benefit-list {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.pd-benefit-item + .pd-benefit-item {
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}

.pd-benefit-item.is-on .pd-benefit-give {
  color: var(--accent);
}

.pd-benefit-on {
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: .6875rem;
  font-weight: 700;
  display: inline-block;
}

.pd-buy-tip {
  background: var(--accent);
  color: #fff;
  white-space: nowrap;
  border-radius: 6px;
  margin-left: 12px;
  padding: 2px 8px;
  font-size: .6875rem;
  font-weight: 700;
  position: relative;
}

.pd-buy-tip:before {
  content: "";
  border: 4px solid #0000;
  border-right-color: var(--accent);
  margin-top: -4px;
  position: absolute;
  top: 50%;
  left: -4px;
}

@media (max-width: 560px) {
  .pd-buy-tip {
    display: none;
  }
}

.pd-buy-group-lbl.is-benefit {
  color: var(--accent);
}

.pd-benefit-add {
  border-style: dashed;
}

.pd-benefit-add .pd-benefit-head {
  color: var(--accent);
}

.pd-total-cut {
  color: var(--accent);
  margin-bottom: 6px;
  font-size: .8125rem;
  font-weight: 700;
}

.pd-benefit-when {
  color: var(--text2);
  margin-bottom: 4px;
  font-size: .875rem;
}

.pd-benefit-what {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.pd-benefit-give {
  color: var(--text1);
  font-size: .875rem;
  font-weight: 700;
}

.pd-benefit-give + .pd-benefit-give:before {
  content: "·";
  color: var(--text3);
  margin-right: 6px;
  font-weight: 400;
}

.pd-benefit-note {
  color: var(--text3);
  margin-top: 4px;
  font-size: .8125rem;
}

.pd-benefit-use {
  color: var(--text2);
  margin-top: 4px;
  font-size: .8125rem;
  font-weight: 700;
}

.pd-benefit-period {
  color: var(--text3);
  margin-top: 4px;
  font-size: .8125rem;
}

.pd-total-val.is-cut, .bd-qty-total strong.is-cut {
  color: var(--accent);
}

.mypage-content .mi-section {
  margin-bottom: 20px;
}

.modal-alert {
  max-width: 400px;
}

.lab-toast-gauge {
  background: var(--accent);
  transform-origin: 0;
  width: 100%;
  height: 3px;
  animation-name: lab-gauge;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  position: absolute;
  bottom: 0;
  left: 0;
}

.toast:hover .lab-toast-gauge {
  animation-play-state: paused;
}

@keyframes lab-gauge {
  to {
    transform: scaleX(0);
  }
}

.layer-footer.jc-center {
  justify-content: center;
}

.login-title {
  color: var(--text1);
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.lab-work-frame {
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  min-height: 180px;
  margin-top: 12px;
  display: flex;
}

.working-block {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 180px;
  padding: 32px 20px;
  display: flex;
}

.working-overlay {
  z-index: 1200;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  background: #00000073;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.working-card {
  text-align: center;
  background: var(--surface);
  border-radius: 14px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: min(400px, 100vw - 32px);
  padding: 32px 28px;
  display: flex;
  box-shadow: 0 10px 40px #0000002e;
}

.working-msg {
  color: var(--text1);
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
}

.working-note {
  color: var(--text2);
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: .8rem;
  display: flex;
}

.working-note svg {
  flex-shrink: 0;
}

.working-dots {
  align-items: flex-end;
  gap: 7px;
  height: 38px;
  display: inline-flex;
}

.working-dots i {
  background: var(--accent);
  border-radius: 50%;
  width: 9px;
  height: 9px;
  animation: 1.1s ease-in-out infinite working-bounce;
}

.working-dots i:nth-child(2) {
  animation-delay: .15s;
}

.working-dots i:nth-child(3) {
  animation-delay: .3s;
}

@keyframes working-bounce {
  0%, 60%, 100% {
    opacity: .45;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-9px);
  }
}

.working-dots.is-inline {
  vertical-align: 1px;
  gap: 4px;
  height: auto;
  margin-right: 5px;
}

.working-dots.is-inline i {
  background: currentColor;
  width: 5px;
  height: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .working-dots i {
    opacity: .8;
    transform: none;
  }
}

.ck-pay-btn:disabled {
  opacity: .45;
  cursor: default;
}

.ck-pay-btn:disabled:hover {
  opacity: .45;
}

.cp-total {
  color: var(--text3);
  font-size: .875rem;
}

.cp-total strong {
  color: var(--text1);
  font-weight: 700;
}

.cp-list {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  display: grid;
}

.cp-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  transition: border-color .15s, box-shadow .15s;
}

.cp-item:hover {
  border-color: var(--border2);
  box-shadow: var(--shadow);
}

.cp-item.expired {
  opacity: .5;
}

.cp-item-top {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  display: flex;
}

.cp-amount {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
}

.cp-apply {
  color: var(--text3);
  flex-shrink: 0;
  align-items: center;
  gap: 2px;
  font-size: .8125rem;
  text-decoration: none;
  transition: color .15s;
  display: inline-flex;
}

.cp-apply:hover {
  color: var(--accent);
}

.cp-apply svg {
  width: 13px;
  height: 13px;
}

.cp-desc {
  color: var(--text3);
  margin-bottom: 10px;
  font-size: .8125rem;
}

.cp-item-bottom {
  border-top: 1px dashed var(--border);
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  display: flex;
}

.cp-tag {
  border: 1px solid var(--accent);
  color: var(--accent);
  background: var(--accent-s);
  border-radius: 999px;
  align-items: center;
  padding: 2px 8px;
  font-size: .75rem;
  font-weight: 600;
  display: inline-flex;
}

.cp-expire {
  color: var(--text2);
  font-size: .8rem;
  font-weight: 500;
}

.cp-empty {
  color: var(--text3);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 60px 0;
  display: flex;
}

.cp-empty svg {
  width: 36px;
  height: 36px;
  stroke: var(--text3);
}

.cp-empty p {
  font-size: .875rem;
}

.cp-reg-input {
  border: 1px solid var(--border2);
  background: var(--surface);
  color: var(--text1);
  border-radius: 4px;
  outline: none;
  flex: 1;
  padding: 8px 12px;
  font-family: inherit;
  font-size: .875rem;
}

.cp-reg-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-r), .1);
}

.cp-reg-input::placeholder {
  color: var(--text3);
}

@media (max-width: 768px) {
  .cp-item {
    padding: 14px 16px;
  }

  .cp-list {
    grid-template-columns: repeat(1, 1fr);
  }
}

@media (max-width: 480px) {
  .cp-amount {
    font-size: .9rem;
  }

  .cp-reg-input {
    font-size: .8125rem;
  }
}

.pt-link {
  color: var(--text1);
  text-underline-offset: 2px;
  text-decoration: underline;
}

.pt-link:hover {
  color: var(--accent);
}

.cp-target-list {
  flex-direction: column;
  display: flex;
}

.cp-target {
  border-bottom: 1px solid var(--border);
  color: var(--text1);
  align-items: center;
  gap: 8px;
  padding: 10px 2px;
  text-decoration: none;
  transition: background .15s;
  display: flex;
}

.cp-target:last-child {
  border-bottom: none;
}

.cp-target:hover {
  background: var(--bg2);
}

.cp-target .badge {
  flex-shrink: 0;
}

.cp-target svg {
  color: var(--text3);
  flex-shrink: 0;
}

.cp-target-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  font-size: .875rem;
  overflow: hidden;
}

.cp-badges {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.cp-item-bottom {
  flex-wrap: wrap;
  gap: 6px;
}

.lab-sub {
  border-top: 1px dashed var(--border);
  margin-top: 24px;
  padding-top: 20px;
}

.lab-sub-title {
  color: var(--text1);
  margin-bottom: 8px;
  font-size: .95rem;
  font-weight: 700;
}

.lab-surface-stage {
  background: var(--bg);
  border-radius: 12px;
  margin-top: 12px;
  padding: 16px;
}

.lab-surface-stage .course-thumb, .lab-surface-stage .course-wish {
  cursor: default;
  pointer-events: none;
}

.lab-surface-stage .course-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
  .lab-surface-stage .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.lab-surface-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  max-width: 560px;
  box-shadow: var(--shadow);
  border-radius: 12px;
  margin: 0 auto;
  overflow: hidden;
}

.lab-surface-modal .modal-close {
  pointer-events: none;
}

@supports (color: oklch(from red l c h)) {
  :root[data-theme="light"] .lab-surface-stage[data-tint="faint3"] {
    --bg2: oklch(from var(--accent) 98.8% calc(c * .042) h);
    --bg3: oklch(from var(--accent) 95.5% calc(c * .058) h);
  }

  :root[data-theme="light"] .lab-surface-stage[data-tint="faint2"] {
    --bg2: oklch(from var(--accent) 98.8% calc(c * .067) h);
    --bg3: oklch(from var(--accent) 95.5% calc(c * .092) h);
  }

  :root[data-theme="light"] .lab-surface-stage[data-tint="soft"] {
    --bg2: oklch(from var(--accent) 98.8% calc(c * .1) h);
    --bg3: oklch(from var(--accent) 95.5% calc(c * .142) h);
  }

  :root[data-theme="light"] .lab-surface-stage[data-tint="mid"] {
    --bg2: oklch(from var(--accent) 98.8% calc(c * .184) h);
    --bg3: oklch(from var(--accent) 95.5% calc(c * .259) h);
  }

  :root[data-theme="light"] .lab-surface-stage[data-tint="strong"] {
    --bg2: oklch(from var(--accent) 98.8% calc(c * .334) h);
    --bg3: oklch(from var(--accent) 95.5% calc(c * .468) h);
  }

  :root[data-theme="light"] .lab-surface-stage[data-tint="off"] {
    --bg2: #fafbff;
    --bg3: #eff0f2;
  }
}

.ck-section-hd, .pm-section-header {
  border-bottom: 1px solid var(--border);
}

.oh-product:last-child {
  border-bottom: none;
}

.od-pay-row:has( + .od-pay-row.total) {
  border-bottom: none;
}

.ck-pay-tab.is-locked {
  opacity: .45;
}

.ck-pay-tab.is-locked:hover {
  border-color: var(--border2);
  color: var(--text2);
}

.board-content * {
  all: revert;
}

.board-content img {
  max-width: 100%;
  height: auto;
}

.board-content table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

.qna-comment-textarea.cmt-edit {
  min-height: 60px;
  margin: 0;
}

.qna-comment-item .qna-comment-text:has(.cmt-edit) {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .qna-comment-item .qna-comment-text {
    margin-top: 5px;
    display: block;
  }

  .qna-comment-item .qna-comment-date {
    vertical-align: middle;
    margin-top: 6px;
    display: inline-block;
  }
}

.qna-comment-item .qna-comment-del {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.qna-comment-item .qna-comment-del svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 768px) {
  .qna-comment-item .qna-comment-del {
    vertical-align: middle;
    border-radius: 6px;
    width: 28px;
    height: 34px;
    margin-left: 8px;
  }

  .qna-comment-item .qna-comment-del + .qna-comment-del {
    margin-left: 0;
  }

  .qna-comment-item .qna-comment-del:active {
    background: var(--bg2);
  }
}

.faq-tab-wrap {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  display: flex;
}

.faq-tab-btn {
  background: var(--surface);
  color: var(--text1);
  cursor: pointer;
  white-space: nowrap;
  border-radius: 999px;
  padding: 8px 17px;
  font-size: .85rem;
  transition: all .15s;
}

.faq-tab-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.faq-tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.faq-list {
  border-radius: 6px;
  overflow: hidden;
}

.faq-row {
  cursor: pointer;
  align-items: center;
  gap: 12px;
  padding: 16px;
  transition: background .12s;
  display: flex;
}

.faq-row:hover, .faq-item.open .faq-row {
  background: var(--bg2);
}

.faq-num {
  color: var(--text3);
  text-align: center;
  flex-shrink: 0;
  width: 28px;
  font-size: .8125rem;
}

.faq-cat {
  flex-shrink: 0;
}

.faq-title {
  color: var(--text1);
  flex: 1;
  font-size: .9rem;
  font-weight: 500;
}

.faq-item.open .faq-title {
  color: var(--accent);
  font-weight: 600;
}

.faq-admin-btns {
  flex-shrink: 0;
  gap: 5px;
  display: flex;
}

.faq-toggle-btn {
  cursor: pointer;
  color: var(--text3);
  background: none;
  border: none;
  flex-shrink: 0;
  align-items: center;
  padding: 0;
  transition: color .15s;
  display: flex;
}

.faq-toggle-btn svg {
  width: 16px;
  height: 16px;
  transition: transform .2s;
}

.faq-item.open .faq-toggle-btn svg {
  transform: rotate(180deg);
}

.faq-toggle-btn:hover {
  color: var(--accent);
}

.faq-body {
  color: var(--text1);
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  padding: 35px 20px 35px 72px;
  font-size: .875rem;
  line-height: 1.8;
  display: none;
}

.faq-item.open .faq-body {
  display: block;
}

.rvc-item:has( + .rvc-empty) {
  border-bottom: none;
}

.qna-file-item {
  border: 1px solid var(--border);
  color: var(--text1);
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: .8125rem;
  display: flex;
}

.qna-file-item svg {
  width: 14px;
  height: 14px;
  color: var(--text3);
  flex-shrink: 0;
}

.qna-file-item > span:first-of-type {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}

.bbs-col-writer {
  width: 140px;
}

@media (max-width: 768px) {
  .bbs-table.has-writer th:nth-child(4), .bbs-table.has-writer td:nth-child(4) {
    display: table-cell;
  }

  .bbs-table.has-writer th:nth-child(5), .bbs-table.has-writer td:nth-child(5) {
    display: none;
  }
}

@media (max-width: 480px) {
  .bbs-col-writer {
    width: 96px;
  }
}

.drawer .mm-a-item_e .mm-a-panel {
  max-height: none;
  overflow: visible;
}

.drawer .mm-a-head_e {
  cursor: default;
}

.drawer .mm-a-item_e.open .mm-a-head {
  color: var(--text1);
}

.drawer .mm-status-item {
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.drawer .mm-a-head_e a {
  color: inherit;
}

.qna-col-date {
  width: 120px;
}

.qna-col-status {
  width: 110px;
}

@media (max-width: 480px) {
  .table_01:not(.table-stack) th:nth-child(3), .table_01:not(.table-stack) td:nth-child(3) {
    display: table-cell;
  }

  .qna-col-date, .qna-col-status {
    width: auto;
  }
}

@media (max-width: 640px) {
  .table_01.table-stack thead {
    display: none;
  }

  .table_01.table-stack tbody tr {
    padding: 10px 0;
    display: block;
  }

  .table_01.table-stack td {
    text-align: right;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    display: flex;
  }

  .table_01.table-stack td:before {
    content: attr(data-label);
    white-space: nowrap;
    color: var(--text3);
    text-align: left;
    flex: none;
    font-size: .8125rem;
    font-weight: 500;
  }

  .table_01.table-stack td.dv-col-num, .table_01.table-stack th.dv-col-num {
    display: none;
  }
}

.tc-slider-viewport {
  touch-action: pan-y;
}

.cart-item.is-off .cart-item-name {
  color: var(--text3);
}

.gap6 {
  gap: 6px;
}

.gap8 {
  gap: 8px;
}

a.rv-card {
  display: block;
}

.rv-card-content, .rv-list-content {
  -webkit-line-clamp: 1;
}

.exp-notice {
  background: var(--accent-s);
  border: 1px solid rgba(var(--accent-r),.15);
  color: var(--text2);
  border-radius: 8px;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 15px;
  font-size: .8125rem;
  line-height: 1.6;
  display: flex;
}

.exp-notice svg {
  width: 14px;
  height: 14px;
  stroke: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}

.exp-list {
  flex-direction: column;
  gap: 15px;
  display: flex;
}

.exp-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  display: flex;
}

.exp-thumb {
  background: var(--bg3);
  opacity: .7;
  border-radius: 8px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 80px;
  display: flex;
  overflow: hidden;
}

.exp-thumb svg {
  width: 28px;
  height: 28px;
  stroke: var(--border2);
}

.exp-thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.exp-body {
  flex: 1;
  min-width: 0;
}

.exp-meta {
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  display: flex;
}

.exp-end-badge {
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.exp-end-badge svg {
  width: 11px;
  height: 11px;
}

.exp-title {
  color: var(--text2);
  margin-bottom: 4px;
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.4;
}

.exp-teacher {
  color: var(--text3);
  align-items: center;
  gap: 4px;
  margin-bottom: 12px;
  font-size: .8rem;
  display: flex;
}

.exp-teacher svg {
  width: 12px;
  height: 12px;
}

.exp-info-grid {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.exp-info-row {
  align-items: center;
  gap: 10px;
  font-size: .8125rem;
  display: flex;
}

.exp-info-label {
  color: var(--text3);
  flex-shrink: 0;
  min-width: 85px;
  font-weight: 600;
}

.exp-info-val {
  color: var(--text1);
  flex: 1;
  align-items: center;
  gap: 6px;
  display: flex;
}

.exp-end-date {
  color: var(--text2);
}

.exp-ago {
  color: var(--text3);
  font-size: .75rem;
}

.exp-progress-wrap {
  flex: 1;
  align-items: center;
  gap: 8px;
  display: flex;
}

.exp-progress-bar {
  background: var(--bg3);
  border-radius: 999px;
  flex: 1;
  max-width: 120px;
  height: 6px;
  overflow: hidden;
}

.exp-progress-fill {
  background: var(--text3);
  border-radius: 999px;
  height: 100%;
}

.exp-pct {
  color: var(--text3);
  font-size: .8125rem;
  font-weight: 700;
}

.exp-pct-complete {
  color: #0ab39c;
}

.exp-check-icon {
  stroke: #0ab39c;
  width: 14px;
  height: 14px;
}

.exp-actions {
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
  min-width: 110px;
  display: flex;
}

.exp-actions .action-btn {
  justify-content: center;
}

@media (max-width: 1024px) {
  .exp-item {
    flex-wrap: wrap;
  }

  .exp-actions {
    min-width: unset;
    flex-flow: wrap;
    width: 100%;
  }

  .exp-actions .action-btn {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .exp-thumb {
    width: 80px;
    height: 60px;
  }

  .exp-info-label {
    min-width: 70px;
  }
}

@media (max-width: 480px) {
  .exp-actions .action-btn {
    flex: unset;
    width: 100%;
  }
}

.lec-group-header.is-locked {
  cursor: default;
}

.lec-group-header.is-locked .lec-group-icon {
  visibility: hidden;
}

.lec-stat-limit {
  color: var(--text3);
  margin-top: 2px;
  font-size: .72rem;
  line-height: 1.4;
}

.lec-cats-toggle {
  color: var(--accent-text, var(--accent));
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  padding: 0;
  font-size: .75rem;
  display: inline-flex;
}

button.lec-info-link, button.lec-info-val {
  font: inherit;
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
}

.lecture-actions .action-btn.is-off, .mc-card-actions .action-btn.is-off {
  opacity: .45;
}

.lec-act-btns .action-btn.active {
  color: var(--accent);
  border-color: var(--accent);
}

.lec-act-btns .action-btn.active svg {
  fill: var(--accent);
}

.summary-card a.badge {
  text-decoration: none;
}

.card-sub-1line {
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.summary-card .card-main, .card-sub-1line {
  -webkit-line-clamp: none;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: block;
  overflow: hidden;
}

@media (max-width: 640px) {
  .summary-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sub-item-flat {
  margin-top: 0;
}

.sub-line {
  background: rgba(var(--accent-r), .06);
  border-color: rgba(var(--accent-r), .15);
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  display: flex;
}

.sub-line .ml-auto {
  margin-left: auto;
}

@media (max-width: 480px) {
  .sub-line .ml-auto {
    justify-content: center;
    width: 100%;
    margin-left: 0;
  }
}

.mm-quick-sub-block {
  background: var(--bg2);
}

.mm-quick-sub-block .mm-quick-label {
  color: var(--text2);
}

.mm-quick-sub {
  color: var(--text3);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
  font-size: .6875rem;
  overflow: hidden;
}

body.bare {
  background: var(--bg2);
}

.cert-page {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

.cert-toolbar {
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
}

.cert-paper {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 10px;
  padding: 56px 60px;
}

.cert-brand {
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  display: flex;
}

.cert-brand-mark {
  background: var(--accent);
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  display: flex;
}

.cert-brand-mark svg {
  stroke: #fff;
  width: 15px;
  height: 15px;
}

.cert-brand-name {
  font-family: oswald, var(--font-oswald), sans-serif;
  color: var(--text1);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.1;
}

.cert-brand-url {
  color: var(--text3);
  font-size: .65rem;
}

.cert-title {
  text-align: center;
  letter-spacing: .5em;
  color: var(--text1);
  margin: 0 0 34px -.5em;
  font-size: 1.7rem;
  font-weight: 800;
}

.cert-to {
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 28px;
  font-size: 1rem;
  display: flex;
}

.cert-to-name {
  color: var(--text1);
  font-weight: 700;
}

.cert-to-suffix {
  color: var(--accent);
  font-weight: 600;
}

.cert-note {
  text-align: center;
  color: var(--text1);
  margin: 40px 0 30px;
  font-size: .9375rem;
  line-height: 1.7;
}

.cert-issue {
  text-align: center;
  color: var(--text1);
  margin-bottom: 4px;
  font-size: .9375rem;
  font-weight: 700;
}

.cert-brand-logo {
  object-fit: contain;
  max-width: 200px;
  max-height: 40px;
}

.cert-issue-wrap {
  position: relative;
}

.cert-seal {
  object-fit: contain;
  opacity: .9;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
}

@media (max-width: 480px) {
  .cert-seal {
    width: 70px;
    height: 70px;
    right: 0;
  }
}

@media print {
  body.bare {
    background: #fff;
  }

  .cert-toolbar, .toast-wrap {
    display: none !important;
  }

  .cert-page {
    max-width: none;
    padding: 0;
  }

  .cert-paper {
    box-shadow: none;
    border: none;
    padding: 30px 10px;
  }
}

.list-ctl-left {
  margin-right: auto;
}

.billing-cta {
  width: 100%;
}

.billing-cta > .action-btn {
  flex: 1;
  justify-content: center;
}

.ask-select {
  text-overflow: ellipsis;
  width: 100%;
  max-width: none;
}

.lec-group > .lec-group-body:first-child .lec-list-head {
  border-top: none;
}

.lec-group-body {
  display: grid;
}

.lec-group-body-inner {
  min-height: 0;
  overflow: hidden;
}

.lec-group-body.is-open {
  grid-template-rows: 1fr;
  animation: .24s ease-out lec-group-open;
}

.lec-group-body.is-closing {
  grid-template-rows: 0fr;
  animation: .24s ease-in lec-group-close;
}

@keyframes lec-group-open {
  from {
    opacity: .55;
    grid-template-rows: 0fr;
  }
}

@keyframes lec-group-close {
  from {
    opacity: 1;
    grid-template-rows: 1fr;
  }

  to {
    opacity: .55;
    grid-template-rows: 0fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lec-group-body.is-open, .lec-group-body.is-closing {
    animation: none;
  }
}

.li-play .lec-limit {
  text-align: left;
}

.lec-limit-over {
  color: #dc2626;
  font-weight: 600;
}

[data-theme="dark"] .lec-limit-over {
  color: #f87171;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lec-limit-over {
    color: #f87171;
  }
}

.lec-txt {
  background: rgba(var(--accent-r), .06);
  border: 1px solid rgba(var(--accent-r), .12);
  border-radius: 8px;
  margin-top: 12px;
  padding: 12px 14px;
  line-height: 1.7;
}

.lec-txt p {
  white-space: pre-line;
  margin: 0;
}

.gnav-group.open > .gnav-group-body {
  max-height: 70vh;
}

.gnav-logo-row {
  border-bottom: none;
  margin-bottom: 20px;
}

.gnav-toggle-2 {
  border: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: var(--surface);
  opacity: 0;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  transition: opacity .18s, transform .18s, background .15s, border-color .15s;
  top: 22px;
  right: -13px;
  transform: scale(.8);
  box-shadow: 0 2px 10px #0000001f;
}

.gnav-drawer:hover .gnav-toggle-2, .gnav-toggle-2:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.gnav-drawer.closed .gnav-toggle-2 {
  opacity: 1;
  right: -26px;
  transform: scale(1);
}

.gnav-toggle-2:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.gnav-toggle-2:hover svg {
  color: #fff;
}

.gnav-toggle-2 svg {
  width: 14px;
  height: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .gnav-toggle-2 {
    transition: none;
  }
}

.toast {
  background: var(--text1);
  border-color: var(--text1);
  box-shadow: 0 10px 30px #00000047;
}

.toast-msg {
  color: var(--bg);
}

.toast-close {
  color: var(--bg);
  opacity: .55;
}

.toast-close:hover {
  opacity: 1;
}

.toast-icon {
  background: #ffffff24;
}

.toast-icon.info {
  color: #7dd3fc;
}

.toast-icon.success {
  color: #4ade80;
}

.toast-icon.warning {
  color: #fcd34d;
}

.toast-icon.danger {
  color: #fca5a5;
}

[data-theme="dark"] .toast-icon {
  background: #0000001a;
}

[data-theme="dark"] .toast-icon.info {
  color: #0284c7;
}

[data-theme="dark"] .toast-icon.success {
  color: #16a34a;
}

[data-theme="dark"] .toast-icon.warning {
  color: #d97706;
}

[data-theme="dark"] .toast-icon.danger {
  color: #dc2626;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toast-icon {
    background: #0000001a;
  }

  :root:not([data-theme="light"]) .toast-icon.info {
    color: #0284c7;
  }

  :root:not([data-theme="light"]) .toast-icon.success {
    color: #16a34a;
  }

  :root:not([data-theme="light"]) .toast-icon.warning {
    color: #d97706;
  }

  :root:not([data-theme="light"]) .toast-icon.danger {
    color: #dc2626;
  }
}

.lab-toast-gauge {
  background: #ffffff8c;
}

[data-theme="dark"] .lab-toast-gauge {
  background: #00000059;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lab-toast-gauge {
    background: #00000059;
  }
}

.mc-card-teacher {
  min-height: 18px;
}

.mc-card {
  flex-direction: column;
  display: flex;
}

.mc-card-body {
  flex: 1;
}

.mc-card-actions {
  margin-top: auto;
}

@media (max-width: 640px) {
  .mc-card-teacher {
    min-height: 0;
  }

  .mc-card-teacher:empty {
    display: none;
  }

  .mc-card-actions {
    margin-top: 5px;
  }
}

.toast-container {
  transition: bottom .3s cubic-bezier(.34, 1.56, .64, 1);
}

body.has-float-bar .toast-container {
  bottom: 100px;
}

@media (max-width: 768px) {
  body.has-float-bar .toast-container {
    bottom: 132px;
  }
}

@media (max-width: 480px) {
  body.has-float-bar .toast-container {
    bottom: 184px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-container {
    transition: none;
  }
}

body.bare:has(.Player01) {
  background: #000;
  margin: 0;
  overflow: hidden;
}

.Player01 .play_Nav {
  top: 0;
}

.Player01 main.pl-stage {
  justify-content: center;
  align-items: center;
  min-height: 0;
  display: flex;
  position: absolute;
  inset: 0 420px 0 0;
}

.Player01.no-nav main.pl-stage, .Player01.nav-collapsed main.pl-stage {
  right: 0;
}

.Player01 main.pl-stage #container {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 177.778vh;
  max-height: 100%;
  margin: 0;
  position: relative;
  inset: auto;
}

.Player01 main #container > div, .Player01 #vs {
  position: absolute;
  inset: 0;
}

.Player01 .xgplayer video, .Player01 .starplayer video {
  height: 100% !important;
}

.Player01 #top_Nav {
  width: calc(100% - 430px);
}

.Player01 #top_Nav.hidden {
  opacity: 0;
  transform: translateY(-100%);
}

.Player01.no-nav #top_Nav, .Player01.nav-collapsed #top_Nav {
  width: 100%;
}

.Player01.nav-collapsed .play_Nav {
  right: -420px;
}

.Player01.nav-collapsed .hide_Btn_r {
  right: 0;
}

.Player01 .play_Nav .play_List {
  height: calc(100% - 77px);
}

.Player01 .play_Nav.has-banner .play_List {
  height: calc(100% - 190px);
}

.Player01 .pl-loading {
  color: #8a8a9c;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: flex;
  position: absolute;
  inset: 0;
}

.Player01 #container.pl-mounting > :not(.pl-loading) {
  visibility: hidden;
}

.pl-next.pl-next {
  z-index: 20;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(10px);
  text-align: left;
  background: #121218b3;
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  width: 212px;
  padding: 8px 8px 10px;
  font-family: inherit;
  animation: .25s pl-next-in;
  position: absolute;
  bottom: 74px;
  right: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px #00000073;
}

@keyframes pl-next-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pl-next.pl-next {
    background: #121218d9;
  }
}

.pl-next.pl-next-fs {
  position: fixed;
  bottom: 90px;
  right: 24px;
}

.Player01 main #container > .pl-next {
  inset: auto 16px 74px auto;
}

.pl-next .pl-next-head {
  justify-content: space-between;
  align-items: center;
  margin: 0 2px 7px;
  display: flex;
}

.pl-next .pl-next-label {
  color: #8a8a9c;
  letter-spacing: -.2px;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.4;
}

.pl-next .pl-next-close {
  color: #8a8a9c;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  transition: background-color .15s, color .15s;
  display: flex;
}

.pl-next .pl-next-close:hover {
  color: #fff;
  background: #2a2a36;
}

.pl-next .pl-next-thumb {
  aspect-ratio: 16 / 9;
  cursor: pointer;
  box-sizing: border-box;
  background-color: #26262f;
  background-position: center;
  background-size: cover;
  border: 0;
  border-radius: 7px;
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
  position: relative;
}

.pl-next .pl-next-play {
  color: #fff;
  box-sizing: border-box;
  background: #00000073;
  border: 2px solid #ffffffe6;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  margin: auto;
  transition: background-color .15s, transform .15s;
  display: flex;
  position: absolute;
  inset: 0;
}

.pl-next .pl-next-thumb:hover .pl-next-play {
  background: linear-gradient(135deg, #ff5713, #ee334b);
  border-color: #0000;
  transform: scale(1.06);
}

.pl-next .pl-next-title {
  color: #e9e9f0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin: 7px 2px 1px;
  padding: 0;
  font-size: .75rem;
  line-height: 1.45;
  display: -webkit-box;
  overflow: hidden;
}

.pl-next .pl-next-gauge {
  background: #26262f;
  height: 3px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.pl-next .pl-next-gauge i {
  background: linear-gradient(90deg, #ff5713, #ee334b);
  width: 100%;
  height: 100%;
  animation: linear forwards pl-next-drain;
  display: block;
}

.pl-next .pl-next-count {
  color: #ee334b;
}

@keyframes pl-next-drain {
  from {
    width: 100%;
  }

  to {
    width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-next .pl-next-gauge i {
    animation: none;
  }
}

.tgl[aria-pressed="true"] {
  background: var(--accent);
}

.tgl[aria-pressed="true"]:after {
  transform: translateX(19px);
}

.tgl[aria-pressed="false"] {
  background: #e2e8f0;
}

.tgl[aria-pressed="false"]:after {
  transform: none;
}

[data-theme="dark"] .tgl[aria-pressed="false"] {
  background: var(--border2);
}

.lec-cls-name {
  cursor: default;
}

.lec-cls-name:hover {
  text-decoration: none;
}

.pl-debug {
  margin-top: 12px;
}

.pl-debug .form-tbl th {
  white-space: nowrap;
  width: 34%;
  font-size: .75rem;
}

.pl-debug .form-tbl td {
  font-size: .75rem;
}

.pl-debug-val {
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.6;
  display: block;
}

@media (max-width: 960px) {
  .mypage-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .mypage-side {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
  }

  .my-user {
    border-bottom: 0;
    margin-bottom: 0;
  }

  .my-nav {
    display: none;
  }

  .mypage-content {
    padding-top: 20px;
  }

  .my-nav-select {
    width: 100%;
    color: var(--text1);
    background: var(--surface);
    border: 1px solid var(--border2);
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23adb5bd' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 10px center;
    background-repeat: no-repeat;
    border-radius: 4px;
    outline: none;
    margin: 0 0 16px;
    padding: 10px 32px 10px 12px;
    font-size: .855rem;
    display: block;
  }

  .my-nav-select:focus {
    border-color: var(--accent);
  }
}

.lec-device-note {
  color: var(--text2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 10px 12px;
  font-size: .855rem;
  line-height: 1.5;
  display: flex;
}

.lec-device-note svg {
  color: var(--text3);
  flex-shrink: 0;
}

.my-nav-select-row {
  display: none;
}

@media (max-width: 960px) {
  .my-nav-select-row {
    align-items: stretch;
    gap: 6px;
    margin: 0 0 16px;
    display: flex;
  }

  .my-nav-select-row .my-nav-select {
    flex: auto;
    width: auto;
    min-width: 0;
    margin: 0;
  }

  .my-nav-back {
    width: 40px;
    color: var(--text2);
    background: var(--surface);
    border: 1px solid var(--border2);
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    padding: 0;
    transition: background .12s, color .12s;
    display: inline-flex;
  }

  .my-nav-back:hover {
    color: var(--text1);
    background: var(--bg2);
  }

  .my-nav-back:active {
    background: var(--bg2);
  }
}

.pl-debug-xml {
  white-space: pre;
  max-height: 50vh;
  color: var(--text2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 6px 0 0;
  padding: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem;
  line-height: 1.5;
  overflow: auto;
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__0_1fo05._.css.map*/