@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");





/* ---- global/css/base/open-color.css ---- */
/*
 *
 *  𝗖 𝗢 𝗟 𝗢 𝗥
 *  v 1.9.1
 *
 *  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  /*  General
 *  ─────────────────────────────────── */

  --oc-white: #ffffff;
  --oc-white-rgb: 255, 255, 255;
  --oc-black: #000000;
  --oc-black-rgb: 0, 0, 0;

  /*  Gray
 *  ─────────────────────────────────── */

  --oc-gray-0: #f8f9fa;
  --oc-gray-0-rgb: 248, 249, 250;
  --oc-gray-1: #f1f3f5;
  --oc-gray-1-rgb: 241, 243, 245;
  --oc-gray-2: #e9ecef;
  --oc-gray-2-rgb: 233, 236, 239;
  --oc-gray-3: #dee2e6;
  --oc-gray-3-rgb: 222, 226, 230;
  --oc-gray-4: #ced4da;
  --oc-gray-4-rgb: 206, 212, 218;
  --oc-gray-5: #adb5bd;
  --oc-gray-5-rgb: 173, 181, 189;
  --oc-gray-6: #868e96;
  --oc-gray-6-rgb: 134, 142, 150;
  --oc-gray-7: #495057;
  --oc-gray-7-rgb: 73, 80, 87;
  --oc-gray-8: #343a40;
  --oc-gray-8-rgb: 52, 58, 64;
  --oc-gray-9: #212529;
  --oc-gray-9-rgb: 33, 37, 41;

  /*  Red
 *  ─────────────────────────────────── */

  --oc-red-0: #fff5f5;
  --oc-red-0-rgb: 255, 245, 245;
  --oc-red-1: #ffe3e3;
  --oc-red-1-rgb: 255, 227, 227;
  --oc-red-2: #ffc9c9;
  --oc-red-2-rgb: 255, 201, 201;
  --oc-red-3: #ffa8a8;
  --oc-red-3-rgb: 255, 168, 168;
  --oc-red-4: #ff8787;
  --oc-red-4-rgb: 255, 135, 135;
  --oc-red-5: #ff6b6b;
  --oc-red-5-rgb: 255, 107, 107;
  --oc-red-6: #fa5252;
  --oc-red-6-rgb: 250, 82, 82;
  --oc-red-7: #f03e3e;
  --oc-red-7-rgb: 240, 62, 62;
  --oc-red-8: #e03131;
  --oc-red-8-rgb: 224, 49, 49;
  --oc-red-9: #c92a2a;
  --oc-red-9-rgb: 201, 42, 42;

  /*  Pink
 *  ─────────────────────────────────── */

  --oc-pink-0: #fff0f6;
  --oc-pink-0-rgb: 255, 240, 246;
  --oc-pink-1: #ffdeeb;
  --oc-pink-1-rgb: 255, 222, 235;
  --oc-pink-2: #fcc2d7;
  --oc-pink-2-rgb: 252, 194, 215;
  --oc-pink-3: #faa2c1;
  --oc-pink-3-rgb: 250, 162, 193;
  --oc-pink-4: #f783ac;
  --oc-pink-4-rgb: 247, 131, 172;
  --oc-pink-5: #f06595;
  --oc-pink-5-rgb: 240, 101, 149;
  --oc-pink-6: #e64980;
  --oc-pink-6-rgb: 230, 73, 128;
  --oc-pink-7: #d6336c;
  --oc-pink-7-rgb: 214, 51, 108;
  --oc-pink-8: #c2255c;
  --oc-pink-8-rgb: 194, 37, 92;
  --oc-pink-9: #a61e4d;
  --oc-pink-9-rgb: 166, 30, 77;

  /*  Grape
 *  ─────────────────────────────────── */

  --oc-grape-0: #f8f0fc;
  --oc-grape-0-rgb: 248, 240, 252;
  --oc-grape-1: #f3d9fa;
  --oc-grape-1-rgb: 243, 217, 250;
  --oc-grape-2: #eebefa;
  --oc-grape-2-rgb: 238, 190, 250;
  --oc-grape-3: #e599f7;
  --oc-grape-3-rgb: 229, 153, 247;
  --oc-grape-4: #da77f2;
  --oc-grape-4-rgb: 218, 119, 242;
  --oc-grape-5: #cc5de8;
  --oc-grape-5-rgb: 204, 93, 232;
  --oc-grape-6: #be4bdb;
  --oc-grape-6-rgb: 190, 75, 219;
  --oc-grape-7: #ae3ec9;
  --oc-grape-7-rgb: 174, 62, 201;
  --oc-grape-8: #9c36b5;
  --oc-grape-8-rgb: 156, 54, 181;
  --oc-grape-9: #862e9c;
  --oc-grape-9-rgb: 134, 46, 156;

  /*  Violet
 *  ─────────────────────────────────── */

  --oc-violet-0: #f3f0ff;
  --oc-violet-0-rgb: 243, 240, 255;
  --oc-violet-1: #e5dbff;
  --oc-violet-1-rgb: 229, 219, 255;
  --oc-violet-2: #d0bfff;
  --oc-violet-2-rgb: 208, 191, 255;
  --oc-violet-3: #b197fc;
  --oc-violet-3-rgb: 177, 151, 252;
  --oc-violet-4: #9775fa;
  --oc-violet-4-rgb: 151, 117, 250;
  --oc-violet-5: #845ef7;
  --oc-violet-5-rgb: 132, 94, 247;
  --oc-violet-6: #7950f2;
  --oc-violet-6-rgb: 121, 80, 242;
  --oc-violet-7: #7048e8;
  --oc-violet-7-rgb: 112, 72, 232;
  --oc-violet-8: #6741d9;
  --oc-violet-8-rgb: 103, 65, 217;
  --oc-violet-9: #5f3dc4;
  --oc-violet-9-rgb: 95, 61, 196;

  /*  Indigo
 *  ─────────────────────────────────── */

  --oc-indigo-0: #edf2ff;
  --oc-indigo-0-rgb: 237, 242, 255;
  --oc-indigo-1: #dbe4ff;
  --oc-indigo-1-rgb: 219, 228, 255;
  --oc-indigo-2: #bac8ff;
  --oc-indigo-2-rgb: 186, 200, 255;
  --oc-indigo-3: #91a7ff;
  --oc-indigo-3-rgb: 145, 167, 255;
  --oc-indigo-4: #748ffc;
  --oc-indigo-4-rgb: 116, 143, 252;
  --oc-indigo-5: #5c7cfa;
  --oc-indigo-5-rgb: 92, 124, 250;
  --oc-indigo-6: #4c6ef5;
  --oc-indigo-6-rgb: 76, 110, 245;
  --oc-indigo-7: #4263eb;
  --oc-indigo-7-rgb: 66, 99, 235;
  --oc-indigo-8: #3b5bdb;
  --oc-indigo-8-rgb: 59, 91, 219;
  --oc-indigo-9: #364fc7;
  --oc-indigo-9-rgb: 54, 79, 199;

  /*  Blue
 *  ─────────────────────────────────── */

  --oc-blue-0: #e7f5ff;
  --oc-blue-0-rgb: 231, 245, 255;
  --oc-blue-1: #d0ebff;
  --oc-blue-1-rgb: 208, 235, 255;
  --oc-blue-2: #a5d8ff;
  --oc-blue-2-rgb: 165, 216, 255;
  --oc-blue-3: #74c0fc;
  --oc-blue-3-rgb: 116, 192, 252;
  --oc-blue-4: #4dabf7;
  --oc-blue-4-rgb: 77, 171, 247;
  --oc-blue-5: #339af0;
  --oc-blue-5-rgb: 51, 154, 240;
  --oc-blue-6: #228be6;
  --oc-blue-6-rgb: 34, 139, 230;
  --oc-blue-7: #1c7ed6;
  --oc-blue-7-rgb: 28, 126, 214;
  --oc-blue-8: #1971c2;
  --oc-blue-8-rgb: 25, 113, 194;
  --oc-blue-9: #1864ab;
  --oc-blue-9-rgb: 24, 100, 171;

  /*  Cyan
 *  ─────────────────────────────────── */

  --oc-cyan-0: #e3fafc;
  --oc-cyan-0-rgb: 227, 250, 252;
  --oc-cyan-1: #c5f6fa;
  --oc-cyan-1-rgb: 197, 246, 250;
  --oc-cyan-2: #99e9f2;
  --oc-cyan-2-rgb: 153, 233, 242;
  --oc-cyan-3: #66d9e8;
  --oc-cyan-3-rgb: 102, 217, 232;
  --oc-cyan-4: #3bc9db;
  --oc-cyan-4-rgb: 59, 201, 219;
  --oc-cyan-5: #22b8cf;
  --oc-cyan-5-rgb: 34, 184, 207;
  --oc-cyan-6: #15aabf;
  --oc-cyan-6-rgb: 21, 170, 191;
  --oc-cyan-7: #1098ad;
  --oc-cyan-7-rgb: 16, 152, 173;
  --oc-cyan-8: #0c8599;
  --oc-cyan-8-rgb: 12, 133, 153;
  --oc-cyan-9: #0b7285;
  --oc-cyan-9-rgb: 11, 114, 133;

  /*  Teal
 *  ─────────────────────────────────── */

  --oc-teal-0: #e6fcf5;
  --oc-teal-0-rgb: 230, 252, 245;
  --oc-teal-1: #c3fae8;
  --oc-teal-1-rgb: 195, 250, 232;
  --oc-teal-2: #96f2d7;
  --oc-teal-2-rgb: 150, 242, 215;
  --oc-teal-3: #63e6be;
  --oc-teal-3-rgb: 99, 230, 190;
  --oc-teal-4: #38d9a9;
  --oc-teal-4-rgb: 56, 217, 169;
  --oc-teal-5: #20c997;
  --oc-teal-5-rgb: 32, 201, 151;
  --oc-teal-6: #12b886;
  --oc-teal-6-rgb: 18, 184, 134;
  --oc-teal-7: #0ca678;
  --oc-teal-7-rgb: 12, 166, 120;
  --oc-teal-8: #099268;
  --oc-teal-8-rgb: 9, 146, 104;
  --oc-teal-9: #087f5b;
  --oc-teal-9-rgb: 8, 127, 91;

  /*  green
 *  ─────────────────────────────────── */

  --oc-green-0: #ebfbee;
  --oc-green-0-rgb: 235, 251, 238;
  --oc-green-1: #d3f9d8;
  --oc-green-1-rgb: 211, 249, 216;
  --oc-green-2: #b2f2bb;
  --oc-green-2-rgb: 178, 242, 187;
  --oc-green-3: #8ce99a;
  --oc-green-3-rgb: 140, 233, 154;
  --oc-green-4: #69db7c;
  --oc-green-4-rgb: 105, 219, 124;
  --oc-green-5: #51cf66;
  --oc-green-5-rgb: 81, 207, 102;
  --oc-green-6: #40c057;
  --oc-green-6-rgb: 64, 192, 87;
  --oc-green-7: #37b24d;
  --oc-green-7-rgb: 55, 178, 77;
  --oc-green-8: #2f9e44;
  --oc-green-8-rgb: 47, 158, 68;
  --oc-green-9: #2b8a3e;
  --oc-green-9-rgb: 43, 138, 62;

  /*  Lime
 *  ─────────────────────────────────── */

  --oc-lime-0: #f4fce3;
  --oc-lime-0-rgb: 244, 252, 227;
  --oc-lime-1: #e9fac8;
  --oc-lime-1-rgb: 233, 250, 200;
  --oc-lime-2: #d8f5a2;
  --oc-lime-2-rgb: 216, 245, 162;
  --oc-lime-3: #c0eb75;
  --oc-lime-3-rgb: 192, 235, 117;
  --oc-lime-4: #a9e34b;
  --oc-lime-4-rgb: 169, 227, 75;
  --oc-lime-5: #94d82d;
  --oc-lime-5-rgb: 148, 216, 45;
  --oc-lime-6: #82c91e;
  --oc-lime-6-rgb: 130, 201, 30;
  --oc-lime-7: #74b816;
  --oc-lime-7-rgb: 116, 184, 22;
  --oc-lime-8: #66a80f;
  --oc-lime-8-rgb: 102, 168, 15;
  --oc-lime-9: #5c940d;
  --oc-lime-9-rgb: 92, 148, 13;

  /*  Yellow
 *  ─────────────────────────────────── */

  --oc-yellow-0: #fff9db;
  --oc-yellow-0-rgb: 255, 249, 219;
  --oc-yellow-1: #fff3bf;
  --oc-yellow-1-rgb: 255, 243, 191;
  --oc-yellow-2: #ffec99;
  --oc-yellow-2-rgb: 255, 236, 153;
  --oc-yellow-3: #ffe066;
  --oc-yellow-3-rgb: 255, 224, 102;
  --oc-yellow-4: #ffd43b;
  --oc-yellow-4-rgb: 255, 212, 59;
  --oc-yellow-5: #fcc419;
  --oc-yellow-5-rgb: 252, 196, 25;
  --oc-yellow-6: #fab005;
  --oc-yellow-6-rgb: 250, 176, 5;
  --oc-yellow-7: #f59f00;
  --oc-yellow-7-rgb: 245, 159, 0;
  --oc-yellow-8: #f08c00;
  --oc-yellow-8-rgb: 240, 140, 0;
  --oc-yellow-9: #e67700;
  --oc-yellow-9-rgb: 230, 119, 0;

  /*  Orange
 *  ─────────────────────────────────── */

  --oc-orange-0: #fff4e6;
  --oc-orange-0-rgb: 255, 244, 230;
  --oc-orange-1: #ffe8cc;
  --oc-orange-1-rgb: 255, 232, 204;
  --oc-orange-2: #ffd8a8;
  --oc-orange-2-rgb: 255, 216, 168;
  --oc-orange-3: #ffc078;
  --oc-orange-3-rgb: 255, 192, 120;
  --oc-orange-4: #ffa94d;
  --oc-orange-4-rgb: 255, 169, 77;
  --oc-orange-5: #ff922b;
  --oc-orange-5-rgb: 255, 146, 43;
  --oc-orange-6: #fd7e14;
  --oc-orange-6-rgb: 253, 126, 20;
  --oc-orange-7: #f76707;
  --oc-orange-7-rgb: 247, 103, 7;
  --oc-orange-8: #e8590c;
  --oc-orange-8-rgb: 232, 89, 12;
  --oc-orange-9: #d9480f;
  --oc-orange-9-rgb: 217, 72, 15;
}



/* ---- global/css/base/foundation.css ---- */


@media (min-width: 1401px) {
  :root,
  html,
  body {
    --width: 1300px;
  }
}
@media (max-width: 1400px) {
  :root,
  html,
  body {
    --width: 1240px;
  }
}
@media (max-width: 1300px) {
  :root,
  html,
  body {
    --width: 1140px;
  }
}
@media (max-width: 1200px) {
  :root,
  html,
  body {
    --width: 1060px;
  }
}
@media (max-width: 1100px) {
  :root,
  html,
  body {
    --width: 960px;
  }
}

@media (max-width: 1000px) {
  :root,
  html,
  body {
    --width: 940px;
  }
}
@media (max-width: 940px) {
  :root,
  html,
  body {
    --width: 900px;
  }
}

@media (max-width: 900px) {
  :root,
  html,
  body {
    --width: 820px;
  }
}
@media (max-width: 813px) {
  :root,
  html,
  body {
    --width: 740px;
  }
}

@media (max-width: 812px) {
  :root,
  html,
  body {
    --width: initial;
    --top-h: 60px;
    --input-h: 48px;
    --spector: 10px solid var(--gray-lightest);
    --btn-h: 52px;
  }
}



/* ---- global/css/base/base-elements.css ---- */


/* ==========================================================================
   글로벌 엘리먼트 기본값
   ========================================================================== */
/* ==========================================================================
   기본 폰트 및 테마 변수
   ========================================================================== */
:root {
  --white: #fff;
  --gray-pale: #f6f7f9;
  --gray-lightest: #f3f4f5;
  --gray-border: #e1e6e9;
  --gray-light: #9ea3ab;
  --gray-lighter: #b8bbc1;
  --gray-mid: #6f737a;
  --gray-dark: #252d3a;
  --black: #000;
  --yellow: #fdd000;
  --yellow-deep: #efb300;
  --orange: #ff7900;
  --green: #009944;
  --blue: #1b44a3;
  --sale: #fe5f57;
  --red-color: #ea342b;
  --red: #ea342b;
  --red-light: #fe5f57;
  --red-deep: #c30a00;
  --green-color: #009944;
  --main: #1643b6;
  --main-color: var(--main);
  --main-light: #1da3ec;
  --hotpink: #ff368d;
  --main-deep: rgb(0, 23, 92);
  --mint-blue: #00c2d5;
  --mint-deep: #009fae;
  --type1: var(--main-color);
  --type2: var(--orange);
  --type3: #0068ac;
  --type4: #44316c;
  --type5: #009944;
  --type6: #00b3b3;
  --type7: #a400a1;

  --main-gra: linear-gradient(to left, var(--main-light), var(--main-color));
  --main-gra-rev: linear-gradient(
    to right,
    var(--main-light),
    var(--main-color)
  );
  /* Pastel gradients (common) */
  --pastel-blue-gra: linear-gradient(135deg, #eef6ff 0%, #d6e7ff 100%);
  --pastel-blue-shadow: rgba(92, 146, 255, 0.1);
  --pastel-blue-shadow-hover: rgba(92, 146, 255, 0.15);
  --pastel-blue: #e3f0ff;
  --pastel-blue-hover: #cfe4ff;

  --pastel-pink-gra: linear-gradient(135deg, #fff0f3 0%, #ffd1dc 100%);
  --pastel-pink-shadow: rgba(255, 132, 166, 0.18);
  --pastel-pink-shadow-hover: rgba(255, 132, 166, 0.26);
  --pastel-pink: #ffe2ea;
  --pastel-pink-hover: #ffd0dc;

  --pastel-yellow-gra: linear-gradient(135deg, #fff9ea 0%, #ffeec2 100%);
  --pastel-yellow-shadow: rgba(255, 182, 72, 0.1);
  --pastel-yellow-shadow-hover: rgba(255, 182, 72, 0.35);
  --pastel-yellow: #fff3cc;
  --pastel-yellow-hover: #ffe6a8;

  /* Extra pastel gradients */
  --pastel-mint-gra: linear-gradient(135deg, #ecfffb 0%, #cffff6 100%);
  --pastel-mint-shadow: rgba(0, 194, 213, 0.14);
  --pastel-mint-shadow-hover: rgba(0, 194, 213, 0.22);
  --pastel-mint: #d7fbf3;
  --pastel-mint-hover: #c4f6ea;

  --pastel-lavender-gra: linear-gradient(135deg, #f6f1ff 0%, #e6ddff 100%);
  --pastel-lavender-shadow: rgba(132, 102, 255, 0.14);
  --pastel-lavender-shadow-hover: rgba(132, 102, 255, 0.22);
  --pastel-lavender: #ebe2ff;
  --pastel-lavender-hover: #deceff;

  --pastel-green-gra: linear-gradient(135deg, #f0fff3 0%, #d6f7dd 100%);
  --pastel-green-shadow: rgba(0, 153, 68, 0.14);
  --pastel-green-shadow-hover: rgba(0, 153, 68, 0.22);
  --pastel-green: #ddf7e4;
  --pastel-green-hover: #c9f0d5;

  --pastel-peach-gra: linear-gradient(135deg, #fff3ee 0%, #ffd9c7 100%);
  --pastel-peach-shadow: rgba(255, 121, 0, 0.14);
  --pastel-peach-shadow-hover: rgba(255, 121, 0, 0.22);
  --pastel-peach: #ffe1d3;
  --pastel-peach-hover: #ffd2be;

  --pastel-sky-gra: linear-gradient(135deg, #ecfbff 0%, #cfefff 100%);
  --pastel-sky-shadow: rgba(29, 163, 236, 0.14);
  --pastel-sky-shadow-hover: rgba(29, 163, 236, 0.22);
  --pastel-sky: #d7f1ff;
  --pastel-sky-hover: #c3e9ff;
  /*  */
  --width: 1400px;
  --padding: 24px;
  --input-rect: 18px;
  --cell-h: 60px;
  --font-size: 14px;
  --top-h: 80px;
  /* --map-color: #f6f7f9; */
  --won: "₩";
  --input-h: 54px;
  --ui-input: 36px;
  --input-rect: 20px;
  --color-size: calc(100% / 12);
  --safe-top: calc(env(safe-area-inset-top) * 0.7);
  --safe-bottom: calc(env(safe-area-inset-bottom) * 0.7);
  --btn-h: 60px;
  --tab-h: 60px;
  --px1: linear-gradient(180deg, transparent, var(--black));
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

img {
  border: none;
  vertical-align: top;
  max-width: 100%;
}

html,
body {
  height: 100%;
  color: var(--gray-dark);
  font-size: 16px;
}
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body,
input,
textarea,
table,
button,
select,
optgroup,
option {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Pretendard", Pretendard, Roboto, "Noto Sans KR", "Segoe UI",
    "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    sans-serif;
  letter-spacing: -0.03em;
}
input,
textarea,
table,
button,
select,
optgroup,
option {
  font-size: 1em;
}
span {
  font-size: inherit;
}

div.max {
  width: 100vw !important;
}

.huge-widget div.max {
  width: calc(100vw - 20px) !important;
}
body:not(:has(.gnb .tab-menu)) {
  --tab-h: 0px;
}
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.4s;
  font-size: inherit;
  user-select: none;
}
.sect01 {
  --map-color: var(--type1);
  --color: var(--type1);
}
.sect02 {
  --map-color: var(--type2);
  --color: var(--type2);
}
.sect03 {
  --map-color: var(--type3);
  --color: var(--type3);
}
.sect04 {
  --map-color: var(--type4);
  --color: var(--type4);
}
.sect05 {
  --map-color: var(--type5);
  --color: var(--type5);
}
.sect06 {
  --map-color: var(--type6);
  --color: var(--type6);
}
.sect07 {
  --map-color: var(--type7);
  --color: var(--type7);
}

.blue {
  --color: var(--blue);
}
.green {
  --color: var(--green);
}
.orange {
  --color: var(--orange);
}
.orange {
  --color: var(--orange);
}
.red {
  --color: var(--red);
}
.mint {
  --color: var(--mint);
}
.gray-mid {
  --color: var(--gray-mid);
}
.global .skip_nav {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  font-size: 0;
  height: 0;
}

.modal-inc {
  display: none;
}
.relative {
  position: relative;
}
.ms-icon {
  font-weight: normal;
  font-style: normal;
  font-size: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  &.sharp {
    font-family: "Material Symbols Sharp";
  }
  &.rounded {
    font-family: "Material Symbols Rounded";
  }
  &.outlined {
    font-family: "Material Symbols Outlined";
  }
  &.filled,
  &.fill {
    font-variation-settings: "FILL" 1;
  }
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
@media (max-width: 1200px) {
  body {
    font-size: 14px;
  }
}

@media (max-width: 812px) {
  body {
    --padding: 20px;
    font-size: 14px;
  }
}



/* ---- global/css/base/typography.css ---- */


/* ==========================================================================
   타이포그래피 및 컬러 유틸리티
   ========================================================================== */
h1 {
  font-size: 2.2em;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.15em;
}

h5 {
  font-size: 1em;
}

h6 {
  font-size: 0.9em;
}

.material-symbols-sharp,
.material-symbols-outlined,
.material-symbols-rounded {
  /* font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0; */
  font-size: inherit;
  font-weight: inherit;
}

.material-symbols-sharp.fill,
.material-symbols-outlined.fill,
.material-symbols-rounded.fill {
  font-variation-settings: 'FILL' 1;
}

.price {
  .before {
    text-decoration: line-through;
    color: var(--gray-light);
    font-weight: normal;
  }
}

.bg-red {
  background-color: var(--red-color) !important;
  border-color: var(--red-color) !important;
  color: #fff !important;
}

.bg-red-deep {
  background-color: var(--red-deep) !important;
  border-color: var(--red-deep) !important;
  color: #fff !important;
}

.bg-blue {
  background-color: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}

.bg-mint {
  background-color: var(--mint-blue) !important;
  border-color: var(--mint-blue) !important;
  color: #fff !important;
}

.bg-green {
  background-color: var(--green-color) !important;
  border-color: var(--green-color) !important;
  color: #fff !important;
}

.mb0 {
  margin-bottom: 0 !important;
}

.mt0 {
  margin-top: 0 !important;
}

.pb0 {
  padding-bottom: 0 !important;
}

.pt0 {
  padding-top: 0 !important;
}

.impo {
  color: var(--main-color) !important;
}

.bk {
  color: var(--gray-dark);
}
.gradient-text {
  background: var(--main-gra);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.impo-light {
  color: var(--main-light) !important;
}

:root .xi-rotate-90,
:root .xi-rotate-180,
:root .xi-rotate-270,
:root .xi-flip-horizontal,
:root .xi-flip-vertical {
  display: inline-block;
}

.red {
  --color: var(--red-color) !important;
  color: var(--color);
}

.mint {
  --color: var(--mint-blue) !important;
  color: var(--color);
}

.orange {
  --color: var(--orange) !important;
  color: var(--color);
}

.green {
  --color: var(--green) !important;
  color: var(--color);
}

.blue {
  --color: var(--blue) !important;
  color: var(--color);
}

.yellow {
  --color: var(--yellow) !important;
  color: var(--color);
}

.bk {
  --color: var(--gray-dark) !important;
  color: var(--color);
}

.gray-light {
  --color: var(--gray-light) !important;
  color: var(--color);
}

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

.underline {
  text-decoration: underline;
}

.normal {
  font-weight: normal;
}

@media (max-width: 812px) {
  h1 {
    font-size: 30px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }

  h4 {
    font-size: 16px;
  }

  h5 {
    font-size: 14px;
  }
}



/* ---- global/css/base/forms.css ---- */


/* ==========================================================================
   폼 요소 기본값
   ========================================================================== */
textarea {
  border: 1px solid #ddd;
  width: 100%;
  height: 6em;
  padding: 15px;
  font-size: 1em;
}

*::placeholder {
  color: var(--gray-light);
}

dl.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  dt {
    font-weight: bold;
  }
  dd + dt {
    margin-top: 20px;
  }
  dd {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .require::after {
    content: "*";
    color: var(--red);
  }
}
.doc .form {
  --input-h: 48px;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  .title {
    .logo img {
      max-height: 5vh;
    }
    h1 + p {
      margin-top: 1em;
    }
  }
  table {
    border-collapse: collapse;
  }
  dl {
    display: flex;
    font-size: 1.2em;
    align-items: center;
    margin-top: 0.5em;
    border-top: 1px solid var(--gray-dark);
    dt {
      padding: 1em 0;
      flex-grow: 1;
      height: var(--input-h);
      box-sizing: content-box;
      border-bottom: 1px solid var(--gray-border);
    }
    dd {
      flex-grow: 1;
      text-align: right;
      padding: 1em 0;
      height: var(--input-h);
      box-sizing: content-box;
      border-bottom: 1px solid var(--gray-border);
      .inputs {
        justify-content: flex-end;
      }
    }
  }
  h2 {
    padding-bottom: 15px;
    font-size: 1.2em;
  }
  section:has(h2 + p) h2 {
    padding-bottom: 5px;
  }
  section > h2 + p:last-of-type {
    margin-bottom: 20px;
  }
  .allborder {
    &.small {
      font-size: 0.8em;
    }
    :where(th, td) {
      padding: 12px;
    }
    &.normal {
      @media (max-width: 440px) {
        font-size: 1em;
        col {
          width: 100%;
        }
        :where(td, th) {
          display: block;
          width: 100%;
          border-left: 0;
          margin: 0;
        }
      }
    }
    input,
    select {
      @media (max-width: 440px) {
        --input-h: 40px;
        font-size: 1em;
      }
    }
  }
  .table.small .inputs input + label {
    line-height: normal;
    height: auto;
  }
  .here {
    background-color: var(--gray-pale);
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    .signhere {
      display: flex;
      align-items: center;
      gap: 3em;
      width: 100%;
      > div {
        flex-grow: 1;
      }
    }
  }
  table td {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-right: 0;
    &.price {
      vertical-align: bottom;
      padding-bottom: 15px;
    }
    .inputs {
      input[type="checkbox"] + label,
      input[type="radio"] + label {
        line-height: var(--input-h);
        height: var(--input-h);
        &:before {
          line-height: var(--input-h);
        }
        @media (max-width: 440px) {
          line-height: 1;
        }
      }
    }
  }
  .inputs + .inputs {
    margin-top: 6px;
  }
  table th br {
    @media (max-width: 440px) {
      display: none;
    }
  }
  table :where(td, th) {
    vertical-align: middle;
  }
}

/* nadir: form extras */
.agreement {
  padding: 20px;
  border: 1px solid var(--gray-border);
  border-radius: 8px;
  margin: 10px 0;
  h2 {
    font-size: 1.2em;
    margin-bottom: 0;
    margin-top: 1vh;
    padding-bottom: 0;
    &:first-of-type {
      margin-top: 0;
    }
  }
  ul {
    counter-reset: numberic;
  }
  li {
    display: flex;
    &::before {
      content: "" counter(numberic) ". ";
      counter-increment: numberic;
    }
  }
}

p.noti {
  font-size: 14px;
  color: var(--gray-light) !important;
  margin-top: 20px;
  a {
    color: var(--gray-dark);
    text-decoration: underline;
  }
  @media (max-width: 812px) {
    font-size: 12px;
    word-break: break-all;
  }
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
  &:focus {
    outline: 0;
    border: 1px solid var(--main-color);
  }
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"] {
  height: var(--input-h);
  border: 1px solid var(--gray-border);
  padding: 0 15px;
  border-radius: 6px;
  width: 100%;
}

.button {
  height: var(--input-h);
  border: 1px solid var(--gray-border);
  padding: 0 15px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-size: 1em;
  font-weight: bold;
}

.button:hover {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

select {
  padding: 0 40px 0 15px;
  -webkit-appearance: none;
  background: url(../../youthCenter/images/icon/select.svg) no-repeat center right
    15px;
  height: var(--input-h);
  border: 1px solid var(--gray-border);
  border-radius: 6px;
  width: 100%;
  font-size: 1em;
  color: inherit;
}

select.focus {
  background: #fff;
}

select.focus option {
  padding: 5px 0;
}

textarea {
  border-radius: 6px;
}

input[type="button"] {
  -webkit-appearance: none;
  border: 1px solid var(--gray-dark);
  text-align: center;
  color: var(--gray-dark);
  border-radius: 6px;
  background-color: #fff;
  height: var(--input-h);
  padding: 0 10px;
}

input {
  -webkit-appearance: none;
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"] + label {
  cursor: pointer;
  position: relative;
  line-height: var(--input-rect);
  overflow: hidden;
  overscroll-behavior: none;
}

label + input[type="checkbox"] + label:before {
  margin-left: 15px;
  content: "";
  display: inline-block;
}

input[type="checkbox"] + label:before {
  content: "";
  display: inline-block;
  width: var(--input-rect);
  height: var(--input-rect);
  line-height: var(--input-rect);
  vertical-align: middle;
  background-color: transparent;
  border-radius: 3px;
  border: 1px solid var(--gray-border);
  box-sizing: border-box;
  margin-right: 5px;
  background-color: #fff;
  overflow: hidden;
}

input[type="checkbox"]:checked + label:before {
  background: url(../../youthCenter/images/icon/checked.svg) no-repeat center;
  background-size: auto 40%;
  border: none;
  transition: 0.2s;
  background-color: var(--main-color);
}

input[type="checkbox"]:disabled + label:before,
input[type="radio"]:disabled + label:before {
  background-color: var(--gray-pale);
}

input[type="checkbox"]:disabled + label:after,
input[type="radio"]:disabled + label:after {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background-color: var(--gray-border);
  transform-origin: center center;
  transform: rotate(-45deg);
  position: absolute;
  top: 50%;
  left: -2px;
}

input[type="radio"]:disabled + label:after {
  width: 18px;
  left: 0;
}

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  cursor: pointer;
  position: relative;
  line-height: var(--input-rect);
  box-sizing: border-box;
}

input[type="radio"] + label:before {
  content: "";
  display: inline-block;
  width: var(--input-rect);
  height: var(--input-rect);
  line-height: var(--input-rect);
  vertical-align: middle;
  background-color: transparent;
  border-radius: 50%;
  margin-right: 5px;
  border: 1px solid var(--gray-border);
  box-sizing: border-box;
  background-color: #fff;
}

input[type="radio"]:checked + label:before {
  border: 5px solid var(--main-color);
  transition: 0.2s;
  box-sizing: border-box;
  background-color: #fff;
}

input + label {
  margin-right: 20px;
}
.inputs {
  display: flex;
  gap: 5px;
  align-items: center;
  input,
  select {
    width: auto;
    flex-grow: 1;
  }
}
.switch {
  display: inline-block;
  width: 40px;
  height: 8px;
  position: relative;
}

.switch:before {
  display: block;
  width: 40px;
  height: 8px;
  opacity: 0.3;
  background-color: var(--main-color);
  border-radius: 8px;
  position: relative;
  transition: 0.2s;
  content: "";
  display: block;
}

.switch:after {
  position: absolute;
  width: var(--input-rect);
  height: var(--input-rect);
  left: 0;
  top: -6px;
  content: "";
  display: block;
  background-color: var(--main-color);
  border-radius: 50%;
  transition: 0.2s;
  bottom: 0;
}

.switch.on:before,
.switch.on:after {
  background-color: #f40223;
}

.switch.on:after {
  left: var(--input-rect);
}

.ui-datepicker {
  z-index: 20 !important;
}

.datepicker,
.datepicker-all,
.date-time-pick input,
.week-time-pick input,
.date-range-pick input,
.time-range-pick input {
  background: url(../../youthCenter/images/icon/calendar.svg) no-repeat right 16px
    center;
  background-size: auto 18px;
}

@media (max-width: 812px) {
  input,
  textarea,
  select {
    font-size: 14px;
  }
  .inputs {
    flex-wrap: wrap;
    &.nowrap {
      flex-wrap: wrap;
    }
  }
  select {
    background-size: auto 8px;
    background-position: center right 8px;
  }
  .agreement {
    padding: 15px;
  }
}



/* ---- global/css/base/utilities.css ---- */


/* ==========================================================================
   전역 유틸리티 및 공용 패턴
   ========================================================================== */
.hide {
  /* 공통 필터 숨김 처리를 위한 util 클래스 */
  display: none !important;
}

.flex {
  display: flex;
}

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

.flex > div {
  flex-grow: 1;
}

.option.color-var {
  display: flex;
  gap: 12px;
  font-size: 0.8em;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  flex-grow: 0;

  .facilities,
  .legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    row-gap: 0.5em;
    flex-grow: 0;
  }

  .legend {
    margin: 0 10px;
  }

  p {
    display: flex;
    align-items: center;
    gap: 5px;
    text-align: left;
    flex-shrink: 0;
    color: inherit;
    white-space: pre;
    color: initial;
  }

  .legend p {
    color: var(--map-color);
  }

  p span {
    float: none;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 0;
  }

  .legend p span {
    background-color: var(--map-color);
  }

  p span.label.circle {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
  }

  p span.material-symbols-sharp {
    color: inherit;
    font-size: 1.2em;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: block;
    align-items: center;
    justify-content: center;
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
  }

  p img {
    width: auto;
    height: 16px;
  }
}

.color-var p span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
}

.sect01 {
  --color: var(--type1);
  --map-color: var(--type1);
}

.sect02 {
  --color: var(--type2);
  --map-color: var(--type2);
}

.sect03 {
  --color: var(--type3);
  --map-color: var(--type3);
}

.sect04 {
  --color: var(--type4);
  --map-color: var(--type4);
}

.sect05 {
  --color: var(--type5);
  --map-color: var(--type5);
}

.sect06 {
  --color: var(--type6);
  --map-color: var(--type6);
}

.sect07 {
  --color: var(--type7);
  --map-color: var(--type7);
}

.sect08 {
  --color: var(--type8);
  --map-color: var(--type8);
}

.sect09 {
  --color: var(--type9);
  --map-color: var(--type9);
}

.color-var p.able span {
  background-color: #fff;
  border: 1px solid var(--main-color);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  margin-left: 0;
}

.color-var p.warn span {
  background-color: orange;
  margin-left: 0;
}

.color-var p.unable span {
  background-color: var(--gray-pale);
  border: 2px dotted var(--gray-border);
}

.color-var p.unable {
  color: var(--gray-light);
}

.color-var p.able {
  color: var(--main-color);
}

.color-var p.selected span {
  background-color: var(--main-color);
}

.color-var p.selected {
  color: var(--main-color);
}

.color-var p.reserved span {
  border: 2px dotted var(--gray-dark);
}

.color-var p.using span {
  background-color: var(--blue);
}

.color-var p.regular span {
  background-color: var(--Main);
}

.color-var p.outdate span {
  background-color: var(--red-color);
}

.color-var.font p {
  font-weight: bold;
}

.color-var.font p.regular {
  color: var(--Main);
}

.color-var.font p.able {
  color: #000;
}

.color-var.font p.warn {
  color: orange;
}

.color-var.font p.unable {
  color: var(--gray-light);
}

.color-var.font p.using {
  color: var(--blue);
}

.color-var.font p.outdate {
  color: var(--red-color);
}

.skip_nav {
  font-size: 0;
}

@keyframes ani-mouse {
  0% {
    opacity: 1;
    top: 29%;
  }
  15% {
    opacity: 1;
    top: 50%;
  }
  50% {
    opacity: 0;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 29%;
  }
}

.scroll-btn {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 20px;
  z-index: 10;
  margin: auto;
  pointer-events: none;
}

.pause-play-state {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 13;
  font-size: 1.5em;
  display: flex;
}

.pause-play-state a {
  padding: 10px;
  display: block;
  overflow: hidden;
  transition: 0s;
}

.pause-play-state.play a.play {
  width: 0;
  padding: 10px 0;
}

.pause-play-state.pause a.pause {
  width: 0;
  padding: 10px 0;
}

.scroll-btn > * {
  display: inline-block;
  line-height: 18px;
  font-size: 11px;
  font-weight: normal;
  color: #7f8c8d;
  color: #ffffff;
  font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  letter-spacing: 2px;
}

.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
  color: #ffffff;
}

.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

.scroll-btn .mouse {
  position: relative;
  display: block;
  width: 35px;
  height: 55px;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid white;
  border-radius: 23px;
  transform: scale(0.6);
}

.scroll-btn .mouse > * {
  position: absolute;
  display: block;
  top: 29%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  background: white;
  border-radius: 50%;
  -webkit-animation: ani-mouse 1.5s linear infinite;
  -moz-animation: ani-mouse 1.5s linear infinite;
  animation: ani-mouse 1.5s linear infinite;
}


/* Vendor CSS */

/* ---- global/css/vendor/xeicon.css ---- */
/*!
*  XEIcon 2.3.0 by @NAVER - http://xpressengine.github.io/XEIcon/ - @XEIcon
*  License - http://xpressengine.github.io/XEIcon/license.html (Font: SIL OFL 1.1, CSS: MIT License)
*/

@font-face {
  font-family: 'xeicon';
  src: url('fonts/xeicon.eot?3ka2yj');
  src: url('fonts/xeicon.eot?3ka2yj#iefix') format('embedded-opentype'), url('fonts/xeicon.woff2?3ka2yj') format('woff2'), url('fonts/xeicon.ttf?3ka2yj') format('truetype'),
    url('fonts/xeicon.woff?3ka2yj') format('woff'), url('fonts/xeicon.svg?3ka2yj#xeicon') format('svg');
  font-weight: normal;
  font-style: normal;
}

i {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'xeicon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.xi-home:before {
  content: '\e900';
}

.xi-home-o:before {
  content: '\e902';
}

.xi-bars:before {
  content: '\e91c';
}

.xi-hamburger-back:before {
  content: '\eb46';
}

.xi-hamburger-out:before {
  content: '\eb45';
}

.xi-apps:before {
  content: '\e903';
}

.xi-ellipsis-h:before {
  content: '\e94a';
}

.xi-ellipsis-v:before {
  content: '\e949';
}

.xi-drag-vertical:before {
  content: '\e996';
}

.xi-drag-handle:before {
  content: '\e960';
}

.xi-arrow-top:before {
  content: '\e912';
}

.xi-arrow-bottom:before {
  content: '\e904';
}

.xi-arrow-left:before {
  content: '\e906';
}

.xi-arrow-right:before {
  content: '\e907';
}

.xi-arrow-up:before {
  content: '\e915';
}

.xi-arrow-down:before {
  content: '\e905';
}

.xi-long-arrow-left:before {
  content: '\e908';
}

.xi-long-arrow-right:before {
  content: '\e90b';
}

.xi-long-arrow-up:before {
  content: '\e909';
}

.xi-long-arrow-down:before {
  content: '\e90a';
}

.xi-angle-left:before {
  content: '\e93b';
}

.xi-angle-left-min:before {
  content: '\e93c';
}

.xi-angle-left-thin:before {
  content: '\e93d';
}

.xi-angle-right:before {
  content: '\e93e';
}

.xi-angle-right-min:before {
  content: '\e93f';
}

.xi-angle-right-thin:before {
  content: '\e940';
}

.xi-angle-up:before {
  content: '\e944';
}

.xi-angle-up-min:before {
  content: '\e945';
}

.xi-angle-up-thin:before {
  content: '\e946';
}

.xi-angle-down:before {
  content: '\e941';
}

.xi-angle-down-min:before {
  content: '\e942';
}

.xi-angle-down-thin:before {
  content: '\e943';
}

.xi-caret-up:before {
  content: '\e92f';
}

.xi-caret-up-min:before {
  content: '\e930';
}

.xi-caret-down:before {
  content: '\e935';
}

.xi-caret-down-min:before {
  content: '\e936';
}

.xi-caret-up-circle:before {
  content: '\e931';
}

.xi-caret-up-circle-o:before {
  content: '\e932';
}

.xi-caret-down-circle:before {
  content: '\e937';
}

.xi-caret-down-circle-o:before {
  content: '\e938';
}

.xi-caret-up-square:before {
  content: '\e933';
}

.xi-caret-up-square-o:before {
  content: '\e934';
}

.xi-caret-down-square:before {
  content: '\e939';
}

.xi-caret-down-square-o:before {
  content: '\e93a';
}

.xi-arrows-h:before {
  content: '\e90e';
}

.xi-arrows-v:before {
  content: '\e90f';
}

.xi-expand:before {
  content: '\e910';
}

.xi-compress:before {
  content: '\e911';
}

.xi-arrows:before {
  content: '\e90c';
}

.xi-arrows-alt:before {
  content: '\e90d';
}

.xi-compare-arrows:before {
  content: '\e947';
}

.xi-scroll:before {
  content: '\e94b';
}

.xi-dashboard:before {
  content: '\e948';
}

.xi-dashboard-o:before {
  content: '\e95e';
}

.xi-refresh:before {
  content: '\e973';
}

.xi-catched:before {
  content: '\e923';
}

.xi-renew:before {
  content: '\e977';
}

.xi-sync:before {
  content: '\e982';
}

.xi-eye:before {
  content: '\e951';
}

.xi-eye-o:before {
  content: '\e950';
}

.xi-eye-off:before {
  content: '\e953';
}

.xi-eye-slash:before {
  content: '\e953';
}

.xi-eye-off-o:before {
  content: '\e952';
}

.xi-eye-slash2:before {
  content: '\e952';
}

.xi-lock:before {
  content: '\e964';
}

.xi-lock-o:before {
  content: '\e966';
}

.xi-unlock:before {
  content: '\e965';
}

.xi-unlock-o:before {
  content: '\e967';
}

.xi-trash:before {
  content: '\e96e';
}

.xi-trash-o:before {
  content: '\e96f';
}

.xi-flag:before {
  content: '\e961';
}

.xi-flag-o:before {
  content: '\e962';
}

.xi-expand-square:before {
  content: '\e954';
}

.xi-compress-square:before {
  content: '\e955';
}

.xi-log-in:before {
  content: '\e963';
}

.xi-log-out:before {
  content: '\e972';
}

.xi-search:before {
  content: '\e97a';
}

.xi-magnifier:before {
  content: '\e97a';
}

.xi-zoom-in:before {
  content: '\e97b';
}

.xi-magnifier-expand:before {
  content: '\e97b';
}

.xi-zoom-out:before {
  content: '\e97c';
}

.xi-magnifier-reduce:before {
  content: '\e97c';
}

.xi-subdirectory:before {
  content: '\e97e';
}

.xi-subdirectory-arrow:before {
  content: '\e981';
}

.xi-external-link:before {
  content: '\e980';
}

.xi-cog:before {
  content: '\e986';
}

.xi-view-array:before {
  content: '\e983';
}

.xi-view-carousel:before {
  content: '\e984';
}

.xi-view-column:before {
  content: '\e985';
}

.xi-view-day:before {
  content: '\e98d';
}

.xi-view-list:before {
  content: '\e993';
}

.xi-view-module:before {
  content: '\e997';
}

.xi-view-stream:before {
  content: '\e99a';
}

.xi-wrench:before {
  content: '\e99b';
}

.xi-filter:before {
  content: '\e9d9';
}

.xi-funnel:before {
  content: '\e9d9';
}

.xi-plus:before {
  content: '\e913';
}

.xi-plus-min:before {
  content: '\e914';
}

.xi-plus-thin:before {
  content: '\e9c5';
}

.xi-minus:before {
  content: '\e91a';
}

.xi-minus-min:before {
  content: '\e91b';
}

.xi-minus-thin:before {
  content: '\e9c1';
}

.xi-close:before {
  content: '\e921';
}

.xi-close-min:before {
  content: '\e922';
}

.xi-close-thin:before {
  content: '\e9af';
}

.xi-check:before {
  content: '\e928';
}

.xi-check-min:before {
  content: '\e929';
}

.xi-check-thin:before {
  content: '\e92a';
}

.xi-plus-circle:before {
  content: '\e916';
}

.xi-plus-circle-o:before {
  content: '\e917';
}

.xi-minus-circle:before {
  content: '\e91d';
}

.xi-minus-circle-o:before {
  content: '\e91e';
}

.xi-close-circle:before {
  content: '\e924';
}

.xi-close-circle-o:before {
  content: '\e925';
}

.xi-check-circle:before {
  content: '\e92b';
}

.xi-check-circle-o:before {
  content: '\e92c';
}

.xi-plus-square:before {
  content: '\e918';
}

.xi-plus-square-o:before {
  content: '\e919';
}

.xi-minus-square:before {
  content: '\e91f';
}

.xi-minus-square-o:before {
  content: '\e920';
}

.xi-close-square:before {
  content: '\e926';
}

.xi-close-square-o:before {
  content: '\e927';
}

.xi-check-square:before {
  content: '\e92d';
}

.xi-check-box:before {
  content: '\e92d';
}

.xi-checkbox-blank:before {
  content: '\ea0e';
}

.xi-check-square-o:before {
  content: '\e92e';
}

.xi-checkbox-checked:before {
  content: '\e92e';
}

.xi-radiobox-blank:before {
  content: '\e9c6';
}

.xi-radiobox-checked:before {
  content: '\e9c7';
}

.xi-cut:before {
  content: '\e9b0';
}

.xi-label:before {
  content: '\e9b1';
}

.xi-label-o:before {
  content: '\e9b2';
}

.xi-library-add:before {
  content: '\e9b3';
}

.xi-library-bookmark:before {
  content: '\e9b4';
}

.xi-tagged-book:before {
  content: '\e9b4';
}

.xi-save:before {
  content: '\e9b9';
}

.xi-lightbulb:before {
  content: '\e9be';
}

.xi-idea:before {
  content: '\e9be';
}

.xi-lightbulb-o:before {
  content: '\e9bf';
}

.xi-link:before {
  content: '\e9c0';
}

.xi-package:before {
  content: '\e9c2';
}

.xi-archive:before {
  content: '\e9c2';
}

.xi-pen:before {
  content: '\e9c3';
}

.xi-pen-o:before {
  content: '\e9c4';
}

.xi-undo:before {
  content: '\e9d2';
}

.xi-redo:before {
  content: '\e9c8';
}

.xi-switch-off:before {
  content: '\e9c9';
}

.xi-switch-on:before {
  content: '\e9ca';
}

.xi-toggle-off:before {
  content: '\e9cb';
}

.xi-toggle-on:before {
  content: '\e9cd';
}

.xi-bookmark:before {
  content: '\ea1c';
}

.xi-bookmark-o:before {
  content: '\ea1d';
}

.xi-tag:before {
  content: '\ea36';
}

.xi-tags:before {
  content: '\ea37';
}

.xi-mail:before {
  content: '\ea06';
}

.xi-envelope:before {
  content: '\ea06';
}

.xi-social-email:before {
  content: '\ea06';
}

.xi-mail-o:before {
  content: '\ea07';
}

.xi-mail-read:before {
  content: '\ea08';
}

.xi-envelope-open:before {
  content: '\ea08';
}

.xi-mail-read-o:before {
  content: '\ea09';
}

.xi-send:before {
  content: '\ea0b';
}

.xi-paper-plane:before {
  content: '\ea0b';
}

.xi-reply:before {
  content: '\ea0d';
}

.xi-reply-all:before {
  content: '\ea0c';
}

.xi-share:before {
  content: '\e9fa';
}

.xi-share-l:before {
  content: '\e9fa';
}

.xi-share-alt:before {
  content: '\e9e9';
}

.xi-share-alt-o:before {
  content: '\e9ea';
}

.xi-call:before {
  content: '\e9d3';
}

.xi-phone:before {
  content: '\e9d3';
}

.xi-call-outgoing:before {
  content: '\e9d4';
}

.xi-call-incoming:before {
  content: '\e9d6';
}

.xi-call-reception:before {
  content: '\e9d6';
}

.xi-call-missed:before {
  content: '\e9d5';
}

.xi-comment:before {
  content: '\e9d7';
}

.xi-comment-o:before {
  content: '\e9d8';
}

.xi-forum:before {
  content: '\e9f0';
}

.xi-comments:before {
  content: '\e9f0';
}

.xi-forum-o:before {
  content: '\e9f1';
}

.xi-video-call:before {
  content: '\ea18';
}

.xi-xi-film:before {
  content: '\ea18';
}

.xi-voicemail:before {
  content: '\ea19';
}

.xi-note:before {
  content: '\ea1a';
}

.xi-note-o:before {
  content: '\ea1b';
}

.xi-at:before {
  content: '\ea0a';
}

.xi-message:before {
  content: '\ea14';
}

.xi-message-o:before {
  content: '\ea15';
}

.xi-speech:before {
  content: '\ea12';
}

.xi-speech-o:before {
  content: '\ea13';
}

.xi-user-address:before {
  content: '\e9f4';
}

.xi-profile:before {
  content: '\e9f2';
}

.xi-user-circle:before {
  content: '\e9f2';
}

.xi-profile-o:before {
  content: '\ea2a';
}

.xi-user:before {
  content: '\e9f3';
}

.xi-users:before {
  content: '\e9f9';
}

.xi-group:before {
  content: '\ea2e';
}

.xi-community:before {
  content: '\ea2e';
}

.xi-user-plus:before {
  content: '\e9f7';
}

.xi-users-plus:before {
  content: '\ea17';
}

.xi-user-o:before {
  content: '\e9f5';
}

.xi-users-o:before {
  content: '\ea04';
}

.xi-user-plus-o:before {
  content: '\e9f8';
}

.xi-star:before {
  content: '\ea0f';
}

.xi-star-o:before {
  content: '\ea16';
}

.xi-heart:before {
  content: '\ea10';
}

.xi-heart-o:before {
  content: '\ea11';
}

.xi-thumbs-up:before {
  content: '\ea28';
}

.xi-thumbs-down:before {
  content: '\ea29';
}

.xi-crown:before {
  content: '\e9da';
}

.xi-trophy:before {
  content: '\ea38';
}

.xi-emoticon-happy:before {
  content: '\e9dd';
}

.xi-happy-face:before {
  content: '\e9dd';
}

.xi-emoticon-happy-o:before {
  content: '\e9ed';
}

.xi-emoticon-smiley:before {
  content: '\e9e4';
}

.xi-smiley-face:before {
  content: '\e9e4';
}

.xi-emoticon-smiley-o:before {
  content: '\e9e6';
}

.xi-emoticon-neutral:before {
  content: '\e9eb';
}

.xi-neutral-face:before {
  content: '\e9eb';
}

.xi-emoticon-neutral-o:before {
  content: '\e9ec';
}

.xi-emoticon-bad:before {
  content: '\e9de';
}

.xi-emoticon-bad-o:before {
  content: '\e9df';
}

.xi-emoticon-sad:before {
  content: '\e9ee';
}

.xi-sad-face:before {
  content: '\e9ee';
}

.xi-emoticon-sad-o:before {
  content: '\e9ef';
}

.xi-emoticon-devil:before {
  content: '\e9e2';
}

.xi-angry-face:before {
  content: '\e9e2';
}

.xi-emoticon-devil-o:before {
  content: '\e9e3';
}

.xi-emoticon-cool:before {
  content: '\e9e0';
}

.xi-emoticon-cool-o:before {
  content: '\e9e1';
}

.xi-bell:before {
  content: '\e99c';
}

.xi-bell-o:before {
  content: '\e99d';
}

.xi-bell-off:before {
  content: '\e99e';
}

.xi-bell-slash:before {
  content: '\e99e';
}

.xi-bell-off-o:before {
  content: '\e99f';
}

.xi-alarm:before {
  content: '\ea1e';
}

.xi-alarm-o:before {
  content: '\ea1f';
}

.xi-alarm-off:before {
  content: '\ea20';
}

.xi-time:before {
  content: '\ea2b';
}

.xi-time-o:before {
  content: '\ea2c';
}

.xi-snooze:before {
  content: '\ea27';
}

.xi-calendar:before {
  content: '\e9a0';
}

.xi-calendar-add:before {
  content: '\e9a1';
}

.xi-calendar-remove:before {
  content: '\e9a2';
}

.xi-calendar-cancle:before {
  content: '\e9a3';
}

.xi-calendar-check:before {
  content: '\e9a4';
}

.xi-calendar-list:before {
  content: '\e9a5';
}

.xi-new:before {
  content: '\e9a8';
}

.xi-new-o:before {
  content: '\e9a9';
}

.xi-info:before {
  content: '\e9a6';
}

.xi-information-circle:before {
  content: '\e9a6';
}

.xi-info-o:before {
  content: '\e9a7';
}

.xi-help:before {
  content: '\e9ad';
}

.xi-unknown-circle:before {
  content: '\e9ad';
}

.xi-help-o:before {
  content: '\e9ac';
}

.xi-error:before {
  content: '\e9aa';
}

.xi-error-o:before {
  content: '\e9ab';
}

.xi-ban:before {
  content: '\e9ae';
}

.xi-slash-circle:before {
  content: '\e9ae';
}

.xi-warning:before {
  content: '\ea2d';
}

.xi-hand-paper:before {
  content: '\ea21';
}

.xi-key:before {
  content: '\ea22';
}

.xi-security:before {
  content: '\ea24';
}

.xi-shield:before {
  content: '\ea24';
}

.xi-shield-checked:before {
  content: '\ea25';
}

.xi-check-shield:before {
  content: '\ea25';
}

.xi-shield-checked-o:before {
  content: '\ea26';
}

.xi-align-justify:before {
  content: '\e956';
}

.xi-align-left:before {
  content: '\e957';
}

.xi-align-center:before {
  content: '\e958';
}

.xi-align-right:before {
  content: '\e959';
}

.xi-indent:before {
  content: '\e95a';
}

.xi-dedent:before {
  content: '\e95b';
}

.xi-list-dot:before {
  content: '\e95c';
}

.xi-list-ul:before {
  content: '\e95c';
}

.xi-list-square:before {
  content: '\e95d';
}

.xi-list-ul-square:before {
  content: '\e95d';
}

.xi-list-number:before {
  content: '\ea6b';
}

.xi-list-ol:before {
  content: '\ea6b';
}

.xi-list:before {
  content: '\e95f';
}

.xi-list-ul-l:before {
  content: '\e95f';
}

.xi-paragraph:before {
  content: '\e968';
}

.xi-bold:before {
  content: '\e96a';
}

.xi-italic:before {
  content: '\e96c';
}

.xi-strikethrough:before {
  content: '\e969';
}

.xi-underline:before {
  content: '\e96b';
}

.xi-caps:before {
  content: '\e96d';
}

.xi-text-size:before {
  content: '\eaba';
}

.xi-text-type:before {
  content: '\e97f';
}

.xi-type:before {
  content: '\e97f';
}

.xi-spellcheck:before {
  content: '\eaa9';
}

.xi-translate:before {
  content: '\eabc';
}

.xi-line-height:before {
  content: '\e976';
}

.xi-lineheight:before {
  content: '\e976';
}

.xi-font:before {
  content: '\ea63';
}

.xi-text-format:before {
  content: '\eab9';
}

.xi-text-color:before {
  content: '\eaaa';
}

.xi-color-fill:before {
  content: '\ea5e';
}

.xi-color-helper:before {
  content: '\ea5f';
}

.xi-scissors:before {
  content: '\e994';
}

.xi-document:before {
  content: '\e998';
}

.xi-form:before {
  content: '\e998';
}

.xi-palette:before {
  content: '\e995';
}

.xi-color:before {
  content: '\e995';
}

.xi-color-dropper:before {
  content: '\e97d';
}

.xi-eye-dropper:before {
  content: '\e97d';
}

.xi-eraser:before {
  content: '\e970';
}

.xi-eraser-o:before {
  content: '\e971';
}

.xi-sort-asc:before {
  content: '\e974';
}

.xi-lineheight-plus:before {
  content: '\e974';
}

.xi-sort-desc:before {
  content: '\e975';
}

.xi-lineheight-minus:before {
  content: '\e975';
}

.xi-rotate-right:before {
  content: '\e978';
}

.xi-rotate-left:before {
  content: '\e979';
}

.xi-layout:before {
  content: '\e988';
}

.xi-layout-top:before {
  content: '\e988';
}

.xi-layout-o:before {
  content: '\e98e';
}

.xi-layout-full:before {
  content: '\e989';
}

.xi-layout-full-o:before {
  content: '\e98f';
}

.xi-layout-snb:before {
  content: '\e98a';
}

.xi-layout-top-left:before {
  content: '\e98a';
}

.xi-layout-snb-o:before {
  content: '\e990';
}

.xi-layout-aside:before {
  content: '\e98b';
}

.xi-layout-top-right:before {
  content: '\e98b';
}

.xi-layout-aside-o:before {
  content: '\e991';
}

.xi-layout-column:before {
  content: '\e98c';
}

.xi-layout-top-three:before {
  content: '\e98c';
}

.xi-layout-column-o:before {
  content: '\e992';
}

.xi-crop:before {
  content: '\e999';
}

.xi-border-color:before {
  content: '\ea39';
}

.xi-line-style:before {
  content: '\ea66';
}

.xi-line-weight:before {
  content: '\ea67';
}

.xi-border-all:before {
  content: '\e987';
}

.xi-border-bottom:before {
  content: '\ea32';
}

.xi-border-clear:before {
  content: '\ea33';
}

.xi-border-horizontal:before {
  content: '\ea45';
}

.xi-border-inner:before {
  content: '\ea46';
}

.xi-border-left:before {
  content: '\ea49';
}

.xi-border-outer:before {
  content: '\ea4f';
}

.xi-border-right:before {
  content: '\ea51';
}

.xi-border-style:before {
  content: '\ea52';
}

.xi-border-top:before {
  content: '\ea54';
}

.xi-border-vertical:before {
  content: '\ea5c';
}

.xi-valign-top:before {
  content: '\eabf';
}

.xi-valign-bottom:before {
  content: '\eabd';
}

.xi-valign-center:before {
  content: '\eabe';
}

.xi-code:before {
  content: '\ea5d';
}

.xi-emoticon:before {
  content: '\ea62';
}

.xi-emoji:before {
  content: '\ea62';
}

.xi-face:before {
  content: '\ea62';
}

.xi-link-insert:before {
  content: '\ea6a';
}

.xi-link-l:before {
  content: '\ea6a';
}

.xi-link-broken:before {
  content: '\ea68';
}

.xi-unlink:before {
  content: '\ea68';
}

.xi-omega:before {
  content: '\ea6c';
}

.xi-opacity:before {
  content: '\ea6d';
}

.xi-overscan:before {
  content: '\ea78';
}

.xi-paperclip:before {
  content: '\ea7f';
}

.xi-transform:before {
  content: '\eabb';
}

.xi-power-off:before {
  content: '\e94c';
}

.xi-esc:before {
  content: '\e94f';
}

.xi-command:before {
  content: '\e94e';
}

.xi-alt:before {
  content: '\e94d';
}

.xi-tab:before {
  content: '\eaf8';
}

.xi-backspace:before {
  content: '\eac4';
}

.xi-capslock:before {
  content: '\ead6';
}

.xi-watch:before {
  content: '\e9b5';
}

.xi-mouse:before {
  content: '\e9b6';
}

.xi-sdcard:before {
  content: '\e9b7';
}

.xi-usb-drive:before {
  content: '\e9b8';
}

.xi-diskette:before {
  content: '\e9ba';
}

.xi-print:before {
  content: '\e9bb';
}

.xi-social-print:before {
  content: '\e9bb';
}

.xi-fax:before {
  content: '\e9bc';
}

.xi-webcam:before {
  content: '\e9cc';
}

.xi-projector:before {
  content: '\e9ce';
}

.xi-presentation:before {
  content: '\e9cf';
}

.xi-plug:before {
  content: '\e9d0';
}

.xi-speaker:before {
  content: '\ea60';
}

.xi-airplay:before {
  content: '\eac0';
}

.xi-alarm-clock:before {
  content: '\eac1';
}

.xi-alarm-clock-o:before {
  content: '\eac2';
}

.xi-alarm-clock-off:before {
  content: '\eac3';
}

.xi-battery:before {
  content: '\eac5';
}

.xi-battery-full:before {
  content: '\eac5';
}

.xi-battery-o:before {
  content: '\ead0';
}

.xi-battery-min:before {
  content: '\ead0';
}

.xi-battery-10:before {
  content: '\eac6';
}

.xi-battery-20:before {
  content: '\eac7';
}

.xi-battery-30:before {
  content: '\eac8';
}

.xi-battery-40:before {
  content: '\eac9';
}

.xi-battery-50:before {
  content: '\eacb';
}

.xi-battery-60:before {
  content: '\eacc';
}

.xi-battery-70:before {
  content: '\eacd';
}

.xi-battery-80:before {
  content: '\eace';
}

.xi-battery-90:before {
  content: '\eacf';
}

.xi-bluetooth:before {
  content: '\ead1';
}

.xi-bluetooth-off:before {
  content: '\ead2';
}

.xi-bluetooth-on:before {
  content: '\ead3';
}

.xi-bluetooth-search:before {
  content: '\ead4';
}

.xi-brightness:before {
  content: '\ead5';
}

.xi-clock:before {
  content: '\ead7';
}

.xi-clock-o:before {
  content: '\ead8';
}

.xi-contrast:before {
  content: '\ead9';
}

.xi-desktop:before {
  content: '\eada';
}

.xi-monitor:before {
  content: '\eada';
}

.xi-laptop:before {
  content: '\eae9';
}

.xi-devices:before {
  content: '\eadb';
}

.xi-tablet:before {
  content: '\eaf9';
}

.xi-mobile:before {
  content: '\eaed';
}

.xi-tv:before {
  content: '\eafb';
}

.xi-enter:before {
  content: '\eadc';
}

.xi-flashlight:before {
  content: '\eadd';
}

.xi-flashlight-off:before {
  content: '\eade';
}

.xi-flight-off:before {
  content: '\eadf';
}

.xi-flight-on:before {
  content: '\eae0';
}

.xi-gamepad:before {
  content: '\eae1';
}

.xi-gps:before {
  content: '\eae2';
}

.xi-gps-none:before {
  content: '\eae3';
}

.xi-gps-off:before {
  content: '\eae4';
}

.xi-hdd:before {
  content: '\eae5';
}

.xi-hdmi:before {
  content: '\eae6';
}

.xi-keyboard:before {
  content: '\eae7';
}

.xi-keyboard-o:before {
  content: '\eae8';
}

.xi-space-bar:before {
  content: '\eaf7';
}

.xi-lock-rotation:before {
  content: '\eaea';
}

.xi-chip:before {
  content: '\eaeb';
}

.xi-chip-o:before {
  content: '\eaec';
}

.xi-mouse-pointer:before {
  content: '\eaee';
}

.xi-router:before {
  content: '\eaef';
}

.xi-wifi-router:before {
  content: '\eaef';
}

.xi-router-o:before {
  content: '\eaf0';
}

.xi-signal:before {
  content: '\eaf1';
}

.xi-signal-1:before {
  content: '\eaf2';
}

.xi-signal-2:before {
  content: '\eaf3';
}

.xi-signal-3:before {
  content: '\eaf4';
}

.xi-signal-4:before {
  content: '\eaf5';
}

.xi-signal-none:before {
  content: '\eaf6';
}

.xi-touch:before {
  content: '\eafa';
}

.xi-usb:before {
  content: '\eafc';
}

.xi-wifi:before {
  content: '\eafd';
}

.xi-wifi-signal:before {
  content: '\eafd';
}

.xi-wifi-signal-mid:before {
  content: '\eafe';
}

.xi-wifi-signal-min:before {
  content: '\eaff';
}

.xi-wifi-signal-off:before {
  content: '\eb00';
}

.xi-chart-bar:before {
  content: '\e901';
}

.xi-book:before {
  content: '\ea34';
}

.xi-book-o:before {
  content: '\ea35';
}

.xi-play:before {
  content: '\ea3e';
}

.xi-caret-right:before {
  content: '\ea3e';
}

.xi-play-circle:before {
  content: '\ea40';
}

.xi-play-circle-o:before {
  content: '\ea3f';
}

.xi-pause-circle:before {
  content: '\ea3d';
}

.xi-pause-circle-o:before {
  content: '\ea3c';
}

.xi-pause:before {
  content: '\ea3b';
}

.xi-stop:before {
  content: '\ea41';
}

.xi-recording-stop:before {
  content: '\eb24';
}

.xi-recording:before {
  content: '\eb21';
}

.xi-record:before {
  content: '\eb21';
}

.xi-eject:before {
  content: '\ea42';
}

.xi-step-backward:before {
  content: '\ea43';
}

.xi-step-forward:before {
  content: '\ea44';
}

.xi-backward:before {
  content: '\ea47';
}

.xi-forward:before {
  content: '\ea48';
}

.xi-fast-backward:before {
  content: '\eb08';
}

.xi-fast-forward:before {
  content: '\eb07';
}

.xi-camera:before {
  content: '\ea4b';
}

.xi-camera-o:before {
  content: '\ea4a';
}

.xi-videocam:before {
  content: '\ea4d';
}

.xi-video-camera:before {
  content: '\ea4d';
}

.xi-videocam-o:before {
  content: '\ea4c';
}

.xi-image:before {
  content: '\ea50';
}

.xi-image-o:before {
  content: '\ea4e';
}

.xi-microphone-o:before {
  content: '\ea56';
}

.xi-microphone:before {
  content: '\ea57';
}

.xi-microphone-off:before {
  content: '\ea58';
}

.xi-microphone-slash:before {
  content: '\ea58';
}

.xi-volume-mute:before {
  content: '\ea59';
}

.xi-volume:before {
  content: '\ea59';
}

.xi-volume-down:before {
  content: '\ea5a';
}

.xi-volume-min:before {
  content: '\ea5a';
}

.xi-volume-up:before {
  content: '\ea5b';
}

.xi-volume-max:before {
  content: '\ea5b';
}

.xi-volume-off:before {
  content: '\eb39';
}

.xi-volume-slash:before {
  content: '\eb39';
}

.xi-album:before {
  content: '\ea61';
}

.xi-record-play:before {
  content: '\ea61';
}

.xi-cd-r:before {
  content: '\ea61';
}

.xi-headset:before {
  content: '\ea64';
}

.xi-music:before {
  content: '\ea65';
}

.xi-chart-pyramid:before {
  content: '\ea69';
}

.xi-chart-bar-square:before {
  content: '\eb01';
}

.xi-chart-line:before {
  content: '\eb02';
}

.xi-chart-pie:before {
  content: '\eb03';
}

.xi-chart-pie-o:before {
  content: '\eb04';
}

.xi-equalizer:before {
  content: '\eb05';
}

.xi-volume-bar:before {
  content: '\eb05';
}

.xi-equalizer-thin:before {
  content: '\ea55';
}

.xi-exposure:before {
  content: '\eb06';
}

.xi-flash:before {
  content: '\eb09';
}

.xi-flash-off:before {
  content: '\eb0a';
}

.xi-focus-center:before {
  content: '\eb0b';
}

.xi-focus-frame:before {
  content: '\eb0c';
}

.xi-focus-weak:before {
  content: '\eb11';
}

.xi-paper:before {
  content: '\eb1e';
}

.xi-paper-o:before {
  content: '\eb1f';
}

.xi-library-books:before {
  content: '\eb14';
}

.xi-library-books-o:before {
  content: '\eb16';
}

.xi-library-image:before {
  content: '\eb17';
}

.xi-library-image-o:before {
  content: '\eb18';
}

.xi-library-music:before {
  content: '\eb19';
}

.xi-library-video:before {
  content: '\eb1a';
}

.xi-movie:before {
  content: '\eb1b';
}

.xi-movie-o:before {
  content: '\eb1c';
}

.xi-pacman:before {
  content: '\eb1d';
}

.xi-radio:before {
  content: '\eb20';
}

.xi-repeat:before {
  content: '\eb25';
}

.xi-repeat-one:before {
  content: '\eb26';
}

.xi-shuffle:before {
  content: '\eb27';
}

.xi-timer:before {
  content: '\eb29';
}

.xi-timer-o:before {
  content: '\eb2a';
}

.xi-timer-off-o:before {
  content: '\eb2f';
}

.xi-timer-sand:before {
  content: '\eb30';
}

.xi-sandwatch-min:before {
  content: '\eb30';
}

.xi-timer-sand-o:before {
  content: '\eb31';
}

.xi-trending-flat:before {
  content: '\eb36';
}

.xi-trending-down:before {
  content: '\eb33';
}

.xi-decline:before {
  content: '\eb33';
}

.xi-trending-up:before {
  content: '\eb37';
}

.xi-rise:before {
  content: '\eb37';
}

.xi-tune:before {
  content: '\eb38';
}

.xi-map:before {
  content: '\eb22';
}

.xi-map-folding:before {
  content: '\eb22';
}

.xi-map-o:before {
  content: '\eb23';
}

.xi-my-location:before {
  content: '\eb5d';
}

.xi-location-arrow:before {
  content: '\eb58';
}

.xi-woman:before {
  content: '\ea2f';
}

.xi-man:before {
  content: '\ea30';
}

.xi-toilet:before {
  content: '\ea31';
}

.xi-pregnant-woman:before {
  content: '\eb61';
}

.xi-maternity:before {
  content: '\eb61';
}

.xi-walk:before {
  content: '\eb6d';
}

.xi-walking:before {
  content: '\eb6d';
}

.xi-run:before {
  content: '\eb63';
}

.xi-wheelchair:before {
  content: '\eb6e';
}

.xi-glass:before {
  content: '\eb28';
}

.xi-market:before {
  content: '\eb2b';
}

.xi-shopping-bag:before {
  content: '\eb2b';
}

.xi-pharmacy:before {
  content: '\eb2c';
}

.xi-laundry:before {
  content: '\eb2e';
}

.xi-florist:before {
  content: '\eb32';
}

.xi-hlz:before {
  content: '\eb34';
}

.xi-park:before {
  content: '\eb35';
}

.xi-airplane:before {
  content: '\eb3a';
}

.xi-all:before {
  content: '\eb3b';
}

.xi-flight-takeoff:before {
  content: '\eb3c';
}

.xi-flight:before {
  content: '\eb3c';
}

.xi-flight-land:before {
  content: '\eb3d';
}

.xi-bank:before {
  content: '\eb3e';
}

.xi-bank-o:before {
  content: '\eb3e';
}

.xi-beach:before {
  content: '\eb3f';
}

.xi-bicycle:before {
  content: '\eb40';
}

.xi-building:before {
  content: '\eb41';
}

.xi-bus:before {
  content: '\eb42';
}

.xi-business:before {
  content: '\eb43';
}

.xi-cafe:before {
  content: '\eb44';
}

.xi-cake:before {
  content: '\eb47';
}

.xi-car:before {
  content: '\eb48';
}

.xi-church:before {
  content: '\eb49';
}

.xi-city:before {
  content: '\eb4a';
}

.xi-compass:before {
  content: '\eb4b';
}

.xi-compass-o:before {
  content: '\eb4c';
}

.xi-convenience-store:before {
  content: '\eb4d';
}

.xi-directions:before {
  content: '\eb4e';
}

.xi-factory:before {
  content: '\eb4f';
}

.xi-fitness-center:before {
  content: '\eb50';
}

.xi-garden:before {
  content: '\eb51';
}

.xi-gas-station:before {
  content: '\eb52';
}

.xi-golf:before {
  content: '\eb53';
}

.xi-hand-pointing:before {
  content: '\eb54';
}

.xi-hospital:before {
  content: '\eb55';
}

.xi-hotel:before {
  content: '\eb56';
}

.xi-library:before {
  content: '\eb57';
}

.xi-maker:before {
  content: '\eb59';
}

.xi-marker-circle:before {
  content: '\eb59';
}

.xi-marker-plus:before {
  content: '\eb5b';
}

.xi-maker-drop:before {
  content: '\eb5f';
}

.xi-map-marker:before {
  content: '\eb5f';
}

.xi-marker-check:before {
  content: '\eb5a';
}

.xi-motorcycle:before {
  content: '\eb5c';
}

.xi-navigation:before {
  content: '\eb5e';
}

.xi-pool:before {
  content: '\eb60';
}

.xi-restaurant:before {
  content: '\eb62';
}

.xi-school:before {
  content: '\eb64';
}

.xi-ship:before {
  content: '\eb65';
}

.xi-spa:before {
  content: '\eb66';
}

.xi-stroller:before {
  content: '\eb67';
}

.xi-subway:before {
  content: '\eb68';
}

.xi-taxi:before {
  content: '\eb69';
}

.xi-theater:before {
  content: '\eb6a';
}

.xi-film:before {
  content: '\eb6a';
}

.xi-traffic:before {
  content: '\eb6b';
}

.xi-train:before {
  content: '\eb6c';
}

.xi-cart:before {
  content: '\eb6f';
}

.xi-cart-o:before {
  content: '\e9fb';
}

.xi-cart-add:before {
  content: '\e9fc';
}

.xi-cart-remove:before {
  content: '\e9fd';
}

.xi-basket:before {
  content: '\e9fe';
}

.xi-box:before {
  content: '\ea01';
}

.xi-fragile:before {
  content: '\ea02';
}

.xi-coupon:before {
  content: '\ea03';
}

.xi-shop:before {
  content: '\ea05';
}

.xi-gift:before {
  content: '\eb70';
}

.xi-present:before {
  content: '\eb70';
}

.xi-gift-o:before {
  content: '\ea3a';
}

.xi-exchange:before {
  content: '\ea53';
}

.xi-barter:before {
  content: '\ea53';
}

.xi-yuan:before {
  content: '\ea6e';
}

.xi-won:before {
  content: '\ea6f';
}

.xi-yen:before {
  content: '\ea70';
}

.xi-pound:before {
  content: '\ea71';
}

.xi-euro:before {
  content: '\ea72';
}

.xi-rial:before {
  content: '\ea73';
}

.xi-dollar:before {
  content: '\ea74';
}

.xi-peso:before {
  content: '\ea75';
}

.xi-rupee:before {
  content: '\ea76';
}

.xi-credit-card:before {
  content: '\ea77';
}

.xi-money:before {
  content: '\ea79';
}

.xi-piggy-bank:before {
  content: '\ea7a';
}

.xi-strongbox:before {
  content: '\ea7b';
}

.xi-briefcase:before {
  content: '\ea7c';
}

.xi-percent:before {
  content: '\ea7d';
}

.xi-calculator:before {
  content: '\ea7e';
}

.xi-medicine:before {
  content: '\eb2d';
}

.xi-receipt:before {
  content: '\eb71';
}

.xi-truck:before {
  content: '\eb72';
}

.xi-wallet:before {
  content: '\eb73';
}

.xi-file:before {
  content: '\ea94';
}

.xi-file-o:before {
  content: '\ea80';
}

.xi-file-add:before {
  content: '\ea95';
}

.xi-file-add-o:before {
  content: '\ea81';
}

.xi-file-remove:before {
  content: '\ea96';
}

.xi-file-remove-o:before {
  content: '\ea82';
}

.xi-file-text:before {
  content: '\ea97';
}

.xi-file-text-o:before {
  content: '\ea83';
}

.xi-documents:before {
  content: '\ea98';
}

.xi-stack-paper:before {
  content: '\ea98';
}

.xi-documents-o:before {
  content: '\ea84';
}

.xi-file-image:before {
  content: '\ea99';
}

.xi-file-image-o:before {
  content: '\ea85';
}

.xi-file-video:before {
  content: '\ea9a';
}

.xi-file-video-o:before {
  content: '\ea86';
}

.xi-file-music:before {
  content: '\ea9b';
}

.xi-file-music-o:before {
  content: '\ea87';
}

.xi-file-code:before {
  content: '\ea9c';
}

.xi-file-code-o:before {
  content: '\ea88';
}

.xi-file-zip:before {
  content: '\ea9d';
}

.xi-file-zip-o:before {
  content: '\ea89';
}

.xi-file-upload:before {
  content: '\ea9e';
}

.xi-file-upload-o:before {
  content: '\ea8a';
}

.xi-file-download:before {
  content: '\ea9f';
}

.xi-file-download-o:before {
  content: '\ea8b';
}

.xi-file-check:before {
  content: '\eaa0';
}

.xi-file-check-o:before {
  content: '\ea8c';
}

.xi-folder:before {
  content: '\eaa1';
}

.xi-folder-o:before {
  content: '\ea8d';
}

.xi-folder-open:before {
  content: '\eaa8';
}

.xi-folder-shared:before {
  content: '\eb7d';
}

.xi-folder-zip:before {
  content: '\eaa7';
}

.xi-folder-zip-o:before {
  content: '\ea93';
}

.xi-folder-add:before {
  content: '\eaa2';
}

.xi-folder-add-o:before {
  content: '\ea8e';
}

.xi-folder-remove:before {
  content: '\eaa3';
}

.xi-folder-remove-o:before {
  content: '\ea8f';
}

.xi-folder-check:before {
  content: '\eaa4';
}

.xi-folder-check-o:before {
  content: '\ea90';
}

.xi-folder-upload:before {
  content: '\eaa5';
}

.xi-folder-upload-o:before {
  content: '\ea91';
}

.xi-folder-download:before {
  content: '\eaa6';
}

.xi-folder-download-o:before {
  content: '\ea92';
}

.xi-attachment:before {
  content: '\eb74';
}

.xi-cloud:before {
  content: '\eb75';
}

.xi-cloud-o:before {
  content: '\eb78';
}

.xi-cloud-off:before {
  content: '\eb79';
}

.xi-cloud-upload:before {
  content: '\eb7a';
}

.xi-cloud-upload-o:before {
  content: '\eb7b';
}

.xi-cloud-download:before {
  content: '\eb76';
}

.xi-cloud-download-o:before {
  content: '\eb77';
}

.xi-upload:before {
  content: '\eb7e';
}

.xi-download:before {
  content: '\eb7c';
}

.xi-globus:before {
  content: '\e9d1';
}

.xi-browser:before {
  content: '\e9db';
}

.xi-browser-text:before {
  content: '\e9dc';
}

.xi-rss-square:before {
  content: '\e9e5';
}

.xi-central-signal:before {
  content: '\e9e7';
}

.xi-central-router:before {
  content: '\e9e8';
}

.xi-antenna:before {
  content: '\e9f6';
}

.xi-barcode:before {
  content: '\e9ff';
}

.xi-qr-code:before {
  content: '\ea00';
}

.xi-accessibility:before {
  content: '\eb7f';
}

.xi-branch:before {
  content: '\eb80';
}

.xi-fork:before {
  content: '\eb85';
}

.xi-code-fork:before {
  content: '\eb85';
}

.xi-pull-requests:before {
  content: '\eb92';
}

.xi-merge:before {
  content: '\eb8b';
}

.xi-log:before {
  content: '\eb8a';
}

.xi-bug:before {
  content: '\eb81';
}

.xi-cookie:before {
  content: '\eb82';
}

.xi-fingerprint:before {
  content: '\eb84';
}

.xi-css3:before {
  content: '\eb83';
}

.xi-html5:before {
  content: '\eb86';
}

.xi-javascript:before {
  content: '\eb87';
}

.xi-csharp:before {
  content: '\eb88';
}

.xi-php:before {
  content: '\eb91';
}

.xi-python:before {
  content: '\eb94';
}

.xi-milestone:before {
  content: '\eb8c';
}

.xi-network-company:before {
  content: '\eb8d';
}

.xi-network-folder:before {
  content: '\eb8e';
}

.xi-network-home:before {
  content: '\eb8f';
}

.xi-home-network:before {
  content: '\eb8f';
}

.xi-network-public:before {
  content: '\eb90';
}

.xi-cloud-network:before {
  content: '\eb90';
}

.xi-puzzle:before {
  content: '\eb93';
}

.xi-rss:before {
  content: '\eb95';
}

.xi-social-rssfeed:before {
  content: '\eb95';
}

.xi-server:before {
  content: '\eb96';
}

.xi-network-server:before {
  content: '\eb97';
}

.xi-sitemap:before {
  content: '\eb98';
}

.xi-sitemap-o:before {
  content: '\eb99';
}

.xi-spinner-1:before {
  content: '\ec33';
}

.xi-spinner-2:before {
  content: '\ec34';
}

.xi-spinner-3:before {
  content: '\ec35';
}

.xi-spinner-4:before {
  content: '\ec36';
}

.xi-spinner-5:before {
  content: '\ec37';
}

.xi-full-moon:before {
  content: '\eb0d';
}

.xi-fullmoon:before {
  content: '\eb0d';
}

.xi-half-moon:before {
  content: '\eb0e';
}

.xi-halfmoon:before {
  content: '\eb0e';
}

.xi-crescent:before {
  content: '\eb9b';
}

.xi-moon:before {
  content: '\eb0f';
}

.xi-night:before {
  content: '\eb10';
}

.xi-snow-crystal:before {
  content: '\eb15';
}

.xi-snow:before {
  content: '\eb15';
}

.xi-cloudy:before {
  content: '\eb9c';
}

.xi-fog:before {
  content: '\eb9d';
}

.xi-foggy:before {
  content: '\eb9e';
}

.xi-lightning:before {
  content: '\eb9f';
}

.xi-partly-cloudy:before {
  content: '\eba0';
}

.xi-pouring:before {
  content: '\eba1';
}

.xi-rain:before {
  content: '\eba1';
}

.xi-snowy:before {
  content: '\eba2';
}

.xi-heavy-snow:before {
  content: '\eba2';
}

.xi-sun:before {
  content: '\eba3';
}

.xi-sun-o:before {
  content: '\eba4';
}

.xi-sunset:before {
  content: '\eba5';
}

.xi-sunset-down:before {
  content: '\eba6';
}

.xi-sunset-up:before {
  content: '\eba7';
}

.xi-thermometer:before {
  content: '\eba8';
}

.xi-tint:before {
  content: '\eba9';
}

.xi-humidity:before {
  content: '\eba9';
}

.xi-tint-o:before {
  content: '\ebaa';
}

.xi-tornado:before {
  content: '\ebab';
}

.xi-umbrella:before {
  content: '\ebac';
}

.xi-umbrella-o:before {
  content: '\ebad';
}

.xi-windy:before {
  content: '\ebae';
}

.xi-wind:before {
  content: '\ebae';
}

.xi-windy-variant:before {
  content: '\ebaf';
}

.xi-windsock:before {
  content: '\eb13';
}

.xi-cc-cc:before {
  content: '\eaad';
}

.xi-cc-by:before {
  content: '\eaae';
}

.xi-cc-sa:before {
  content: '\eaaf';
}

.xi-cc-nd:before {
  content: '\eab0';
}

.xi-cc-nc:before {
  content: '\eab1';
}

.xi-cc-nc-eu:before {
  content: '\eab2';
}

.xi-cc-nc-jp:before {
  content: '\eab3';
}

.xi-cc-remix:before {
  content: '\eab4';
}

.xi-cc-pd:before {
  content: '\eab5';
}

.xi-cc-sampling:before {
  content: '\eab6';
}

.xi-cc-zero:before {
  content: '\eab7';
}

.xi-cc-share:before {
  content: '\eab8';
}

.xi-copyleft:before {
  content: '\ebb0';
}

.xi-copyright:before {
  content: '\ebb1';
}

.xi-registered:before {
  content: '\eaab';
}

.xi-trademark:before {
  content: '\eaac';
}

.xi-500px:before {
  content: '\ebb2';
}

.xi-adobe:before {
  content: '\ebb3';
}

.xi-amazon:before {
  content: '\ebb4';
}

.xi-android:before {
  content: '\ebb5';
}

.xi-apple:before {
  content: '\ebb6';
}

.xi-beats:before {
  content: '\ebb7';
}

.xi-behance:before {
  content: '\ebb8';
}

.xi-bing:before {
  content: '\ebb9';
}

.xi-bitbucket:before {
  content: '\ebba';
}

.xi-blackberry:before {
  content: '\ebbb';
}

.xi-blogger:before {
  content: '\ebbc';
}

.xi-cc-amex:before {
  content: '\ebbe';
}

.xi-cc-discover:before {
  content: '\ebbf';
}

.xi-cc-mastercard:before {
  content: '\ebc0';
}

.xi-cc-paypal:before {
  content: '\ebc1';
}

.xi-cc-stripe:before {
  content: '\ebc2';
}

.xi-cc-visa:before {
  content: '\ebc3';
}

.xi-chrome:before {
  content: '\ebc5';
}

.xi-codepen:before {
  content: '\ebc6';
}

.xi-connectdevelop:before {
  content: '\ebc7';
}

.xi-d2:before {
  content: '\ebc8';
}

.xi-dashcube:before {
  content: '\ebc9';
}

.xi-delicious:before {
  content: '\ebca';
}

.xi-deviantart:before {
  content: '\ebcb';
}

.xi-digg:before {
  content: '\ebcc';
}

.xi-disqus:before {
  content: '\ebcd';
}

.xi-dribbble:before {
  content: '\ebce';
}

.xi-dropbox:before {
  content: '\ebcf';
}

.xi-drupal:before {
  content: '\ebd0';
}

.xi-edge:before {
  content: '\ebd1';
}

.xi-evernote:before {
  content: '\ebd2';
}

.xi-facebook:before {
  content: '\ebd3';
}

.xi-facebook-messenger:before {
  content: '\ebd4';
}

.xi-facebook-official:before {
  content: '\ebd5';
}

.xi-feedly:before {
  content: '\ebd6';
}

.xi-firefox:before {
  content: '\ebd7';
}

.xi-flickr:before {
  content: '\eaca';
}

.xi-flickr-square:before {
  content: '\ebd8';
}

.xi-foursquare:before {
  content: '\ebd9';
}

.xi-ghost:before {
  content: '\ebda';
}

.xi-git:before {
  content: '\ebdb';
}

.xi-git-symbol:before {
  content: '\ebdc';
}

.xi-github:before {
  content: '\ebdd';
}

.xi-github-alt:before {
  content: '\ebde';
}

.xi-gmail:before {
  content: '\ebdf';
}

.xi-google:before {
  content: '\ebe0';
}

.xi-google-play:before {
  content: '\ebe1';
}

.xi-google-plus:before {
  content: '\ebe2';
}

.xi-google-wallet:before {
  content: '\ebe3';
}

.xi-gratipay:before {
  content: '\ebe4';
}

.xi-hangouts:before {
  content: '\ebe5';
}

.xi-hunie:before {
  content: '\ebe6';
}

.xi-illustrator:before {
  content: '\ebe7';
}

.xi-illustrator-circle:before {
  content: '\ebe8';
}

.xi-instagram:before {
  content: '\ebe9';
}

.xi-internet-explorer:before {
  content: '\ebea';
}

.xi-jira:before {
  content: '\ebeb';
}

.xi-joomla:before {
  content: '\ebec';
}

.xi-jsfiddle:before {
  content: '\ebed';
}

.xi-kakaostory:before {
  content: '\ebef';
}

.xi-kakaotalk:before {
  content: '\ebee';
}

.xi-kickstarter:before {
  content: '\ebf0';
}

.xi-laravel:before {
  content: '\eb89';
}

.xi-line:before {
  content: '\ebf1';
}

.xi-line-messenger:before {
  content: '\ebf2';
}

.xi-linkedin:before {
  content: '\ebf3';
}

.xi-linkedin-square:before {
  content: '\ebf4';
}

.xi-linux:before {
  content: '\ebf5';
}

.xi-magento:before {
  content: '\ebf6';
}

.xi-maxcdn:before {
  content: '\ebf7';
}

.xi-medium:before {
  content: '\ebf8';
}

.xi-naver:before {
  content: '\ebf9';
}

.xi-naver-square:before {
  content: '\ebfa';
}

.xi-office:before {
  content: '\ebfb';
}

.xi-opencart:before {
  content: '\ebfc';
}

.xi-opera:before {
  content: '\ebfd';
}

.xi-oscommerce:before {
  content: '\ebfe';
}

.xi-path:before {
  content: '\ebff';
}

.xi-paypal:before {
  content: '\ec00';
}

.xi-photoshop:before {
  content: '\ec01';
}

.xi-photoshop-circle:before {
  content: '\ec02';
}

.xi-pinterest:before {
  content: '\ec03';
}

.xi-pinterest-p:before {
  content: '\ec04';
}

.xi-pocket:before {
  content: '\ec05';
}

.xi-qq:before {
  content: '\ec06';
}

.xi-quicktime:before {
  content: '\ec07';
}

.xi-reddit:before {
  content: '\ec08';
}

.xi-renren:before {
  content: '\ec09';
}

.xi-safari:before {
  content: '\ec0a';
}

.xi-sellsy:before {
  content: '\ec0b';
}

.xi-silverstripe:before {
  content: '\ebbd';
}

.xi-simplybuilt:before {
  content: '\ec0c';
}

.xi-sketch:before {
  content: '\ec0d';
}

.xi-skype:before {
  content: '\ec0e';
}

.xi-slack:before {
  content: '\ec0f';
}

.xi-slideshare:before {
  content: '\ec10';
}

.xi-soundcloud:before {
  content: '\ec11';
}

.xi-spotify:before {
  content: '\ec12';
}

.xi-stack-exchange:before {
  content: '\ec13';
}

.xi-stack-overflow:before {
  content: '\ec14';
}

.xi-steam:before {
  content: '\ec15';
}

.xi-steam-square:before {
  content: '\ec16';
}

.xi-stumbleupon:before {
  content: '\ec17';
}

.xi-stumbleupon-circle:before {
  content: '\ec18';
}

.xi-telegram:before {
  content: '\ec19';
}

.xi-tencent-weibo:before {
  content: '\ec1a';
}

.xi-trello:before {
  content: '\ec1b';
}

.xi-tumblr:before {
  content: '\ec1c';
}

.xi-tumblr-square:before {
  content: '\ec1d';
}

.xi-twich:before {
  content: '\ec1e';
}

.xi-twitter:before {
  content: '\ec1f';
}

.xi-ubercart:before {
  content: '\ec20';
}

.xi-ubuntu:before {
  content: '\ec21';
}

.xi-ubuntu-circle:before {
  content: '\ec22';
}

.xi-vimeo:before {
  content: '\ec23';
}

.xi-vine:before {
  content: '\ec24';
}

.xi-vk:before {
  content: '\ec25';
}

.xi-wechat:before {
  content: '\ec26';
}

.xi-whatsapp:before {
  content: '\ec27';
}

.xi-wikipedia:before {
  content: '\ec28';
}

.xi-windows:before {
  content: '\ec29';
}

.xi-wordpress:before {
  content: '\ec2a';
}

.xi-wordpress-official:before {
  content: '\ec2b';
}

.xi-xe:before {
  content: '\ec2c';
}

.xi-xing:before {
  content: '\ec2d';
}

.xi-xpressengine:before {
  content: '\ec2e';
}

.xi-yahoo:before {
  content: '\ec2f';
}

.xi-yelp:before {
  content: '\ec30';
}

.xi-youtube:before {
  content: '\ec31';
}

.xi-youtube-play:before {
  content: '\ec32';
}

/* makes the font 33% larger relative to the icon container */
.xi-x {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.xi-2x {
  font-size: 2em;
}

.xi-3x {
  font-size: 3em;
}

.xi-4x {
  font-size: 4em;
}

.xi-5x {
  font-size: 5em;
}

.xi-spin {
  -webkit-animation: xi-spin 2s infinite linear;
  animation: xi-spin 2s infinite linear;
}

@-webkit-keyframes xi-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes xi-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.xi-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.xi-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.xi-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.xi-flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
  -webkit-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.xi-flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: scale(1, -1);
  transform: scale(1, -1);
}

:root .xi-rotate-90,
:root .xi-rotate-180,
:root .xi-rotate-270,
:root .xi-flip-horizontal,
:root .xi-flip-vertical {
  -webkit-filter: none;
  filter: none;
}

.xi-fw {
  width: 1.28571em;
  text-align: center;
}

.xi-ul {
  padding-left: 0;
  margin-left: 2.14286em;
  list-style-type: none;
}

.xi-ul > li {
  position: relative;
}

.xi-li {
  position: absolute;
  left: -2.14286em;
  width: 2.14286em;
  top: 0.14286em;
  text-align: center;
}

.xi-li.xi-lg {
  left: -1.85714em;
}

.xi-border {
  padding: 0.2em 0.25em 0.15em;
  border: solid 0.08em #eee;
  border-radius: 0.1em;
}

.pull-right {
  float: right;
  margin-right: 0.3em;
}

.pull-left {
  float: left;
  margin-right: 0.3em;
}



/* ---- global/css/vendor/jquery-ui.css ---- */
/*! jQuery UI - v1.12.1 - 2021-01-22
* http://jqueryui.com
* Includes: draggable.css, core.css, resizable.css, selectable.css, sortable.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, progressbar.css, selectmenu.css, slider.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=base&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=aaaaaa&iconColorError=cc0000&fcError=5f3f3f&borderColorError=f1a899&bgTextureError=flat&bgColorError=fddfdf&iconColorHighlight=777620&fcHighlight=777620&borderColorHighlight=dad55e&bgTextureHighlight=flat&bgColorHighlight=fffa90&iconColorActive=ffffff&fcActive=ffffff&borderColorActive=003eff&bgTextureActive=flat&bgColorActive=007fff&iconColorHover=555555&fcHover=2b2b2b&borderColorHover=cccccc&bgTextureHover=flat&bgColorHover=ededed&iconColorDefault=777777&fcDefault=454545&borderColorDefault=c5c5c5&bgTextureDefault=flat&bgColorDefault=f6f6f6&iconColorContent=444444&fcContent=333333&borderColorContent=dddddd&bgTextureContent=flat&bgColorContent=ffffff&iconColorHeader=444444&fcHeader=333333&borderColorHeader=dddddd&bgTextureHeader=flat&bgColorHeader=e9e9e9&cornerRadius=3px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
* Copyright jQuery Foundation and other contributors; Licensed MIT */

.ui-draggable-handle {
  -ms-touch-action: none;
  touch-action: none;
}
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none;
}
.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: '';
  display: table;
  border-collapse: collapse;
}
.ui-helper-clearfix:after {
  clear: both;
}
.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter: Alpha(Opacity=0); /* support: IE8 */
}

.ui-front {
  z-index: 100;
}

/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
  pointer-events: none;
}

/* Icons
----------------------------------*/
.ui-icon {
  display: inline-block;
  vertical-align: middle;
  margin-top: -0.25em;
  position: relative;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
}

.ui-widget-icon-block {
  left: 50%;
  margin-left: -8px;
  display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ui-resizable {
  position: relative;
}
.ui-resizable-handle {
  position: absolute;
  font-size: 0.1px;
  display: block;
  -ms-touch-action: none;
  touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
  display: none;
}
.ui-resizable-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}
.ui-resizable-s {
  cursor: s-resize;
  height: 7px;
  width: 100%;
  bottom: -5px;
  left: 0;
}
.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
}
.ui-resizable-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}
.ui-resizable-se {
  cursor: se-resize;
  width: 12px;
  height: 12px;
  right: 1px;
  bottom: 1px;
}
.ui-resizable-sw {
  cursor: sw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  bottom: -5px;
}
.ui-resizable-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}
.ui-resizable-ne {
  cursor: ne-resize;
  width: 9px;
  height: 9px;
  right: -5px;
  top: -5px;
}
.ui-selectable {
  -ms-touch-action: none;
  touch-action: none;
}
.ui-selectable-helper {
  position: absolute;
  z-index: 100;
  border: 1px dotted black;
}
.ui-sortable-handle {
  -ms-touch-action: none;
  touch-action: none;
}
.ui-accordion .ui-accordion-header {
  display: block;
  cursor: pointer;
  position: relative;
  margin: 2px 0 0 0;
  padding: 0.5em 0.5em 0.5em 0.7em;
  font-size: 100%;
}
.ui-accordion .ui-accordion-content {
  padding: 1em 2.2em;
  border-top: 0;
  overflow: auto;
}
.ui-autocomplete {
  position: absolute;
  top: 0;
  left: 0;
  cursor: default;
}
.ui-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: block;
  outline: 0;
}
.ui-menu .ui-menu {
  position: absolute;
}
.ui-menu .ui-menu-item {
  margin: 0;
  cursor: pointer;
  /* support: IE10, see #8844 */
  list-style-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}
.ui-menu .ui-menu-item-wrapper {
  position: relative;
  padding: 3px 1em 3px 0.4em;
}
.ui-menu .ui-menu-divider {
  margin: 5px 0;
  height: 0;
  font-size: 0;
  line-height: 0;
  border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
  margin: -1px;
}

/* icon support */
.ui-menu-icons {
  position: relative;
}
.ui-menu-icons .ui-menu-item-wrapper {
  padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.2em;
  margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
  left: auto;
  right: 0;
}
.ui-button {
  padding: 0.4em 1em;
  display: inline-block;
  position: relative;
  line-height: normal;
  margin-right: 0.1em;
  cursor: pointer;
  vertical-align: middle;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* Support: IE <= 11 */
  overflow: visible;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
  text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
  width: 2em;
  box-sizing: border-box;
  text-indent: -9999px;
  white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
  text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -8px;
  margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
  padding: 0;
  width: 2.1em;
  height: 2.1em;
  text-indent: -9999px;
  white-space: nowrap;
}

input.ui-button.ui-icon-notext .ui-icon {
  width: auto;
  height: auto;
  text-indent: 0;
  white-space: normal;
  padding: 0.4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}
.ui-controlgroup {
  vertical-align: middle;
  display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
  float: left;
  margin-left: 0;
  margin-right: 0;
}
.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
  z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
  display: block;
  float: none;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
}
.ui-controlgroup-vertical .ui-controlgroup-item {
  box-sizing: border-box;
}
.ui-controlgroup .ui-controlgroup-label {
  padding: 0.4em 1em;
}
.ui-controlgroup .ui-controlgroup-label span {
  font-size: 80%;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
  border-left: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
  border-top: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
  border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
  border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {
  /* Support: IE8 only, Android < 4.4 only */
  width: 75%;
  width: calc(100% - 2.4em);
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
  border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
  box-shadow: inset 1px 1px 1px #ccc;
  border-radius: 0.12em;
  border: none;
}
.ui-checkboxradio-radio-label .ui-icon-background {
  width: 16px;
  height: 16px;
  border-radius: 1em;
  overflow: visible;
  border: none;
}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
  background-image: none;
  width: 8px;
  height: 8px;
  border-width: 4px;
  border-style: solid;
}
.ui-checkboxradio-disabled {
  pointer-events: none;
}
.ui-datepicker {
  width: 17em;
  padding: 0.2em 0.2em 0;
  display: none;
}
.ui-datepicker .ui-datepicker-header {
  position: relative;
  padding: 0.2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  position: absolute;
  top: 2px;
  width: 1.8em;
  height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
  top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
  left: 2px;
}
.ui-datepicker .ui-datepicker-next {
  right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
  left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
  right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -8px;
  top: 50%;
  margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
  margin: 0 2.3em;
  line-height: 1.8em;
  text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
  font-size: 1em;
  margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
  width: 45%;
}
.ui-datepicker table {
  width: 100%;
  font-size: 0.9em;
  border-collapse: collapse;
  margin: 0 0 0.4em;
}
.ui-datepicker th {
  padding: 0.7em 0.3em;
  text-align: center;
  font-weight: bold;
  border: 0;
}
.ui-datepicker td {
  border: 0;
  padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
  display: block;
  padding: 0.2em;
  text-align: right;
  text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
  background-image: none;
  margin: 0.7em 0 0 0;
  padding: 0 0.2em;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
  float: right;
  margin: 0.5em 0.2em 0.4em;
  cursor: pointer;
  padding: 0.2em 0.6em 0.3em 0.6em;
  width: auto;
  overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
  float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
  width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
  float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
  width: 95%;
  margin: 0 auto 0.4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
  width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
  width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
  width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
  border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
  clear: left;
}
.ui-datepicker-row-break {
  clear: both;
  width: 100%;
  font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
  direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
  right: 2px;
  left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
  left: 2px;
  right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
  right: 1px;
  left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
  left: 1px;
  right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
  clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
  float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
  float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
  border-right-width: 0;
  border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  background-repeat: no-repeat;
  left: 0.5em;
  top: 0.3em;
}
.ui-dialog {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.2em;
  outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
  padding: 0.4em 1em;
  position: relative;
}
.ui-dialog .ui-dialog-title {
  float: left;
  margin: 0.1em 0;
  white-space: nowrap;
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
  position: absolute;
  right: 0.3em;
  top: 50%;
  width: 20px;
  margin: -10px 0 0 0;
  padding: 1px;
  height: 20px;
}
.ui-dialog .ui-dialog-content {
  position: relative;
  border: 0;
  padding: 0.5em 1em;
  background: none;
  overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
  text-align: left;
  border-width: 1px 0 0 0;
  background-image: none;
  margin-top: 0.5em;
  padding: 0.3em 1em 0.5em 0.4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
  margin: 0.5em 0.4em 0.5em 0;
  cursor: pointer;
}
.ui-dialog .ui-resizable-n {
  height: 2px;
  top: 0;
}
.ui-dialog .ui-resizable-e {
  width: 2px;
  right: 0;
}
.ui-dialog .ui-resizable-s {
  height: 2px;
  bottom: 0;
}
.ui-dialog .ui-resizable-w {
  width: 2px;
  left: 0;
}
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
  width: 7px;
  height: 7px;
}
.ui-dialog .ui-resizable-se {
  right: 0;
  bottom: 0;
}
.ui-dialog .ui-resizable-sw {
  left: 0;
  bottom: 0;
}
.ui-dialog .ui-resizable-ne {
  right: 0;
  top: 0;
}
.ui-dialog .ui-resizable-nw {
  left: 0;
  top: 0;
}
.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}
.ui-progressbar {
  height: 2em;
  text-align: left;
  overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
  margin: -1px;
  height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
  background: url('data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==');
  height: 100%;
  filter: alpha(opacity=25); /* support: IE8 */
  opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
  background-image: none;
}
.ui-selectmenu-menu {
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.ui-selectmenu-menu .ui-menu {
  overflow: auto;
  overflow-x: hidden;
  padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
  font-size: 1em;
  font-weight: bold;
  line-height: 1.5;
  padding: 2px 0.4em;
  margin: 0.5em 0 0 0;
  height: auto;
  border: 0;
}
.ui-selectmenu-open {
  display: block;
}
.ui-selectmenu-text {
  display: block;
  margin-right: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
  text-align: left;
  white-space: nowrap;
  width: 14em;
}
.ui-selectmenu-icon.ui-icon {
  float: right;
  margin-top: 0;
}
.ui-slider {
  position: relative;
  text-align: left;
}
.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  -ms-touch-action: none;
  touch-action: none;
}
.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: 0.7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
}

.ui-slider-horizontal {
  height: 0.8em;
}
.ui-slider-horizontal .ui-slider-handle {
  top: -0.3em;
  margin-left: -0.6em;
}
.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: 0.8em;
  height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
  left: -0.3em;
  margin-left: 0;
  margin-bottom: -0.6em;
}
.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}
.ui-spinner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}
.ui-spinner-input {
  border: none;
  background: none;
  color: inherit;
  padding: 0.222em 0;
  margin: 0.2em 0;
  vertical-align: middle;
  margin-left: 0.4em;
  margin-right: 2em;
}
.ui-spinner-button {
  width: 1.6em;
  height: 50%;
  font-size: 0.5em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
  border-top-style: none;
  border-bottom-style: none;
  border-right-style: none;
}
.ui-spinner-up {
  top: 0;
}
.ui-spinner-down {
  bottom: 0;
}
.ui-tabs {
  position: relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
  padding: 0.2em;
}
.ui-tabs .ui-tabs-nav {
  margin: 0;
  padding: 0.2em 0.2em 0;
}
.ui-tabs .ui-tabs-nav li {
  list-style: none;
  float: left;
  position: relative;
  top: 0;
  margin: 1px 0.2em 0 0;
  border-bottom-width: 0;
  padding: 0;
  white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
  float: left;
  padding: 0.5em 1em;
  text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  margin-bottom: -1px;
  padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
  cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
  cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
  display: block;
  border-width: 0;
  padding: 1em 1.4em;
  background: none;
}
.ui-tooltip {
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  font-size: 0.8em !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  background-color: rgba(0, 0, 0, 0.9) !important;
  color: #fff !important;
  border: none !important;
}
body .ui-tooltip {
  border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}
.ui-widget .ui-widget {
  font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}
.ui-widget.ui-widget-content {
  border: 1px solid #c5c5c5;
}
.ui-widget-content {
  border: 1px solid #dddddd;
  background: #ffffff;
  color: #333333;
}
.ui-widget-content a {
  color: #333333;
}
.ui-widget-header {
  border: 1px solid #dddddd;
  background: #e9e9e9;
  color: #333333;
  font-weight: bold;
}
.ui-widget-header a {
  color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: #454545;
  text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid #cccccc;
  background: #ededed;
  font-weight: normal;
  color: #2b2b2b;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
  color: #2b2b2b;
  text-decoration: none;
}

.ui-visual-focus {
  box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #003eff;
  background: #007fff;
  font-weight: normal;
  color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #ffffff;
  text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #dad55e;
  background: #fffa90;
  color: #777620;
}
.ui-state-checked {
  border: 1px solid #dad55e;
  background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #f1a899;
  background: #fddfdf;
  color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: 0.7;
  filter: Alpha(Opacity=70); /* support: IE8 */
  font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: 0.35;
  filter: Alpha(Opacity=35); /* support: IE8 */
  background-image: none;
}
.ui-state-disabled .ui-icon {
  filter: Alpha(Opacity=35); /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
  width: 16px;
  height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
  background-image: url('/youthCenter/ui-icons_444444_256x240.png');
}
.ui-widget-header .ui-icon {
  background-image: url('/youthCenter/ui-icons_444444_256x240.png');
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
  background-image: url('/youthCenter/ui-icons_555555_256x240.png');
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
  background-image: url('/youthCenter/ui-icons_ffffff_256x240.png');
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
  background-image: url('/youthCenter/ui-icons_777620_256x240.png');
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
  background-image: url('/youthCenter/ui-icons_cc0000_256x240.png');
}
.ui-button .ui-icon {
  background-image: url('/youthCenter/ui-icons_777777_256x240.png');
}

/* positioning */
.ui-icon-blank {
  background-position: 16px 16px;
}
.ui-icon-caret-1-n {
  background-position: 0 0;
}
.ui-icon-caret-1-ne {
  background-position: -16px 0;
}
.ui-icon-caret-1-e {
  background-position: -32px 0;
}
.ui-icon-caret-1-se {
  background-position: -48px 0;
}
.ui-icon-caret-1-s {
  background-position: -65px 0;
}
.ui-icon-caret-1-sw {
  background-position: -80px 0;
}
.ui-icon-caret-1-w {
  background-position: -96px 0;
}
.ui-icon-caret-1-nw {
  background-position: -112px 0;
}
.ui-icon-caret-2-n-s {
  background-position: -128px 0;
}
.ui-icon-caret-2-e-w {
  background-position: -144px 0;
}
.ui-icon-triangle-1-n {
  background-position: 0 -16px;
}
.ui-icon-triangle-1-ne {
  background-position: -16px -16px;
}
.ui-icon-triangle-1-e {
  background-position: -32px -16px;
}
.ui-icon-triangle-1-se {
  background-position: -48px -16px;
}
.ui-icon-triangle-1-s {
  background-position: -65px -16px;
}
.ui-icon-triangle-1-sw {
  background-position: -80px -16px;
}
.ui-icon-triangle-1-w {
  background-position: -96px -16px;
}
.ui-icon-triangle-1-nw {
  background-position: -112px -16px;
}
.ui-icon-triangle-2-n-s {
  background-position: -128px -16px;
}
.ui-icon-triangle-2-e-w {
  background-position: -144px -16px;
}
.ui-icon-arrow-1-n {
  background-position: 0 -32px;
}
.ui-icon-arrow-1-ne {
  background-position: -16px -32px;
}
.ui-icon-arrow-1-e {
  background-position: -32px -32px;
}
.ui-icon-arrow-1-se {
  background-position: -48px -32px;
}
.ui-icon-arrow-1-s {
  background-position: -65px -32px;
}
.ui-icon-arrow-1-sw {
  background-position: -80px -32px;
}
.ui-icon-arrow-1-w {
  background-position: -96px -32px;
}
.ui-icon-arrow-1-nw {
  background-position: -112px -32px;
}
.ui-icon-arrow-2-n-s {
  background-position: -128px -32px;
}
.ui-icon-arrow-2-ne-sw {
  background-position: -144px -32px;
}
.ui-icon-arrow-2-e-w {
  background-position: -160px -32px;
}
.ui-icon-arrow-2-se-nw {
  background-position: -176px -32px;
}
.ui-icon-arrowstop-1-n {
  background-position: -192px -32px;
}
.ui-icon-arrowstop-1-e {
  background-position: -208px -32px;
}
.ui-icon-arrowstop-1-s {
  background-position: -224px -32px;
}
.ui-icon-arrowstop-1-w {
  background-position: -240px -32px;
}
.ui-icon-arrowthick-1-n {
  background-position: 1px -48px;
}
.ui-icon-arrowthick-1-ne {
  background-position: -16px -48px;
}
.ui-icon-arrowthick-1-e {
  background-position: -32px -48px;
}
.ui-icon-arrowthick-1-se {
  background-position: -48px -48px;
}
.ui-icon-arrowthick-1-s {
  background-position: -64px -48px;
}
.ui-icon-arrowthick-1-sw {
  background-position: -80px -48px;
}
.ui-icon-arrowthick-1-w {
  background-position: -96px -48px;
}
.ui-icon-arrowthick-1-nw {
  background-position: -112px -48px;
}
.ui-icon-arrowthick-2-n-s {
  background-position: -128px -48px;
}
.ui-icon-arrowthick-2-ne-sw {
  background-position: -144px -48px;
}
.ui-icon-arrowthick-2-e-w {
  background-position: -160px -48px;
}
.ui-icon-arrowthick-2-se-nw {
  background-position: -176px -48px;
}
.ui-icon-arrowthickstop-1-n {
  background-position: -192px -48px;
}
.ui-icon-arrowthickstop-1-e {
  background-position: -208px -48px;
}
.ui-icon-arrowthickstop-1-s {
  background-position: -224px -48px;
}
.ui-icon-arrowthickstop-1-w {
  background-position: -240px -48px;
}
.ui-icon-arrowreturnthick-1-w {
  background-position: 0 -64px;
}
.ui-icon-arrowreturnthick-1-n {
  background-position: -16px -64px;
}
.ui-icon-arrowreturnthick-1-e {
  background-position: -32px -64px;
}
.ui-icon-arrowreturnthick-1-s {
  background-position: -48px -64px;
}
.ui-icon-arrowreturn-1-w {
  background-position: -64px -64px;
}
.ui-icon-arrowreturn-1-n {
  background-position: -80px -64px;
}
.ui-icon-arrowreturn-1-e {
  background-position: -96px -64px;
}
.ui-icon-arrowreturn-1-s {
  background-position: -112px -64px;
}
.ui-icon-arrowrefresh-1-w {
  background-position: -128px -64px;
}
.ui-icon-arrowrefresh-1-n {
  background-position: -144px -64px;
}
.ui-icon-arrowrefresh-1-e {
  background-position: -160px -64px;
}
.ui-icon-arrowrefresh-1-s {
  background-position: -176px -64px;
}
.ui-icon-arrow-4 {
  background-position: 0 -80px;
}
.ui-icon-arrow-4-diag {
  background-position: -16px -80px;
}
.ui-icon-extlink {
  background-position: -32px -80px;
}
.ui-icon-newwin {
  background-position: -48px -80px;
}
.ui-icon-refresh {
  background-position: -64px -80px;
}
.ui-icon-shuffle {
  background-position: -80px -80px;
}
.ui-icon-transfer-e-w {
  background-position: -96px -80px;
}
.ui-icon-transferthick-e-w {
  background-position: -112px -80px;
}
.ui-icon-folder-collapsed {
  background-position: 0 -96px;
}
.ui-icon-folder-open {
  background-position: -16px -96px;
}
.ui-icon-document {
  background-position: -32px -96px;
}
.ui-icon-document-b {
  background-position: -48px -96px;
}
.ui-icon-note {
  background-position: -64px -96px;
}
.ui-icon-mail-closed {
  background-position: -80px -96px;
}
.ui-icon-mail-open {
  background-position: -96px -96px;
}
.ui-icon-suitcase {
  background-position: -112px -96px;
}
.ui-icon-comment {
  background-position: -128px -96px;
}
.ui-icon-person {
  background-position: -144px -96px;
}
.ui-icon-print {
  background-position: -160px -96px;
}
.ui-icon-trash {
  background-position: -176px -96px;
}
.ui-icon-locked {
  background-position: -192px -96px;
}
.ui-icon-unlocked {
  background-position: -208px -96px;
}
.ui-icon-bookmark {
  background-position: -224px -96px;
}
.ui-icon-tag {
  background-position: -240px -96px;
}
.ui-icon-home {
  background-position: 0 -112px;
}
.ui-icon-flag {
  background-position: -16px -112px;
}
.ui-icon-calendar {
  background-position: -32px -112px;
}
.ui-icon-cart {
  background-position: -48px -112px;
}
.ui-icon-pencil {
  background-position: -64px -112px;
}
.ui-icon-clock {
  background-position: -80px -112px;
}
.ui-icon-disk {
  background-position: -96px -112px;
}
.ui-icon-calculator {
  background-position: -112px -112px;
}
.ui-icon-zoomin {
  background-position: -128px -112px;
}
.ui-icon-zoomout {
  background-position: -144px -112px;
}
.ui-icon-search {
  background-position: -160px -112px;
}
.ui-icon-wrench {
  background-position: -176px -112px;
}
.ui-icon-gear {
  background-position: -192px -112px;
}
.ui-icon-heart {
  background-position: -208px -112px;
}
.ui-icon-star {
  background-position: -224px -112px;
}
.ui-icon-link {
  background-position: -240px -112px;
}
.ui-icon-cancel {
  background-position: 0 -128px;
}
.ui-icon-plus {
  background-position: -16px -128px;
}
.ui-icon-plusthick {
  background-position: -32px -128px;
}
.ui-icon-minus {
  background-position: -48px -128px;
}
.ui-icon-minusthick {
  background-position: -64px -128px;
}
.ui-icon-close {
  background-position: -80px -128px;
}
.ui-icon-closethick {
  background-position: -96px -128px;
}
.ui-icon-key {
  background-position: -112px -128px;
}
.ui-icon-lightbulb {
  background-position: -128px -128px;
}
.ui-icon-scissors {
  background-position: -144px -128px;
}
.ui-icon-clipboard {
  background-position: -160px -128px;
}
.ui-icon-copy {
  background-position: -176px -128px;
}
.ui-icon-contact {
  background-position: -192px -128px;
}
.ui-icon-image {
  background-position: -208px -128px;
}
.ui-icon-video {
  background-position: -224px -128px;
}
.ui-icon-script {
  background-position: -240px -128px;
}
.ui-icon-alert {
  background-position: 0 -144px;
}
.ui-icon-info {
  background-position: -16px -144px;
}
.ui-icon-notice {
  background-position: -32px -144px;
}
.ui-icon-help {
  background-position: -48px -144px;
}
.ui-icon-check {
  background-position: -64px -144px;
}
.ui-icon-bullet {
  background-position: -80px -144px;
}
.ui-icon-radio-on {
  background-position: -96px -144px;
}
.ui-icon-radio-off {
  background-position: -112px -144px;
}
.ui-icon-pin-w {
  background-position: -128px -144px;
}
.ui-icon-pin-s {
  background-position: -144px -144px;
}
.ui-icon-play {
  background-position: 0 -160px;
}
.ui-icon-pause {
  background-position: -16px -160px;
}
.ui-icon-seek-next {
  background-position: -32px -160px;
}
.ui-icon-seek-prev {
  background-position: -48px -160px;
}
.ui-icon-seek-end {
  background-position: -64px -160px;
}
.ui-icon-seek-start {
  background-position: -80px -160px;
}
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first {
  background-position: -80px -160px;
}
.ui-icon-stop {
  background-position: -96px -160px;
}
.ui-icon-eject {
  background-position: -112px -160px;
}
.ui-icon-volume-off {
  background-position: -128px -160px;
}
.ui-icon-volume-on {
  background-position: -144px -160px;
}
.ui-icon-power {
  background-position: 0 -176px;
}
.ui-icon-signal-diag {
  background-position: -16px -176px;
}
.ui-icon-signal {
  background-position: -32px -176px;
}
.ui-icon-battery-0 {
  background-position: -48px -176px;
}
.ui-icon-battery-1 {
  background-position: -64px -176px;
}
.ui-icon-battery-2 {
  background-position: -80px -176px;
}
.ui-icon-battery-3 {
  background-position: -96px -176px;
}
.ui-icon-circle-plus {
  background-position: 0 -192px;
}
.ui-icon-circle-minus {
  background-position: -16px -192px;
}
.ui-icon-circle-close {
  background-position: -32px -192px;
}
.ui-icon-circle-triangle-e {
  background-position: -48px -192px;
}
.ui-icon-circle-triangle-s {
  background-position: -64px -192px;
}
.ui-icon-circle-triangle-w {
  background-position: -80px -192px;
}
.ui-icon-circle-triangle-n {
  background-position: -96px -192px;
}
.ui-icon-circle-arrow-e {
  background-position: -112px -192px;
}
.ui-icon-circle-arrow-s {
  background-position: -128px -192px;
}
.ui-icon-circle-arrow-w {
  background-position: -144px -192px;
}
.ui-icon-circle-arrow-n {
  background-position: -160px -192px;
}
.ui-icon-circle-zoomin {
  background-position: -176px -192px;
}
.ui-icon-circle-zoomout {
  background-position: -192px -192px;
}
.ui-icon-circle-check {
  background-position: -208px -192px;
}
.ui-icon-circlesmall-plus {
  background-position: 0 -208px;
}
.ui-icon-circlesmall-minus {
  background-position: -16px -208px;
}
.ui-icon-circlesmall-close {
  background-position: -32px -208px;
}
.ui-icon-squaresmall-plus {
  background-position: -48px -208px;
}
.ui-icon-squaresmall-minus {
  background-position: -64px -208px;
}
.ui-icon-squaresmall-close {
  background-position: -80px -208px;
}
.ui-icon-grip-dotted-vertical {
  background-position: 0 -224px;
}
.ui-icon-grip-dotted-horizontal {
  background-position: -16px -224px;
}
.ui-icon-grip-solid-vertical {
  background-position: -32px -224px;
}
.ui-icon-grip-solid-horizontal {
  background-position: -48px -224px;
}
.ui-icon-gripsmall-diagonal-se {
  background-position: -64px -224px;
}
.ui-icon-grip-diagonal-se {
  background-position: -80px -224px;
}

/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
  border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
  border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
  border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
  border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
  background: #aaaaaa;
  opacity: 0.3;
  filter: Alpha(Opacity=30); /* support: IE8 */
}
.ui-widget-shadow {
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}



/* ---- global/css/vendor/swiper-bundle.css ---- */
/**
 * Swiper 6.3.2
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://swiperjs.com
 *
 * Copyright 2014-2020 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: September 28, 2020
 */

@font-face {
  font-family: 'swiper-icons';
  src: url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA')
    format('woff');
  font-weight: 400;
  font-style: normal;
}
:root {
  --swiper-theme-color: #007aff;
}
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
/* 3D Effects */
.swiper-container-3d {
  perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
  transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
  overflow: auto;
  scrollbar-width: none;
  /* For Firefox */
  -ms-overflow-style: none;
  /* For Internet Explorer and Edge */
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
  display: none;
}
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
  scroll-snap-align: start start;
}
.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: x mandatory;
}
.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
  scroll-snap-type: y mandatory;
}
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  width: calc(var(--swiper-navigation-size) / 44 * 27);
  height: var(--swiper-navigation-size);
  margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity: 0.35;
  cursor: auto;
  pointer-events: none;
}
.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  left: 10px;
  right: auto;
}
.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: 'prev';
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  right: 10px;
  left: auto;
}
.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: 'next';
}
.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
  --swiper-navigation-color: #ffffff;
}
.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
  --swiper-navigation-color: #000000;
}
.swiper-button-lock {
  display: none;
}
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
  opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transform: scale(0.33);
  position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
  transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
  transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
  transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
  transform: scale(0.33);
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 100%;
  background: #000;
  opacity: 0.2;
}
button.swiper-pagination-bullet {
  border: none;
  margin: 0;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
  cursor: pointer;
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--main-color);
}
.swiper-container-vertical > .swiper-pagination-bullets {
  right: 10px;
  top: 50%;
  transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 6px 0;
  display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  display: inline-block;
  transition: 200ms transform, 200ms top;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 3px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms left;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}
/* Progress */
.swiper-pagination-progressbar {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 100%;
  height: 4px;
  left: 0;
  top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
  width: 4px;
  height: 100%;
  left: 0;
  top: 0;
}
.swiper-pagination-white {
  --swiper-pagination-color: #ffffff;
}
.swiper-pagination-black {
  --swiper-pagination-color: #000000;
}
.swiper-pagination-lock {
  display: none;
}
/* Scrollbar */
.swiper-scrollbar {
  border-radius: 10px;
  position: relative;
  -ms-touch-action: none;
  background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
  position: absolute;
  left: 1%;
  bottom: 3px;
  z-index: 50;
  height: 5px;
  width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
  position: absolute;
  right: 3px;
  top: 1%;
  z-index: 50;
  width: 5px;
  height: 98%;
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.swiper-slide-zoomed {
  cursor: move;
}
/* Preloader */
:root {
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  */
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  animation: swiper-preloader-spin 1s infinite linear;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}
/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube {
  overflow: visible;
}
.swiper-container-cube .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
  visibility: hidden;
  transform-origin: 0 0;
  width: 100%;
  height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
  transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
  pointer-events: auto;
  visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: blur(50px);
  z-index: 0;
}
.swiper-container-flip {
  overflow: visible;
}
.swiper-container-flip .swiper-slide {
  pointer-events: none;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
  z-index: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
/* moved to vendor */



/* ---- global/css/vendor/fullcalendar.css ---- */
/* classes attached to <body> */
/* TODO: make fc-event selector work when calender in shadow DOM */
.fc-not-allowed,
.fc-not-allowed .fc-event {
  /* override events' custom cursors */
  cursor: not-allowed;
}

/* TODO: not attached to body. attached to specific els. move */
.fc-unselectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.fc {
  /* layout of immediate children */
  display: flex;
  flex-direction: column;

  font-size: 1em;
}
.fc,
.fc *,
.fc *:before,
.fc *:after {
  box-sizing: border-box;
}
.fc table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1em; /* normalize cross-browser */
}
.fc th {
  text-align: center;
}
.fc th,
.fc td {
  vertical-align: top;
  padding: 0;
}
.fc a[data-navlink] {
  cursor: pointer;
}
.fc a[data-navlink]:hover {
  text-decoration: underline;
}
.fc-direction-ltr {
  direction: ltr;
  text-align: left;
}
.fc-direction-rtl {
  direction: rtl;
  text-align: right;
}
.fc-theme-standard td,
.fc-theme-standard th {
  border: 1px solid #ddd;
  border: 1px solid var(--fc-border-color, #ddd);
}
/* for FF, which doesn't expand a 100% div within a table cell. use absolute positioning */
/* inner-wrappers are responsible for being absolute */
/* TODO: best place for this? */
.fc-liquid-hack td,
.fc-liquid-hack th {
  position: relative;
}

@font-face {
  font-family: 'fcicons';
  src: url('data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBfAAAAC8AAAAYGNtYXAXVtKNAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZgYydxIAAAF4AAAFNGhlYWQUJ7cIAAAGrAAAADZoaGVhB20DzAAABuQAAAAkaG10eCIABhQAAAcIAAAALGxvY2ED4AU6AAAHNAAAABhtYXhwAA8AjAAAB0wAAAAgbmFtZXsr690AAAdsAAABhnBvc3QAAwAAAAAI9AAAACAAAwPAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpBgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qb//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAWIAjQKeAskAEwAAJSc3NjQnJiIHAQYUFwEWMjc2NCcCnuLiDQ0MJAz/AA0NAQAMJAwNDcni4gwjDQwM/wANIwz/AA0NDCMNAAAAAQFiAI0CngLJABMAACUBNjQnASYiBwYUHwEHBhQXFjI3AZ4BAA0N/wAMJAwNDeLiDQ0MJAyNAQAMIw0BAAwMDSMM4uINIwwNDQAAAAIA4gC3Ax4CngATACcAACUnNzY0JyYiDwEGFB8BFjI3NjQnISc3NjQnJiIPAQYUHwEWMjc2NCcB87e3DQ0MIw3VDQ3VDSMMDQ0BK7e3DQ0MJAzVDQ3VDCQMDQ3zuLcMJAwNDdUNIwzWDAwNIwy4twwkDA0N1Q0jDNYMDA0jDAAAAgDiALcDHgKeABMAJwAAJTc2NC8BJiIHBhQfAQcGFBcWMjchNzY0LwEmIgcGFB8BBwYUFxYyNwJJ1Q0N1Q0jDA0Nt7cNDQwjDf7V1Q0N1QwkDA0Nt7cNDQwkDLfWDCMN1Q0NDCQMt7gMIw0MDNYMIw3VDQ0MJAy3uAwjDQwMAAADAFUAAAOrA1UAMwBoAHcAABMiBgcOAQcOAQcOARURFBYXHgEXHgEXHgEzITI2Nz4BNz4BNz4BNRE0JicuAScuAScuASMFITIWFx4BFx4BFx4BFREUBgcOAQcOAQcOASMhIiYnLgEnLgEnLgE1ETQ2Nz4BNz4BNz4BMxMhMjY1NCYjISIGFRQWM9UNGAwLFQkJDgUFBQUFBQ4JCRULDBgNAlYNGAwLFQkJDgUFBQUFBQ4JCRULDBgN/aoCVgQIBAQHAwMFAQIBAQIBBQMDBwQECAT9qgQIBAQHAwMFAQIBAQIBBQMDBwQECASAAVYRGRkR/qoRGRkRA1UFBAUOCQkVDAsZDf2rDRkLDBUJCA4FBQUFBQUOCQgVDAsZDQJVDRkLDBUJCQ4FBAVVAgECBQMCBwQECAX9qwQJAwQHAwMFAQICAgIBBQMDBwQDCQQCVQUIBAQHAgMFAgEC/oAZEhEZGRESGQAAAAADAFUAAAOrA1UAMwBoAIkAABMiBgcOAQcOAQcOARURFBYXHgEXHgEXHgEzITI2Nz4BNz4BNz4BNRE0JicuAScuAScuASMFITIWFx4BFx4BFx4BFREUBgcOAQcOAQcOASMhIiYnLgEnLgEnLgE1ETQ2Nz4BNz4BNz4BMxMzFRQWMzI2PQEzMjY1NCYrATU0JiMiBh0BIyIGFRQWM9UNGAwLFQkJDgUFBQUFBQ4JCRULDBgNAlYNGAwLFQkJDgUFBQUFBQ4JCRULDBgN/aoCVgQIBAQHAwMFAQIBAQIBBQMDBwQECAT9qgQIBAQHAwMFAQIBAQIBBQMDBwQECASAgBkSEhmAERkZEYAZEhIZgBEZGREDVQUEBQ4JCRUMCxkN/asNGQsMFQkIDgUFBQUFBQ4JCBUMCxkNAlUNGQsMFQkJDgUEBVUCAQIFAwIHBAQIBf2rBAkDBAcDAwUBAgICAgEFAwMHBAMJBAJVBQgEBAcCAwUCAQL+gIASGRkSgBkSERmAEhkZEoAZERIZAAABAOIAjQMeAskAIAAAExcHBhQXFjI/ARcWMjc2NC8BNzY0JyYiDwEnJiIHBhQX4uLiDQ0MJAzi4gwkDA0N4uINDQwkDOLiDCQMDQ0CjeLiDSMMDQ3h4Q0NDCMN4uIMIw0MDOLiDAwNIwwAAAABAAAAAQAAa5n0y18PPPUACwQAAAAAANivOVsAAAAA2K85WwAAAAADqwNVAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAOrAAEAAAAAAAAAAAAAAAAAAAALBAAAAAAAAAAAAAAAAgAAAAQAAWIEAAFiBAAA4gQAAOIEAABVBAAAVQQAAOIAAAAAAAoAFAAeAEQAagCqAOoBngJkApoAAQAAAAsAigADAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGZjaWNvbnMAZgBjAGkAYwBvAG4Ac1ZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGZjaWNvbnMAZgBjAGkAYwBvAG4Ac2ZjaWNvbnMAZgBjAGkAYwBvAG4Ac1JlZ3VsYXIAUgBlAGcAdQBsAGEAcmZjaWNvbnMAZgBjAGkAYwBvAG4Ac0ZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=')
    format('truetype');
  font-weight: normal;
  font-style: normal;
}

.fc-icon {
  /* added for fc */
  display: inline-block;
  width: 1em;
  height: 1em;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'fcicons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fc-icon-chevron-left:before {
  content: '\e900';
}

.fc-icon-chevron-right:before {
  content: '\e901';
}

.fc-icon-chevrons-left:before {
  content: '\e902';
}

.fc-icon-chevrons-right:before {
  content: '\e903';
}

.fc-icon-minus-square:before {
  content: '\e904';
}

.fc-icon-plus-square:before {
  content: '\e905';
}

.fc-icon-x:before {
  content: '\e906';
}
/*
Lots taken from Flatly (MIT): https://bootswatch.com/4/flatly/bootstrap.css

These styles only apply when the standard-theme is activated.
When it's NOT activated, the fc-button classes won't even be in the DOM.
*/
.fc {
  /* reset */
}
.fc .fc-button {
  border-radius: 0;
  overflow: visible;
  text-transform: none;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.fc .fc-button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}
.fc .fc-button {
  -webkit-appearance: button;
}
.fc .fc-button:not(:disabled) {
  cursor: pointer;
}
.fc .fc-button::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
.fc {
  /* theme */
}
.fc .fc-button {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.4em 0.65em;
  font-size: 1em;
  line-height: 1.5;
  border-radius: 0.25em;
}
.fc .fc-button:hover {
  text-decoration: none;
}
.fc .fc-button:focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(44, 62, 80, 0.25);
}
.fc .fc-button:disabled {
  opacity: 0.65;
}
.fc {
  /* "primary" coloring */
}
.fc .fc-button-primary {
  color: #fff;
  color: var(--fc-button-text-color, #fff);
  background-color: #2c3e50;
  background-color: var(--fc-button-bg-color, #2c3e50);
  border-color: #2c3e50;
  border-color: var(--fc-button-border-color, #2c3e50);
}
.fc .fc-button-primary:hover {
  color: #fff;
  color: var(--fc-button-text-color, #fff);
  background-color: #1e2b37;
  background-color: var(--fc-button-hover-bg-color, #1e2b37);
  border-color: #1a252f;
  border-color: var(--fc-button-hover-border-color, #1a252f);
}
.fc .fc-button-primary:disabled {
  /* not DRY */
  color: #fff;
  color: var(--fc-button-text-color, #fff);
  background-color: #2c3e50;
  background-color: var(--fc-button-bg-color, #2c3e50);
  border-color: #2c3e50;
  border-color: var(--fc-button-border-color, #2c3e50); /* overrides :hover */
}
.fc .fc-button-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
}
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  color: #fff;
  color: var(--fc-button-text-color, #fff);
  background-color: #1a252f;
  background-color: var(--fc-button-active-bg-color, #1a252f);
  border-color: #151e27;
  border-color: var(--fc-button-active-border-color, #151e27);
}
.fc .fc-button-primary:not(:disabled):active:focus,
.fc .fc-button-primary:not(:disabled).fc-button-active:focus {
  box-shadow: 0 0 0 0.2rem rgba(76, 91, 106, 0.5);
}
.fc {
  /* icons within buttons */
}
.fc .fc-button .fc-icon {
  vertical-align: middle;
  font-size: 1.5em; /* bump up the size (but don't make it bigger than line-height of button, which is 1.5em also) */
}
.fc .fc-button-group {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.fc .fc-button-group > .fc-button {
  position: relative;
  flex: 1 1 auto;
}
.fc .fc-button-group > .fc-button:hover {
  z-index: 1;
}
.fc .fc-button-group > .fc-button:focus,
.fc .fc-button-group > .fc-button:active,
.fc .fc-button-group > .fc-button.fc-button-active {
  z-index: 1;
}
.fc-direction-ltr .fc-button-group > .fc-button:not(:first-child) {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.fc-direction-ltr .fc-button-group > .fc-button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.fc-direction-rtl .fc-button-group > .fc-button:not(:first-child) {
  margin-right: -1px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.fc-direction-rtl .fc-button-group > .fc-button:not(:last-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.fc .fc-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fc .fc-toolbar.fc-header-toolbar {
  margin-bottom: 1.5em;
}
.fc .fc-toolbar.fc-footer-toolbar {
  margin-top: 1.5em;
}
.fc .fc-toolbar-title {
  font-size: 1.75em;
  margin: 0 0.5em;
  vertical-align: middle;
  display: inline-block;
}
.fc-direction-ltr .fc-toolbar > * > :not(:first-child) {
  margin-left: 0.75em; /* space between */
}
.fc-direction-rtl .fc-toolbar > * > :not(:first-child) {
  margin-right: 0.75em; /* space between */
}
.fc-direction-rtl .fc-toolbar-ltr {
  /* when the toolbar-chunk positioning system is explicitly left-to-right */
  flex-direction: row-reverse;
}
.fc .fc-scroller {
  -webkit-overflow-scrolling: touch;
  position: relative; /* for abs-positioned elements within */
}
.fc .fc-scroller-liquid {
  height: 100%;
}
.fc .fc-scroller-liquid-absolute {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.fc .fc-scroller-harness {
  position: relative;
  overflow: hidden;
  direction: ltr;
  /* hack for chrome computing the scroller's right/left wrong for rtl. undone below... */
  /* TODO: demonstrate in codepen */
}
.fc .fc-scroller-harness-liquid {
  height: 100%;
}
.fc-direction-rtl .fc-scroller-harness > .fc-scroller {
  /* undo above hack */
  direction: rtl;
}
.fc-theme-standard .fc-scrollgrid {
  border: 1px solid #ddd;
  border: 1px solid var(--fc-border-color, #ddd); /* bootstrap does this. match */
}
.fc .fc-scrollgrid,
.fc .fc-scrollgrid table {
  /* all tables (self included) */
  width: 100%; /* because tables don't normally do this */
  table-layout: fixed;
}
.fc .fc-scrollgrid table {
  /* inner tables */
  border-top-style: hidden;
  border-left-style: hidden;
  border-right-style: hidden;
}
.fc .fc-scrollgrid {
  border-collapse: separate;
  border-right-width: 0;
  border-bottom-width: 0;
}
.fc .fc-scrollgrid-liquid {
  height: 100%;
}
.fc .fc-scrollgrid-section {
  /* a <tr> */
  height: 1px; /* better than 0, for firefox */
}
.fc .fc-scrollgrid-section > td {
  height: 1px; /* needs a height so inner div within grow. better than 0, for firefox */
}
.fc .fc-scrollgrid-section table {
  height: 1px;
  /* for most browsers, if a height isn't set on the table, can't do liquid-height within cells */
  /* serves as a min-height. harmless */
}
.fc .fc-scrollgrid-section-liquid > td {
  height: 100%; /* better than `auto`, for firefox */
}
.fc .fc-scrollgrid-section > * {
  border-top-width: 0;
  border-left-width: 0;
}
.fc .fc-scrollgrid-section-header > *,
.fc .fc-scrollgrid-section-footer > * {
  border-bottom-width: 0;
}
.fc .fc-scrollgrid-section-body table,
.fc .fc-scrollgrid-section-footer table {
  border-bottom-style: hidden; /* head keeps its bottom border tho */
}
.fc {
  /* stickiness */
}
.fc .fc-scrollgrid-section-sticky > * {
  background: #fff;
  background: var(--fc-page-bg-color, #fff);
  position: sticky;
  z-index: 3; /* TODO: var */
  /* TODO: box-shadow when sticking */
}
.fc .fc-scrollgrid-section-header.fc-scrollgrid-section-sticky > * {
  top: 0; /* because border-sharing causes a gap at the top */
  /* TODO: give safari -1. has bug */
}
.fc .fc-scrollgrid-section-footer.fc-scrollgrid-section-sticky > * {
  bottom: 0; /* known bug: bottom-stickiness doesn't work in safari */
}
.fc .fc-scrollgrid-sticky-shim {
  /* for horizontal scrollbar */
  height: 1px; /* needs height to create scrollbars */
  margin-bottom: -1px;
}
.fc-sticky {
  /* no .fc wrap because used as child of body */
  position: sticky;
}
.fc .fc-view-harness {
  flex-grow: 1; /* because this harness is WITHIN the .fc's flexbox */
  position: relative;
}
.fc {
  /* when the harness controls the height, make the view liquid */
}
.fc .fc-view-harness-active > .fc-view {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.fc .fc-col-header-cell-cushion {
  display: inline-block; /* x-browser for when sticky (when multi-tier header) */
  padding: 2px 4px;
}
.fc .fc-bg-event,
.fc .fc-non-business,
.fc .fc-highlight {
  /* will always have a harness with position:relative/absolute, so absolutely expand */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.fc .fc-non-business {
  background: rgba(215, 215, 215, 0.3);
  background: var(--fc-non-business-color, rgba(215, 215, 215, 0.3));
}
.fc .fc-bg-event {
  background: rgb(143, 223, 130);
  background: var(--fc-bg-event-color, rgb(143, 223, 130));
  opacity: 0.3;
  opacity: var(--fc-bg-event-opacity, 0.3);
}
.fc .fc-bg-event .fc-event-title {
  margin: 0.5em;
  font-size: 0.85em;
  font-size: var(--fc-small-font-size, 0.85em);
  font-style: italic;
}
.fc .fc-highlight {
  background: rgba(188, 232, 241, 0.3);
  background: var(--fc-highlight-color, rgba(188, 232, 241, 0.3));
}
.fc .fc-cell-shaded,
.fc .fc-day-disabled {
  background: rgba(208, 208, 208, 0.3);
  background: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
}
/* link resets */
/* ---------------------------------------------------------------------------------------------------- */
a.fc-event,
a.fc-event:hover {
  text-decoration: none;
}
/* cursor */
.fc-event[href],
.fc-event.fc-event-draggable {
  cursor: pointer;
}
/* event text content */
/* ---------------------------------------------------------------------------------------------------- */
.fc-event .fc-event-main {
  position: relative;
  z-index: 2;
}
/* dragging */
/* ---------------------------------------------------------------------------------------------------- */
.fc-event-dragging:not(.fc-event-selected) {
  /* MOUSE */
  opacity: 0.75;
}
.fc-event-dragging.fc-event-selected {
  /* TOUCH */
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.3);
}
/* resizing */
/* ---------------------------------------------------------------------------------------------------- */
/* (subclasses should hone positioning for touch and non-touch) */
.fc-event .fc-event-resizer {
  display: none;
  position: absolute;
  z-index: 4;
}
.fc-event:hover, /* MOUSE */
.fc-event-selected {
  /* TOUCH */
}
.fc-event:hover .fc-event-resizer,
.fc-event-selected .fc-event-resizer {
  display: block;
}
.fc-event-selected .fc-event-resizer {
  border-radius: 4px;
  border-radius: calc(var(--fc-event-resizer-dot-total-width, 8px) / 2);
  border-width: 1px;
  border-width: var(--fc-event-resizer-dot-border-width, 1px);
  width: 8px;
  width: var(--fc-event-resizer-dot-total-width, 8px);
  height: 8px;
  height: var(--fc-event-resizer-dot-total-width, 8px);
  border-style: solid;
  border-color: inherit;
  background: #fff;
  background: var(--fc-page-bg-color, #fff);

  /* expand hit area */
}
.fc-event-selected .fc-event-resizer:before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
}
/* selecting (always TOUCH) */
/* OR, focused by tab-index */
/* (TODO: maybe not the best focus-styling for .fc-daygrid-dot-event) */
/* ---------------------------------------------------------------------------------------------------- */
.fc-event-selected,
.fc-event:focus {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

  /* expand hit area (subclasses should expand) */
}
.fc-event-selected:before,
.fc-event:focus:before {
  content: '';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.fc-event-selected,
.fc-event:focus {
  /* dimmer effect */
}
.fc-event-selected:after,
.fc-event:focus:after {
  content: '';
  background: rgba(0, 0, 0, 0.25);
  background: var(--fc-event-selected-overlay-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  z-index: 1;

  /* assume there's a border on all sides. overcome it. */
  /* sometimes there's NOT a border, in which case the dimmer will go over */
  /* an adjacent border, which looks fine. */
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
}
/*
A HORIZONTAL event
*/
.fc-h-event {
  /* allowed to be top-level */
  display: block;
  border: 1px solid #3788d8;
  border: 1px solid var(--fc-event-border-color, #3788d8);
  background-color: #3788d8;
  background-color: var(--fc-event-bg-color, #3788d8);
}
.fc-h-event .fc-event-main {
  color: #fff;
  color: var(--fc-event-text-color, #fff);
}
.fc-h-event .fc-event-main-frame {
  display: flex; /* for make fc-event-title-container expand */
}
.fc-h-event .fc-event-time {
  max-width: 100%; /* clip overflow on this element */
  overflow: hidden;
}
.fc-h-event .fc-event-title-container {
  /* serves as a container for the sticky cushion */
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0; /* important for allowing to shrink all the way */
}
.fc-h-event .fc-event-title {
  display: inline-block; /* need this to be sticky cross-browser */
  vertical-align: top; /* for not messing up line-height */
  left: 0; /* for sticky */
  right: 0; /* for sticky */
  max-width: 100%; /* clip overflow on this element */
  overflow: hidden;
}
.fc-h-event.fc-event-selected:before {
  /* expand hit area */
  top: -10px;
  bottom: -10px;
}
/* adjust border and border-radius (if there is any) for non-start/end */
.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-start),
.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-end) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-width: 0;
}
.fc-direction-ltr .fc-daygrid-block-event:not(.fc-event-end),
.fc-direction-rtl .fc-daygrid-block-event:not(.fc-event-start) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}
/* resizers */
.fc-h-event:not(.fc-event-selected) .fc-event-resizer {
  top: 0;
  bottom: 0;
  width: 8px;
  width: var(--fc-event-resizer-thickness, 8px);
}
.fc-direction-ltr .fc-h-event:not(.fc-event-selected) .fc-event-resizer-start,
.fc-direction-rtl .fc-h-event:not(.fc-event-selected) .fc-event-resizer-end {
  cursor: w-resize;
  left: -4px;
  left: calc(-0.5 * var(--fc-event-resizer-thickness, 8px));
}
.fc-direction-ltr .fc-h-event:not(.fc-event-selected) .fc-event-resizer-end,
.fc-direction-rtl .fc-h-event:not(.fc-event-selected) .fc-event-resizer-start {
  cursor: e-resize;
  right: -4px;
  right: calc(-0.5 * var(--fc-event-resizer-thickness, 8px));
}
/* resizers for TOUCH */
.fc-h-event.fc-event-selected .fc-event-resizer {
  top: 50%;
  margin-top: -4px;
  margin-top: calc(-0.5 * var(--fc-event-resizer-dot-total-width, 8px));
}
.fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-start,
.fc-direction-rtl .fc-h-event.fc-event-selected .fc-event-resizer-end {
  left: -4px;
  left: calc(-0.5 * var(--fc-event-resizer-dot-total-width, 8px));
}
.fc-direction-ltr .fc-h-event.fc-event-selected .fc-event-resizer-end,
.fc-direction-rtl .fc-h-event.fc-event-selected .fc-event-resizer-start {
  right: -4px;
  right: calc(-0.5 * var(--fc-event-resizer-dot-total-width, 8px));
}
.fc .fc-popover {
  position: absolute;
  z-index: 9999;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.fc .fc-popover-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 3px 4px;
}
.fc .fc-popover-title {
  margin: 0 2px;
}
.fc .fc-popover-close {
  cursor: pointer;
  opacity: 0.65;
  font-size: 1.1em;
}
.fc-theme-standard .fc-popover {
  border: 1px solid #ddd;
  border: 1px solid var(--fc-border-color, #ddd);
  background: #fff;
  background: var(--fc-page-bg-color, #fff);
}
.fc-theme-standard .fc-popover-header {
  background: rgba(208, 208, 208, 0.3);
  background: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
}

:root {
  --fc-daygrid-event-dot-width: 8px;
}
/* help things clear margins of inner content */
.fc-daygrid-day-frame,
.fc-daygrid-day-events,
.fc-daygrid-event-harness {
  /* for event top/bottom margins */
}
.fc-daygrid-day-frame:before,
.fc-daygrid-day-events:before,
.fc-daygrid-event-harness:before {
  content: '';
  clear: both;
  display: table;
}
.fc-daygrid-day-frame:after,
.fc-daygrid-day-events:after,
.fc-daygrid-event-harness:after {
  content: '';
  clear: both;
  display: table;
}
.fc .fc-daygrid-body {
  /* a <div> that wraps the table */
  position: relative;
  z-index: 1; /* container inner z-index's because <tr>s can't do it */
}
.fc .fc-daygrid-day.fc-day-today {
  background-color: rgba(255, 220, 40, 0.15);
  background-color: var(--fc-today-bg-color, rgba(255, 220, 40, 0.15));
}
.fc .fc-daygrid-day-frame {
  position: relative;
  min-height: 100%; /* seems to work better than `height` because sets height after rows/cells naturally do it */
}
.fc {
  /* cell top */
}
.fc .fc-daygrid-day-top {
  display: flex;
}
.fc .fc-day-other .fc-daygrid-day-top {
  opacity: 0.3;
}
.fc {
  /* day number (within cell top) */
}
.fc .fc-daygrid-day-number {
  position: relative;
  z-index: 4;
  padding: 4px;
}
.fc {
  /* event container */
}
.fc .fc-daygrid-day-events {
  margin-top: 1px; /* needs to be margin, not padding, so that available cell height can be computed */
}
.fc {
  /* positioning for balanced vs natural */
}
.fc .fc-daygrid-body-balanced .fc-daygrid-day-events {
  position: absolute;
  left: 0;
  right: 0;
}
.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
  position: relative; /* for containing abs positioned event harnesses */
  min-height: 2em; /* in addition to being a min-height during natural height, equalizes the heights a little bit */
}
.fc .fc-daygrid-body-natural {
  /* can coexist with -unbalanced */
}
.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
  margin-bottom: 1em;
}
.fc {
  /* event harness */
}
.fc .fc-daygrid-event-harness {
  position: relative;
}
.fc .fc-daygrid-event-harness-abs {
  position: absolute;
  top: 0; /* fallback coords for when cannot yet be computed */
  left: 0; /* */
  right: 0; /* */
}
.fc .fc-daygrid-bg-harness {
  position: absolute;
  top: 0;
  bottom: 0;
}
.fc {
  /* bg content */
}
.fc .fc-daygrid-day-bg .fc-non-business {
  z-index: 1;
}
.fc .fc-daygrid-day-bg .fc-bg-event {
  z-index: 2;
}
.fc .fc-daygrid-day-bg .fc-highlight {
  z-index: 3;
}
.fc {
  /* events */
}
.fc .fc-daygrid-event {
  z-index: 6;
  margin-top: 1px;
}
.fc .fc-daygrid-event.fc-event-mirror {
  z-index: 7;
}
.fc {
  /* cell bottom (within day-events) */
}
.fc .fc-daygrid-day-bottom {
  font-size: 0.85em;
  padding: 2px 3px 0;
}
.fc .fc-daygrid-day-bottom:before {
  content: '';
  clear: both;
  display: table;
}
.fc .fc-daygrid-more-link {
  position: relative;
  z-index: 4;
  cursor: pointer;
}
.fc {
  /* week number (within frame) */
}
.fc .fc-daygrid-week-number {
  position: absolute;
  z-index: 5;
  top: 0;
  padding: 2px;
  min-width: 1.5em;
  text-align: center;
  background-color: rgba(208, 208, 208, 0.3);
  background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
  color: #808080;
  color: var(--fc-neutral-text-color, #808080);
}
.fc {
  /* popover */
}
.fc .fc-more-popover .fc-popover-body {
  min-width: 220px;
  padding: 10px;
}
.fc-direction-ltr .fc-daygrid-event.fc-event-start,
.fc-direction-rtl .fc-daygrid-event.fc-event-end {
  margin-left: 2px;
}
.fc-direction-ltr .fc-daygrid-event.fc-event-end,
.fc-direction-rtl .fc-daygrid-event.fc-event-start {
  margin-right: 2px;
}
.fc-direction-ltr .fc-daygrid-week-number {
  left: 0;
  border-radius: 0 0 3px 0;
}
.fc-direction-rtl .fc-daygrid-week-number {
  right: 0;
  border-radius: 0 0 0 3px;
}
.fc-liquid-hack .fc-daygrid-day-frame {
  position: static; /* will cause inner absolute stuff to expand to <td> */
}
.fc-daygrid-event {
  /* make root-level, because will be dragged-and-dropped outside of a component root */
  position: relative; /* for z-indexes assigned later */
  white-space: nowrap;
  border-radius: 3px; /* dot event needs this to when selected */
  font-size: 0.85em;
  font-size: var(--fc-small-font-size, 0.85em);
}
/* --- the rectangle ("block") style of event --- */
.fc-daygrid-block-event .fc-event-time {
  font-weight: bold;
}
.fc-daygrid-block-event .fc-event-time,
.fc-daygrid-block-event .fc-event-title {
  padding: 1px;
}
/* --- the dot style of event --- */
.fc-daygrid-dot-event {
  display: flex;
  align-items: center;
  padding: 2px 0;
}
.fc-daygrid-dot-event .fc-event-title {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0; /* important for allowing to shrink all the way */
  overflow: hidden;
  font-weight: bold;
}
.fc-daygrid-dot-event:hover,
.fc-daygrid-dot-event.fc-event-mirror {
  background: rgba(0, 0, 0, 0.1);
}
.fc-daygrid-dot-event.fc-event-selected:before {
  /* expand hit area */
  top: -10px;
  bottom: -10px;
}
.fc-daygrid-event-dot {
  /* the actual dot */
  margin: 0 4px;
  box-sizing: content-box;
  width: 0;
  height: 0;
  border: 4px solid #3788d8;
  border: calc(var(--fc-daygrid-event-dot-width, 8px) / 2) solid var(--fc-event-border-color, #3788d8);
  border-radius: 4px;
  border-radius: calc(var(--fc-daygrid-event-dot-width, 8px) / 2);
}
/* --- spacing between time and title --- */
.fc-direction-ltr .fc-daygrid-event .fc-event-time {
  margin-right: 3px;
}
.fc-direction-rtl .fc-daygrid-event .fc-event-time {
  margin-left: 3px;
}

/*
A VERTICAL event
*/

.fc-v-event {
  /* allowed to be top-level */
  display: block;
  border: 1px solid #3788d8;
  border: 1px solid var(--fc-event-border-color, #3788d8);
  background-color: #3788d8;
  background-color: var(--fc-event-bg-color, #3788d8);
}

.fc-v-event .fc-event-main {
  color: #fff;
  color: var(--fc-event-text-color, #fff);
  height: 100%;
}

.fc-v-event .fc-event-main-frame {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.fc-v-event .fc-event-time {
  flex-grow: 0;
  flex-shrink: 0;
  max-height: 100%;
  overflow: hidden;
}

.fc-v-event .fc-event-title-container {
  /* a container for the sticky cushion */
  flex-grow: 1;
  flex-shrink: 1;
  min-height: 0; /* important for allowing to shrink all the way */
}

.fc-v-event .fc-event-title {
  /* will have fc-sticky on it */
  top: 0;
  bottom: 0;
  max-height: 100%; /* clip overflow */
  overflow: hidden;
}

.fc-v-event:not(.fc-event-start) {
  border-top-width: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.fc-v-event:not(.fc-event-end) {
  border-bottom-width: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.fc-v-event.fc-event-selected:before {
  /* expand hit area */
  left: -10px;
  right: -10px;
}

.fc-v-event {
  /* resizer (mouse AND touch) */
}

.fc-v-event .fc-event-resizer-start {
  cursor: n-resize;
}

.fc-v-event .fc-event-resizer-end {
  cursor: s-resize;
}

.fc-v-event {
  /* resizer for MOUSE */
}

.fc-v-event:not(.fc-event-selected) .fc-event-resizer {
  height: 8px;
  height: var(--fc-event-resizer-thickness, 8px);
  left: 0;
  right: 0;
}

.fc-v-event:not(.fc-event-selected) .fc-event-resizer-start {
  top: -4px;
  top: calc(var(--fc-event-resizer-thickness, 8px) / -2);
}

.fc-v-event:not(.fc-event-selected) .fc-event-resizer-end {
  bottom: -4px;
  bottom: calc(var(--fc-event-resizer-thickness, 8px) / -2);
}

.fc-v-event {
  /* resizer for TOUCH (when event is "selected") */
}

.fc-v-event.fc-event-selected .fc-event-resizer {
  left: 50%;
  margin-left: -4px;
  margin-left: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
}

.fc-v-event.fc-event-selected .fc-event-resizer-start {
  top: -4px;
  top: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
}

.fc-v-event.fc-event-selected .fc-event-resizer-end {
  bottom: -4px;
  bottom: calc(var(--fc-event-resizer-dot-total-width, 8px) / -2);
}
.fc .fc-timegrid .fc-daygrid-body {
  /* the all-day daygrid within the timegrid view */
  z-index: 2; /* put above the timegrid-body so that more-popover is above everything. TODO: better solution */
}
.fc .fc-timegrid-divider {
  padding: 0 0 2px; /* browsers get confused when you set height. use padding instead */
}
.fc .fc-timegrid-body {
  position: relative;
  z-index: 1; /* scope the z-indexes of slots and cols */
  min-height: 100%; /* fill height always, even when slat table doesn't grow */
}
.fc .fc-timegrid-axis-chunk {
  /* for advanced ScrollGrid */
  position: relative; /* offset parent for now-indicator-container */
}
.fc .fc-timegrid-axis-chunk > table {
  position: relative;
  z-index: 1; /* above the now-indicator-container */
}
.fc .fc-timegrid-slots {
  position: relative;
  z-index: 1;
}
.fc .fc-timegrid-slot {
  /* a <td> */
  height: 1.5em;
  border-bottom: 0; /* each cell owns its top border */
}
.fc .fc-timegrid-slot:empty:before {
  content: '\00a0'; /* make sure there's at least an empty space to create height for height syncing */
}
.fc .fc-timegrid-slot-minor {
  border-top-style: dotted;
}
.fc .fc-timegrid-slot-label-cushion {
  display: inline-block;
  white-space: nowrap;
}
.fc .fc-timegrid-slot-label {
  vertical-align: middle; /* vertical align the slots */
}
.fc {
  /* slots AND axis cells (top-left corner of view including the "all-day" text) */
}
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion {
  padding: 0 4px;
}
.fc {
  /* axis cells (top-left corner of view including the "all-day" text) */
  /* vertical align is more complicated, uses flexbox */
}
.fc .fc-timegrid-axis-frame-liquid {
  height: 100%; /* will need liquid-hack in FF */
}
.fc .fc-timegrid-axis-frame {
  overflow: hidden;
  display: flex;
  align-items: center; /* vertical align */
  justify-content: flex-end; /* horizontal align. matches text-align below */
}
.fc .fc-timegrid-axis-cushion {
  max-width: 60px; /* limits the width of the "all-day" text */
  flex-shrink: 0; /* allows text to expand how it normally would, regardless of constrained width */
}
.fc-direction-ltr .fc-timegrid-slot-label-frame {
  text-align: right;
}
.fc-direction-rtl .fc-timegrid-slot-label-frame {
  text-align: left;
}
.fc-liquid-hack .fc-timegrid-axis-frame-liquid {
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.fc .fc-timegrid-col.fc-day-today {
  background-color: rgba(255, 220, 40, 0.15);
  background-color: var(--fc-today-bg-color, rgba(255, 220, 40, 0.15));
}
.fc .fc-timegrid-col-frame {
  min-height: 100%; /* liquid-hack is below */
  position: relative;
}
.fc-media-screen.fc-liquid-hack .fc-timegrid-col-frame {
  height: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.fc-media-screen .fc-timegrid-cols {
  position: absolute; /* no z-index. children will decide and go above slots */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.fc-media-screen .fc-timegrid-cols > table {
  height: 100%;
}
.fc-media-screen .fc-timegrid-col-bg,
.fc-media-screen .fc-timegrid-col-events,
.fc-media-screen .fc-timegrid-now-indicator-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.fc {
  /* bg */
}
.fc .fc-timegrid-col-bg {
  z-index: 2; /* TODO: kill */
}
.fc .fc-timegrid-col-bg .fc-non-business {
  z-index: 1;
}
.fc .fc-timegrid-col-bg .fc-bg-event {
  z-index: 2;
}
.fc .fc-timegrid-col-bg .fc-highlight {
  z-index: 3;
}
.fc .fc-timegrid-bg-harness {
  position: absolute; /* top/bottom will be set by JS */
  left: 0;
  right: 0;
}
.fc {
  /* fg events */
  /* (the mirror segs are put into a separate container with same classname, */
  /* and they must be after the normal seg container to appear at a higher z-index) */
}
.fc .fc-timegrid-col-events {
  z-index: 3;
  /* child event segs have z-indexes that are scoped within this div */
}
.fc {
  /* now indicator */
}
.fc .fc-timegrid-now-indicator-container {
  bottom: 0;
  overflow: hidden; /* don't let overflow of lines/arrows cause unnecessary scrolling */
  /* z-index is set on the individual elements */
}
.fc-direction-ltr .fc-timegrid-col-events {
  margin: 0 2.5% 0 2px;
}
.fc-direction-rtl .fc-timegrid-col-events {
  margin: 0 2px 0 2.5%;
}
.fc-timegrid-event-harness {
  position: absolute; /* top/left/right/bottom will all be set by JS */
}
.fc-timegrid-event-harness > .fc-timegrid-event {
  position: absolute; /* absolute WITHIN the harness */
  top: 0; /* for when not yet positioned */
  bottom: 0; /* " */
  left: 0;
  right: 0;
}
.fc-timegrid-event-harness-inset .fc-timegrid-event,
.fc-timegrid-event.fc-event-mirror,
.fc-timegrid-more-link {
  box-shadow: 0px 0px 0px 1px #fff;
  box-shadow: 0px 0px 0px 1px var(--fc-page-bg-color, #fff);
}
.fc-timegrid-event,
.fc-timegrid-more-link {
  /* events need to be root */
  font-size: 0.85em;
  font-size: var(--fc-small-font-size, 0.85em);
  border-radius: 3px;
}
.fc-timegrid-event {
  /* events need to be root */
  margin-bottom: 1px; /* give some space from bottom */
}
.fc-timegrid-event .fc-event-main {
  padding: 1px 1px 0;
}
.fc-timegrid-event .fc-event-time {
  white-space: nowrap;
  font-size: 0.85em;
  font-size: var(--fc-small-font-size, 0.85em);
  margin-bottom: 1px;
}
.fc-timegrid-event-short .fc-event-main-frame {
  flex-direction: row;
  overflow: hidden;
}
.fc-timegrid-event-short .fc-event-time:after {
  content: '\00a0-\00a0'; /* dash surrounded by non-breaking spaces */
}
.fc-timegrid-event-short .fc-event-title {
  font-size: 0.85em;
  font-size: var(--fc-small-font-size, 0.85em);
}
.fc-timegrid-more-link {
  /* does NOT inherit from fc-timegrid-event */
  position: absolute;
  z-index: 9999; /* hack */
  color: inherit;
  color: var(--fc-more-link-text-color, inherit);
  background: #d0d0d0;
  background: var(--fc-more-link-bg-color, #d0d0d0);
  cursor: pointer;
  margin-bottom: 1px; /* match space below fc-timegrid-event */
}
.fc-timegrid-more-link-inner {
  /* has fc-sticky */
  padding: 3px 2px;
  top: 0;
}
.fc-direction-ltr .fc-timegrid-more-link {
  right: 0;
}
.fc-direction-rtl .fc-timegrid-more-link {
  left: 0;
}
.fc {
  /* line */
}
.fc .fc-timegrid-now-indicator-line {
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  border-style: solid;
  border-color: red;
  border-color: var(--fc-now-indicator-color, red);
  border-width: 1px 0 0;
}
.fc {
  /* arrow */
}
.fc .fc-timegrid-now-indicator-arrow {
  position: absolute;
  z-index: 4;
  margin-top: -5px; /* vertically center on top coordinate */
  border-style: solid;
  border-color: red;
  border-color: var(--fc-now-indicator-color, red);
}
.fc-direction-ltr .fc-timegrid-now-indicator-arrow {
  left: 0;

  /* triangle pointing right. TODO: mixin */
  border-width: 5px 0 5px 6px;
  border-top-color: transparent;
  border-bottom-color: transparent;
}
.fc-direction-rtl .fc-timegrid-now-indicator-arrow {
  right: 0;

  /* triangle pointing left. TODO: mixin */
  border-width: 5px 6px 5px 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
}

:root {
  --fc-list-event-dot-width: 10px;
  --fc-list-event-hover-bg-color: #f5f5f5;
}
.fc-theme-standard .fc-list {
  border: 1px solid #ddd;
  border: 1px solid var(--fc-border-color, #ddd);
}
.fc {
  /* message when no events */
}
.fc .fc-list-empty {
  background-color: rgba(208, 208, 208, 0.3);
  background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* vertically aligns fc-list-empty-inner */
}
.fc .fc-list-empty-cushion {
  margin: 5em 0;
}
.fc {
  /* table within the scroller */
  /* ---------------------------------------------------------------------------------------------------- */
}
.fc .fc-list-table {
  width: 100%;
  border-style: hidden; /* kill outer border on theme */
}
.fc .fc-list-table tr > * {
  border-left: 0;
  border-right: 0;
}
.fc .fc-list-sticky .fc-list-day > * {
  /* the cells */
  position: sticky;
  top: 0;
  background: #fff;
  background: var(--fc-page-bg-color, #fff); /* for when headers are styled to be transparent and sticky */
}
.fc {
  /* only exists for aria reasons, hide for non-screen-readers */
}
.fc .fc-list-table thead {
  position: absolute;
  left: -10000px;
}
.fc {
  /* the table's border-style:hidden gets confused by hidden thead. force-hide top border of first cell */
}
.fc .fc-list-table tbody > tr:first-child th {
  border-top: 0;
}
.fc .fc-list-table th {
  padding: 0; /* uses an inner-wrapper instead... */
}
.fc .fc-list-table td,
.fc .fc-list-day-cushion {
  padding: 8px 14px;
}
.fc {
  /* date heading rows */
  /* ---------------------------------------------------------------------------------------------------- */
}
.fc .fc-list-day-cushion:after {
  content: '';
  clear: both;
  display: table; /* clear floating */
}
.fc-theme-standard .fc-list-day-cushion {
  background-color: rgba(208, 208, 208, 0.3);
  background-color: var(--fc-neutral-bg-color, rgba(208, 208, 208, 0.3));
}
.fc-direction-ltr .fc-list-day-text,
.fc-direction-rtl .fc-list-day-side-text {
  float: left;
}
.fc-direction-ltr .fc-list-day-side-text,
.fc-direction-rtl .fc-list-day-text {
  float: right;
}
/* make the dot closer to the event title */
.fc-direction-ltr .fc-list-table .fc-list-event-graphic {
  padding-right: 0;
}
.fc-direction-rtl .fc-list-table .fc-list-event-graphic {
  padding-left: 0;
}
.fc .fc-list-event.fc-event-forced-url {
  cursor: pointer; /* whole row will seem clickable */
}
.fc .fc-list-event:hover td {
  background-color: #f5f5f5;
  background-color: var(--fc-list-event-hover-bg-color, #f5f5f5);
}
.fc {
  /* shrink certain cols */
}
.fc .fc-list-event-graphic,
.fc .fc-list-event-time {
  white-space: nowrap;
  width: 1px;
}
.fc .fc-list-event-dot {
  display: inline-block;
  box-sizing: content-box;
  width: 0;
  height: 0;
  border: 5px solid #3788d8;
  border: calc(var(--fc-list-event-dot-width, 10px) / 2) solid var(--fc-event-border-color, #3788d8);
  border-radius: 5px;
  border-radius: calc(var(--fc-list-event-dot-width, 10px) / 2);
}
.fc {
  /* reset <a> styling */
}
.fc .fc-list-event-title a {
  color: inherit;
  text-decoration: none;
}
.fc {
  /* underline link when hovering over any part of row */
}
.fc .fc-list-event.fc-event-forced-url:hover a {
  text-decoration: underline;
}

.fc-theme-bootstrap a:not([href]) {
  color: inherit; /* natural color for navlinks */
}

.fc-theme-bootstrap5 a:not([href]) {
  color: inherit;
  text-decoration: inherit;
}

.fc-theme-bootstrap5 .fc-list,
.fc-theme-bootstrap5 .fc-scrollgrid,
.fc-theme-bootstrap5 td,
.fc-theme-bootstrap5 th {
  border: 1px solid var(--bs-gray-400);
}

.fc-theme-bootstrap5 {
  /* HACK: reapply core styles after highe-precedence border statement above */
}

.fc-theme-bootstrap5 .fc-scrollgrid {
  border-right-width: 0;
  border-bottom-width: 0;
}

.fc-theme-bootstrap5-shaded {
  background-color: var(--bs-gray-200);
}
/* moved to vendor */



/* ---- global/css/vendor/pignose.calendar.css ---- */
/*@font-face {
  font-family: 'pignose-calendar-icon';
  src: url("fonts/pignose.calendar.eot?gpa4vl");
  src: url("fonts/pignose.calendar.eot?gpa4vl#iefix") format('embedded-opentype'), url("fonts/pignose.calendar.ttf?gpa4vl") format('truetype'), url("fonts/pignose.calendar.woff?gpa4vl") format('woff'), url("fonts/pignose.calendar.svg?gpa4vl#pignose.calendar") format('svg');
  font-weight: normal;
  font-style: normal;
}*/
.pignose-calendar .icon-arrow-left,
.pignose-calendar .icon-arrow-right {
  font-family: "pignose-calendar-icon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}

.pignose-calendar-wrapper {
  display: none;
  position: fixed;
  width: 80%;
  max-width: 360px;
  top: 50%;
  left: 50%;
  border-radius: 2px;
  z-index: 50001;
  overflow: hidden;
  -webkit-box-shadow: 0 4px 16px #000000;
  box-shadow: 0 4px 16px #000000;
  -webkit-transform: translate3d(0, 160px, 0);
  transform: translate3d(0, 160px, 0);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.5s ease-out;
  transition: opacity 0.3s ease, -webkit-transform 0.5s ease-out;
  transition: opacity 0.3s ease, transform 0.5s ease-out;
  transition: opacity 0.3s ease, transform 0.5s ease-out,
    -webkit-transform 0.5s ease-out;
}
.pignose-calendar-wrapper.pignose-calendar-wrapper-active {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.pignose-calendar-wrapper .pignose-calendar {
  max-width: auto;
  width: 100%;
  border: none;
}
.pignose-calendar-wrapper .pignose-calendar .pignose-calendar-button-group {
  border-top: 1px solid #e2e2e2;
  overflow: hidden;
}
.pignose-calendar-wrapper
  .pignose-calendar
  .pignose-calendar-button-group
  .pignose-calendar-button {
  width: 50%;
  display: block;
  float: left;
  height: 3.2em;
  text-align: center;
  line-height: 3.2em;
  color: #333333;
  font-weight: 600;
  text-decoration: none;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.pignose-calendar-wrapper
  .pignose-calendar
  .pignose-calendar-button-group
  .pignose-calendar-button:hover {
  background-color: #efefef;
}
.pignose-calendar-wrapper
  .pignose-calendar
  .pignose-calendar-button-group
  .pignose-calendar-button-apply {
  color: #ffffff;
  background-color: #2fabb7;
}
.pignose-calendar-wrapper
  .pignose-calendar
  .pignose-calendar-button-group
  .pignose-calendar-button-apply:hover {
  background-color: inherit;
}
.pignose-calendar-wrapper-overlay {
  background-color: #000000;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 50000;
}
.pignose-calendar-wrapper-overlay.pignose-calendar-wrapper-overlay-active {
  opacity: 0.7;
}
.pignose-calendar {
}
.pignose-calendar .pignose-calendar-top {
  padding: 2.6em 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.pignose-calendar .pignose-calendar-top .pignose-calendar-top-date {
  flex-grow: 1;
  font-weight: bold;
  font-size: 1.8em;
  text-align: center;
  text-transform: uppercase;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.pignose-calendar .pignose-calendar-top .pignose-calendar-top-year,
.pignose-calendar .pignose-calendar-top .pignose-calendar-top-month {
  text-align: center;
}

.pignose-calendar .pignose-calendar-top .pignose-calendar-top-nav {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  position: relative;
  z-index: 5;
  text-decoration: none;
}
.pignose-calendar
  .pignose-calendar-top
  .pignose-calendar-top-nav
  .pignose-calendar-top-value {
  display: inline-block;
  color: #777777;
  font-size: 115%;
  font-weight: 600;
  vertical-align: middle;
  margin-top: -10px;
}
.pignose-calendar
  .pignose-calendar-top
  .pignose-calendar-top-nav
  .pignose-calendar-top-icon {
  color: #555555;
  font-size: 160%;
}
.pignose-calendar
  .pignose-calendar-top
  .pignose-calendar-top-nav.pignose-calendar-top-prev {
  float: left;
  background: var(--gray-pale) url("../../youthCenter/images/icon/arrow-left.svg")
    no-repeat center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.pignose-calendar
  .pignose-calendar-top
  .pignose-calendar-top-nav.pignose-calendar-top-prev
  .pignose-calendar-top-value {
  margin-left: 0.2em;
}
.pignose-calendar
  .pignose-calendar-top
  .pignose-calendar-top-nav.pignose-calendar-top-next {
  float: right;
  background: var(--gray-pale) url("../../youthCenter/images/icon/arrow-right.svg")
    no-repeat center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.pignose-calendar
  .pignose-calendar-top
  .pignose-calendar-top-nav.pignose-calendar-top-next
  .pignose-calendar-top-value {
  margin-right: 0.2em;
}
.pignose-calendar .pignose-calendar-header {
  border-bottom: 1px solid var(--gray-border);
  overflow: hidden;
}
.pignose-calendar .pignose-calendar-header .pignose-calendar-week {
  float: left;
  font-size: 0.9em;
  padding-left: 10px;
  width: 14.28%;
  height: var(--cell-h);
  line-height: var(--cell-h);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
}
.calendar .pignose-calendar .pignose-calendar-unit-active::before,
.calendar .pignose-calendar .pignose-calendar-unit-range::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  display: block;
  background-color: var(--gray-pale);
  mix-blend-mode: multiply;
  z-index: -2;
}
.pignose-calendar
  .pignose-calendar-header
  .pignose-calendar-week.pignose-calendar-week-sun {
  color: var(--red-color);
}
.pignose-calendar .pignose-calendar-header .pignose-calendar-week:last-child {
  width: 14.32%;
}
.pignose-calendar .pignose-calendar-body {
}
.pignose-calendar .pignose-calendar-body .pignose-calendar-row {
  overflow: hidden;
}
.pignose-calendar .pignose-calendar-unit {
  float: left;
  display: block;
  margin-top: 5px;
  border-bottom: 1px solid var(--gray-border);
  width: 14.28%;

  line-height: 2.8em;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.pignose-calendar .pignose-calendar-unit:last-child {
  width: 14.32%;
}
.pignose-calendar
  .pignose-calendar-unit
  .pignose-calendar-button-schedule-container {
  line-height: 0.5em;
}
.pignose-calendar
  .pignose-calendar-unit
  .pignose-calendar-button-schedule-container
  .pignose-calendar-button-schedule-pin {
  display: inline-block;
  background-color: #777777;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  margin-right: 0.2em;
}
.pignose-calendar
  .pignose-calendar-unit
  .pignose-calendar-button-schedule-container
  .pignose-calendar-button-schedule-pin:last-child {
  margin-right: 0;
}
.pignose-calendar .pignose-calendar-unit a {
  display: block;
  position: relative;
  color: inherit;
  line-height: 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  -webkit-transition: background-color 0.3s ease, color 0.3s ease;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.pignose-calendar .pignose-calendar-unit a:active {
  background-color: #d8d8d8;
}
.pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-disabled a {
  opacity: 0.3;
  /*background-color: #efefef;*/
}
.pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-active a {
  background-color: var(--gray-dark);
  color: #ffffff;
  font-weight: 600;
}
.pignose-calendar .pignose-calendar-unit-first-active a {
}
.pignose-calendar .pignose-calendar-unit-second-active a {
  text-align: center;
  font-weight: bold;
  position: relative;
}

.pignose-calendar
  .pignose-calendar-unit.pignose-calendar-unit-active.pignose-calendar-unit-sun
  a,
.pignose-calendar
  .pignose-calendar-unit.pignose-calendar-unit-active.pignose-calendar-unit-sat
  a {
  color: #ffffff;
}
.pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-range a {
  background-color: var(--gray-lighter);
  border-radius: 0;
  width: 100%;
  display: block;
  position: relative;
  text-align: left;
  padding-left: 9px;
  position: relative;
}

.pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-range a:before,
.pignose-calendar
  .pignose-calendar-unit.pignose-calendar-unit-second-active
  a:before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: var(--gray-lighter);
  top: 0;
  left: calc((100% - 30px) * -1);
  display: block;
  z-index: -1;
  position: absolute;
  border-radius: 30px 0 0 30px;
}
.pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-range a:before,
.pignose-calendar
  .pignose-calendar-unit.pignose-calendar-unit-second-active
  a:before {
  width: calc(100% - 30px);
}
.pignose-calendar
  .pignose-calendar-unit.pignose-calendar-unit-range.pignose-calendar-unit-disabled
  a {
  color: #b2b9bb;
  background-color: #e1e1e1;
}

.pignose-calendar .pignose-calendar-unit.pignose-calendar-unit-sun a {
  color: #fa4832;
}
.pignose-calendar.pignose-calendar-default
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-toggle-active
  a {
  color: #cccccc !important;
}
.pignose-calendar.pignose-calendar-default.pignose-calendar-reverse
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-toggle-inactive
  a {
  color: #cccccc !important;
}
.pignose-calendar.pignose-calendar-dark {
  border-color: #323537;
  background-color: #4b4f51;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
}
.pignose-calendar.pignose-calendar-dark .pignose-calendar-top {
  background-color: #3f4244;
  border-bottom-color: #323537;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.175);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.175);
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-top
  .pignose-calendar-top-month {
  color: #ffffff;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-top
  .pignose-calendar-top-year {
  color: #bdc2c5;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-top
  .pignose-calendar-top-nav
  .pignose-calendar-top-value {
  color: #a2a9ab;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-top
  .pignose-calendar-top-nav
  .pignose-calendar-top-icon {
  color: #a2a9ab;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-header
  .pignose-calendar-week {
  color: #bdc2c5;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-header.pignose-calendar-week-sun,
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-header.pignose-calendar-week-sat {
  color: #ff6060;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit
  a {
  color: #51cfd2;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-sun
  a,
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-sat
  a {
  color: #ff6060;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-disabled
  a {
  color: #868e8f;
  background-color: #5d6365;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-active
  a {
  color: #ffffff;
  background-color: #31bbbf;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-toggle
  a {
  color: #8b8f94;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-range
  a {
  background-color: #5a5d62;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-range.pignose-calendar-unit-disabled
  a {
  color: #727a7c;
  background-color: #4f5558;
}
.pignose-calendar.pignose-calendar-dark .pignose-calendar-button-group {
  border-top: 1px solid #323537;
  overflow: hidden;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-button-group
  .pignose-calendar-button {
  color: #ffffff;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-button-group
  .pignose-calendar-button:hover {
  background-color: #5a5d62;
}
.pignose-calendar.pignose-calendar-dark
  .pignose-calendar-button-group
  .pignose-calendar-button-apply {
  color: #ffffff;
  background-color: #31bbbf;
}
.pignose-calendar.pignose-calendar-blue {
  background-color: #fafafa;
}
.pignose-calendar.pignose-calendar-blue .pignose-calendar-top {
  background-color: #009fe3;
  border-bottom-color: #e1e1e1;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-top
  .pignose-calendar-top-month {
  color: #ffffff;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-top
  .pignose-calendar-top-year {
  color: #ffffff;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-top
  .pignose-calendar-top-nav
  .pignose-calendar-top-value {
  color: #ffffff;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-top
  .pignose-calendar-top-nav
  .pignose-calendar-top-icon {
  color: #ffffff;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-header
  .pignose-calendar-week {
  color: #5c6270;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-header
  .pignose-calendar-week.pignose-calendar-week-sun,
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-header
  .pignose-calendar-week.pignose-calendar-week-sat {
  color: #fa4832;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit
  a {
  color: #5c6270;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-sun
  a,
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-sat
  a {
  color: #fa4832;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-disabled
  a {
  background-color: #efefef;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-active
  a {
  color: #ffffff;
  background-color: #009fe3;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-toggle
  a {
  color: #cccccc;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-range
  a {
  background-color: #efefef;
}
.pignose-calendar.pignose-calendar-blue
  .pignose-calendar-body
  .pignose-calendar-row
  .pignose-calendar-unit.pignose-calendar-unit-range.pignose-calendar-unit-disabled
  a {
  background-color: #efefef;
}
/* moved to vendor */



/* Aggregated component styles split by purpose. */

/* ---- global/css/components/accordion.css ---- */
/* 폴딩 */
.accordion {
  position: relative;
  border: 1px solid var(--gray-border);
  border-radius: 10px;

  > li {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    padding: 0 20px;

    + li {
      border-top: 1px solid var(--gray-border);
    }

    &::after {
      content: "";
      position: absolute;
      background: url(/youthCenter/images/icon/select.svg) no-repeat;
      width: 16px;
      height: 10px;
      top: 28px;
      right: 20px;
      transition: 0.4s;
      transform-origin: center;
      pointer-events: none;
    }

    h2 {
      font-size: 1em;
      font-weight: normal;
      line-height: var(--input-rect);
      display: flex;
      align-items: center;

      a {
        flex-grow: 1;
        padding: var(--padding) 0;
      }

      input + label {
        margin-right: 5px;
      }
    }

    &.active h2 {
      font-weight: bold;
    }

    &.active::after {
      transform: rotate(180deg);
    }

    .pull {
      /*transform: scaleY(0); height: 0;*/
      overflow: hidden;
      display: none;

      h3 {
        font-size: 1.2em;
      }
    }

    &.active .pull {
      /*transform: scaleY(1); height: auto;*/
      padding-bottom: 20px;

      > h3 {
        margin-bottom: 10px;
        margin-top: 30px;

        &:first-of-type {
          margin-top: 0;
        }
      }
    }
  }

  table + * {
    margin-top: 20px;
  }

  th,
  td {
    border: 1px solid var(--gray-border);
    padding: 20px;
    font-size: 0.85em;
  }

  th {
    background-color: var(--gray-pale);
  }
}

@media (max-width: 812px) {
  .accordion {
    th,
    td {
      font-size: 12px;
      word-break: break-all;
      word-wrap: break-word;
      padding: 10px;
    }

    > li {
      padding: 0 15px;

      h2 {
        font-size: 14px;

        a {
          padding: 15px 0;
        }
      }

      &::after {
        top: 22px;
      }
    }
  }
}



/* ---- global/css/components/auth-banner.css ---- */
.auth-banner {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  margin-bottom: 10px;
  padding: 2em;
  display: flex;
  align-items: center;
  .login & {
    margin-top: 1em;
    padding: var(--padding);
  }
  .text {
    width: 80%;
    flex-grow: 1;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    h3 {
      font-size: 1.25em;
      margin-bottom: 0.5em;
      br {
        display: none;
      }
    }
    p {
      font-size: 0.9em;
      color: var(--gray-mid);
      font-weight: normal;
      mix-blend-mode: multiply;
    }
  }
  .btnset {
    margin-top: 1.2em;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    .btn {
      background-color: transparent;
      color: initial;
      border-bottom: 1px solid var(--gray-dark);
      padding: 0 0 0.4em 0;
      border-radius: 0;
      height: auto;
      transition: 0.3s;
      gap: 3px;
      &:hover {
        color: var(--main-color);
        border-color: var(--main-color);
      }
      > span {
        font-size: 1.3em;
        font-weight: 400;
      }
    }
  }
  .img {
    max-width: 90px;
    max-height: 90px;
    position: relative;
    z-index: 2;
  }
  &::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--mint-blue);
    opacity: 0.07;
    z-index: 0;
  }
  &.ed::after {
    background-color: var(--green-color);
    opacity: 0.06;
  }
}

@media (max-width: 812px) {
  .auth-banner {
    padding: var(--padding);
    align-items: flex-start;
    border-radius: 0;
    margin: 0;
    font-size: 0.9em;
    .img {
      width: 70px;
    }
    .text {
      padding-right: 10px;
      p {
        font-size: 1em;
      }
      .impo {
        font-size: 1.2em;
      }
      h3 br {
        display: inline-block;
      }
    }
    .full & {
    }
  }
}



/* ---- global/css/components/board.css ---- */
/* Board (view/write/attachment/pager) */
.board {
  width: var(--width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  /* view 공통 */
  &.view {
    .head {
      margin: 40px 0;

      h2 {
        display: flex;
        gap: 10px;
        align-items: center;

        img {
          height: 30px;
        }
      }

      .info {
        margin-top: 12px;
        display: flex;
        align-items: center;
        gap: 0.5em;

        .writer {
          font-weight: bold;
        }
      }
    }

    .in {
      flex-grow: 1;
      font-size: 1.1em;
      line-height: 1.6;
      color: var(--gray-mid);
      padding-bottom: 40px;

      p:has(img) {
        margin: 20px 0;
      }
    }

    /* 첨부영역 */
    .attachment {
      background-color: var(--gray-pale);

      li {
        display: flex;
        justify-content: space-between;
        font-size: 1.1em;
        border-top: 1px solid var(--gray-border);
        padding: 12px 15px;
        min-height: var(--input-h);
        align-items: center;
        gap: 1em;

        &:last-child {
          border-bottom: 1px solid var(--gray-border);
        }

        .attach {
          flex-grow: 1;
        }

        .file {
          display: flex;
          align-items: center;

          &::before {
            content: '\ea7f';
            font-family: 'xeicon';
            transform: rotate(45deg);
            text-decoration: none;
            font-size: 1.2em;
          }

          &:hover {
            color: var(--main-color);
          }
        }

        h5 .xi-attachment {
          transform: rotate(-45deg);
          display: inline-block;
          margin-right: 5px;
        }

        .btn {
          background-color: #fff;
          color: var(--gray-dark);
          border: 1px solid var(--gray-light);
          min-width: initial;

          &::before {
            content: '\ea8b';
            font-family: 'xeicon';
            font-size: 1.2em;
          }

          &:hover {
            background-color: var(--main-color);
            border-color: var(--main-color);
            color: #fff;
          }
        }
      }

      /* 타입2(카드형) */
      &.type2 {
        background: none;
        display: flex;
        gap: 20px;
        padding-bottom: 40px;

        li {
          flex-direction: column;
          border: 1px solid var(--gray-border);
          border-radius: 10px;
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
          padding: 0;
          overflow: hidden;

          &:hover,
          &:hover a {
            background-color: var(--main-color) !important;
            color: #fff !important;
            border-color: var(--main-color) !important;
          }

          .file {
            flex-wrap: wrap;
            flex-direction: column;
            text-align: center;
            padding: var(--padding);
            justify-content: center;
            gap: 10px;

            &::before {
              font-size: 2em;
            }
          }

          .btn {
            border: 0;
            border-top: 1px solid var(--gray-border);
            border-radius: 0;
            background-color: transparent;
            width: 100%;
          }

          &:hover {
            background: inherit;
          }
        }
      }
    }

    /* 버튼/페이저 하단선 */
    .btn-area,
    .pager:not(:has(.paging)) {
      border-top: 1px solid var(--gray-border);
      margin-bottom: 40px;
      padding-top: var(--padding);
    }
  }

  /* view + write (작성모드) */
  &.view.write {
    .head {
      &:has(.form) {
        margin-bottom: 0;
      }

      .form {
        .inputs {
          width: 100%;
          border-bottom: 1px solid var(--gray-border);
          margin: 0;

          > *:first-child {
            flex-grow: 1;
          }

          p {
            color: var(--gray-mid);
            font-size: 0.9em;
          }
        }

        h2 input {
          padding-top: 5px;
        }

        input {
          border: 0;
          padding: 24px 0 0 0; /* 위 24px, 나머지 0 */
          border-radius: 0;
          height: auto;
          font-weight: bold;
          flex-grow: 1;
        }
      }
    }

    .in {
      padding-bottom: 0;
      display: flex;
      flex-direction: column;

      textarea {
        border: 0;
        padding: 24px 0;
        font-size: 1.2em;
        height: 100%;
        flex-grow: 1;
        resize: none;
      }
    }
  }

  /* 첨부가 있을 때 버튼/페이저 상단선 제거 */
  &:has(.attachment) {
    &.view {
      .btn-area,
      .pager:not(:has(.paging)) {
        border-top: 0;
      }
    }
  }
}

/* 반응형 */
@media (max-width: 812px) {
  .board.view.write .head .form .inputs {
    margin: 0;
    padding: 16px 0;
  }
  .board.view.write .head .form input {
    padding: 0;
  }
  .board.view.write .in textarea {
    padding: 16px 0;
  }
  .board.view .btn-area,
  .board.view .pager:not(:has(.paging)) {
    margin-bottom: 0;
  }
}
@media (max-width: 812px) {
  .board.view .attachment {
    margin: -1px calc(var(--padding) * -1);
  }
  .board.view .attachment.type2 {
    margin: 0;
    gap: 10px;
    padding-bottom: var(--padding);
  }
  .board.view .attachment li .file {
    font-size: 0.85em;
  }
  .board {
    padding: 0 var(--padding);
  }
  .board img {
    margin: 0 -var(--padding);
    max-width: calc(100% + 48px);
  }
}



/* ---- global/css/components/buttons.css ---- */
/* ==========================================================================
   버튼 (Buttons) 스타일
   ========================================================================== */

/* 기본 버튼 스타일 */
.btn {
  display: flex;
  height: 42px;
  align-items: center;
  justify-content: center;
  background-color: var(--gray-dark);
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-radius: 42px;
  font-size: 14px;
  transition: 0.5s;
  padding: 0 20px;
  gap: 4px;
  width: fit-content;
  &.circle {
    flex-direction: column;
    aspect-ratio: 1/1;
    height: auto;

    .material-symbols-sharp {
      font-size: 2em;
      font-weight: 300;
    }
    &.overlay {
      position: absolute;
      top: 10px;
      right: 10px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      background-color: color-mix(in srgb, var(--white) 10%, transparent);
      backdrop-filter: blur(10px);
      color: color-mix(in srgb, var(--gray-dark) 80%, transparent);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
      text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
    }
  }
  &:hover {
    background-color: var(--main-color);
  }

  /* 테두리 버튼 */
  &.border {
    background-color: var(--white);
    border: 1px solid var(--gray-dark);
    color: initial;

    &:hover {
      border-color: transparent;
      color: #fff;
    }
    &.gray {
      color: var(--gray-mid);
      background-color: var(--white);
      border-color: var(--gray-border);
      &:hover {
        color: var(--main);
        border-color: var(--main);
      }
    }
  }
  /* 밑줄버튼 */
  &.underline {
    background-color: transparent;
    padding: 0;
    color: inherit;
    border-bottom: 2px solid var(--gray-dark);
    padding: 6px 0;
    height: auto;
    border-radius: 0;
    line-height: 1;
    text-decoration: none;
    &:hover {
      color: var(--main-color);
      border-color: var(--main-color);
    }
  }
  /* 강조 버튼 */
  &.impo {
    background-color: var(--main-color);
    color: #fff !important;
    &:hover {
      background-color: var(--main-deep);
      padding-left: 24px;
      padding-right: 24px;
    }
  }

  /* 회색 버튼 */
  &.gray {
    background-color: var(--gray-light);
  }

  /* 팝업 토글 버튼 */
  &.on {
    font-size: 0;
    &::before {
      font-size: 14px;
      content: '닫기';
      transition: 0s;
    }
    + .price-popup {
      pointer-events: all;
      opacity: 1;
    }
  }
}

/* 버튼 그룹 */
.btns {
  margin-top: 30px;
}

/* 버튼 영역 */
.btn-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;

  &.center {
    justify-content: center;
  }

  p {
    color: var(--gray-mid);
    font-style: italic;
  }
}

/* 가격 팝업 */
.price-popup {
  position: absolute;
  background-color: #fff;
  z-index: 20;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  min-width: 60%;
  border: 1px solid var(--gray-dark);
  border-radius: 12px;
  left: 260px;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;

  .title {
    display: flex;
    align-items: center;
    padding: 30px 20px 20px 30px;
    h2 {
      flex-grow: 1;
    }
    a.close {
      padding: 10px;
      img {
        height: 18px;
      }
    }
  }

  .price-table {
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0px 30px 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 60px;
    .sect .overview-mm {
      margin-top: 30px;
      th,
      td {
        padding: 20px 0;
      }
    }
  }
}

.list .full-split .info .btns .btn.price-btn {
  transition: 0s;
}

/* ==========================================================================
   반응형(Responsive) 스타일
   ========================================================================== */
@media (max-width: 812px) {
  .btn {
    height: auto;
    line-height: initial;
    min-width: initial;
    padding: 8px 15px;
  }

  .btn-area {
    padding: 15px;
    a.btn {
      font-size: 1em;
      padding: 10px 20px;
    }
  }

  .board.view .btn-area {
    margin: 0 calc(var(--padding) * -1);
    padding-top: 15px;
  }

  table td.with-btn {
    padding: 0;
    vertical-align: middle;
    height: 56px;
  }

  .section {
    .head {
      .with-btn {
        display: block;
        .btn {
          margin-top: 10px;
        }
      }
      h2.with-btn .btn {
        margin-top: 0px;
      }
    }
    .split li table td.with-btn {
      padding: 5px 0;
    }
  }

  .sect {
    .form .guidance.split {
      display: block;
      > div {
        width: initial;
        + div {
          margin-top: 20px;
          border-top: 1px solid var(--gray-border);
          padding-top: 20px;
        }
        .btn {
          margin-top: 10px;
        }
      }
    }
    .noti,
    .form .guidance.split > div p {
      font-size: 1em;
    }
    .noti p + p {
      margin-top: 3px;
    }
    .noti.with-btn {
      display: block;
      .qr {
        text-align: center;
        margin-bottom: 20px;
        img {
          height: auto;
          width: 40%;
        }
      }
    }
  }

  .list .full-split .info .btns {
    margin-top: 20px;
    gap: 10px;
    .btn {
      font-size: 0.8em;
      padding: 10px var(--padding);
      &.on {
        font-size: 0;
      }
    }
  }

  .batchplan .frame .batch > ul li {
    width: 100% !important;
    height: var(--btn-h);
  }

  .cal-huge.ui-widget .cal-btns,
  .huge-widget .ui-widget .btns {
    height: var(--btn-h);
    line-height: var(--btn-h);
  }

  .auth-banner .btnset .btn {
    font-size: 1em;
  }
}



/* ---- global/css/components/calendar.css ---- */
/* ==========================================================================
   캘린더 (Calendar) 스타일
   - Mobile-first, nested, de-duplicated
   - Modern selectors only (Chrome/modern mobile ok)
   ========================================================================== */

/* ==========================================================================
   기본 캘린더 (.calendar)
   ========================================================================== */
.calendar {
  position: relative;
  background-color: var(--white);

  /* 헤더 */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    padding: 0 20px 16px;

    > a {
      height: fit-content;
    }
  }

  /* 네비게이션 (월 이동) */
  .nav {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.7em;
    margin: 20px 0;

    a {
      color: var(--gray-mid);
      font-weight: 300;
      font-size: 0.8em;
      display: inline-block;
      vertical-align: middle;
      background-repeat: no-repeat;
      &:hover {
        color: var(--gray-dark);
      }
      img {
        vertical-align: middle;
      }
      &.prev {
        flex: auto;
        background-image: url(../images/icon/arrow-left-gray.svg);
        background-position: left center;
        padding-left: 18px;
      }
      &.next {
        flex: auto;
        text-align: right;
        background-image: url(../images/icon/arrow-right-gray.svg);
        background-position: right center;
        padding-right: 18px;
      }
    }

    p.this {
      font-weight: bold;
      text-align: center;
    }
  }

  /* 요일 헤더 */
  .week-head {
    border-top: 1px solid var(--gray-dark);
    font-weight: bold;
    li {
      font-size: 0.8em;
      height: var(--btn-h);
      display: flex;
      align-items: center;
    }
  }

  /* 하단 구분선 */
  &::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: calc(100% - var(--padding));
    height: 1px;
    opacity: 0.2;
    background: var(--px1);
  }

  /* 컨텍스트별 스타일 */
  .schedule:has(.score) &::after {
    display: none;
  }
  .mid:has(.elements) &::after {
    width: 100%;
  }
  .ui-widget {
    &.ui-widget-content {
      border: 0;
      border-radius: 0;
      &.cal-huge {
        border-radius: 12px;
      }
    }
  }
  /* 이벤트 */
  .event {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 4px;

    width: calc(100% - 56px);

    color: var(--gray-dark);
    &.holiday {
      border-color: var(--gray-light);
      color: var(--gray-light);
    }

    .event-name {
      font-size: 14px;
      font-weight: 600;
      display: flex;
      margin-top: 5px;
      min-height: 36px;
      display: flex;
      align-items: center;
      flex-grow: 0;
    }
    .scr {
      font-size: 12px;
    }
    .time {
      font-weight: bold;
    }

    .scr {
      line-height: 1.4;
      color: var(--gray-mid);
    }
  }

  .schedule-wrapper.inactive {
    opacity: 0.4;
    pointer-events: none;
  }
  .ctg:has(.schedule-wrapper.inactive) {
    opacity: 0.4;
    .ctg-name {
      opacity: 0.4;
    }
    &:has(.schedule.active) {
      .ctg,
      .ctg-name {
        opacity: 1;
      }
      opacity: 1;
      filter: initial;
    }
    &:not(:has(.schedule.active)) {
      .ctg {
        opacity: 1;
        pointer-events: none;
      }
      opacity: 1;
      filter: initial;
    }
  }
}

/* ==========================================================================
   Pignose 캘린더 (커스텀)
   ========================================================================== */
.calendar .pignose-calendar {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  font-size: 0.9em;
  margin-bottom: -1px;
  margin-right: -1px;

  .pignose-calendar-header .pignose-calendar-week {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-light);
    border-right: 1px solid var(--gray-border);
    padding: 10px 0;
    font-weight: bold;
    line-height: initial;
    height: auto;
  }

  .pignose-calendar-unit {
    border-right: 1px solid var(--gray-border);
    margin-top: 0;
    padding: 0;
    height: auto;
    line-height: initial;
    position: relative;
    height: auto;
    margin-top: 0;
    display: flex;
    align-items: flex-start;

    &:has(.element) {
      flex-wrap: wrap;
    }
    &.pignose-calendar-unit-past {
      filter: grayscale(0.9);
      pointer-events: none;
      a,
      .element {
        opacity: 0.5;
        pointer-events: none;
      }
    }
    &.pignose-calendar-unit-disabled {
      background: repeating-linear-gradient(
        45deg,
        var(--gray-pale),
        /* 첫 번째 색상 */ var(--gray-pale) 2px,
        /* 첫 번째 색상 굵기 */ var(--white) 2px,
        /* 두 번째 색상 */ var(--white) 4px /* 두 번째 색상 굵기 */
      );
    }
    > div > div {
      padding: 0 5px 10px 5px;
    }
    .element {
      width: 100%;
      height: calc(100% - 46px);
    }
    &.pignose-calendar-unit-range a {
      background-color: transparent;
    }

    > a {
      .today & {
        color: var(--main-color);
      }
      width: 36px;
      height: 36px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      aspect-ratio: 1/1;
      padding: 0;
      text-align: center;
      margin: 5px;
    }
    .time-schedule &:not(:has(.element)) {
      pointer-events: none;
    }
    .time-schedule &:has(.schedule) {
      pointer-events: none;
      > a {
        pointer-events: none;
      }
    }
  }

  .pignose-calendar-top,
  .pignose-week-header {
    padding: 10px;
    text-align: center;
    display: block;
    flex-shrink: 0;
    &.is-week-hidden {
      display: none;
    }
  }
  .pignose-calendar-top-date,
  .weekly-date {
    font-size: 18px;
    font-weight: 600;
    display: inline-flex;
    flex-direction: row-reverse;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-grow: 0;
  }
  .pignose-calendar-top-year::after {
    content: "년";
  }

  .pignose-calendar-body {
    flex-grow: 1;
  }
  .pignose-calendar-header {
    border-top: 1px solid var(--gray-border);
    flex-shrink: 0;
  }
  .pignose-calendar-unit-date {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .pignose-calendar-unit-outside {
    color: var(--gray-light);

    pointer-events: none;

    > a {
      color: inherit;
      cursor: default;
    }
  }
  .pignose-calendar-body .pignose-calendar-row {
    overflow: visible;
    display: flex;
    flex-wrap: wrap;
    &::after {
      content: "";
      display: block;
      clear: both;
    }
  }

  .pignose-calendar-unit-active {
    background-color: color-mix(in srgb, var(--main-color) 5%, transparent);
    &:has(.element .sect01) {
      --main-color: var(--type1);
    }
    &:has(.element .sect02) {
      --main-color: var(--type2);
    }
    &:has(.element .sect03) {
      --main-color: var(--type3);
    }
    &:has(.element .sect04) {
      --main-color: var(--type4);
    }
    &:has(.element .sect05) {
      --main-color: var(--type5);
    }
    &:has(.element .sect06) {
      --main-color: var(--type6);
    }
    &:has(.element .sect07) {
      --main-color: var(--type7);
    }
    &:has(.element .sect08) {
      --main-color: var(--type8);
    }
    &:has(.element .sect09) {
      --main-color: var(--type9);
    }
  }
  .pignose-calendar-unit-active,
  .pignose-calendar-unit-range {
    overflow: visible;
    position: relative;
  }
  .pignose-calendar-unit.pignose-calendar-unit-range a {
    background-color: transparent;
    border-radius: 0;
    font-weight: bold;
    display: block;
    text-align: left;
    padding-left: 9px;
  }
  /* 주간모드 */

  .calendar-view-toggle {
    display: inline-flex;
    align-items: center;
    height: 30px;
    overflow: hidden;
    background-color: var(--white);
    margin-left: 0;
    vertical-align: top;
    margin: 3px 0 3px 10px;
    button {
      border: 0;
      background: transparent;
      height: 100%;
      padding: 0 12px;
      font-size: 12px;
      line-height: 1;
      color: var(--gray-mid);
      cursor: pointer;

      transition: color 0.2s, background 0.2s;
      border: 1px solid var(--gray-border);
      &:first-child {
        border-radius: 4px 0 0 4px;
        border-right: 0;
      }
      &:last-child {
        border-left: 0;
        border-radius: 0 4px 4px 0;
      }
      &.is-active {
        background-color: var(--main);
        color: #fff;
        border-color: transparent;
      }
    }
  }

  /* 주간모드 전용 헤더 */
  .pignose-week-header {
    display: none;
    width: 100%;
    .weekly-date-wrap {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      font-weight: 600;
    }
    .week-nav {
      background: var(--gray-pale) url(../images/icon/arrow-left.svg)
        no-repeat center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      font-size: 0;
      &.week-next {
        background-image: url(../images/icon/arrow-right.svg);
      }
      &:hover {
        border-color: var(--main);
        color: var(--main);
      }
    }
    .week-toggle-slot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }
  .weekly & {
    .pignose-week-header {
      display: inline-flex;
      border-bottom: 1px solid var(--gray-border);
    }
    .pignose-calendar-body .pignose-calendar-row {
      display: none;
    }
    .pignose-calendar-body .pignose-calendar-row.is-week-visible {
      display: flex;
    }
    .pignose-calendar-header {
      display: none;
    }
    .pignose-calendar-body {
      .pignose-calendar-row {
        flex-direction: column;
      }
    }
    .pignose-calendar-unit {
      width: 100%;
      display: inline-flex;
      flex-wrap: nowrap;
      > a {
        flex-direction: column;
        height: auto;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 0;
        font-weight: bold;
        height: auto;
        line-height: initial;
        &::after {
          font-weight: normal;
          margin-right: 5px;
        }
      }
      &.pignose-calendar-unit-active {
        > a {
          background-color: transparent;
          color: inherit;
        }
      }
    }

    .element {
      padding: 6px;
      .district {
        flex-direction: row;
        align-items: flex-start;
        @media (max-width: 812px) {
          flex-direction: column;
          width: 100%;
          .ctg,
          .schedule {
            width: 100%;
          }
        }
        &:has(.schedules) {
          flex-wrap: wrap;
        }
        .weekly & {
          @media (min-width: 812px) {
            .ctg {
              flex-direction: row;
              flex-wrap: wrap;
              padding-top: 36px;
              .ctg-name {
                position: absolute;
                top: 0;
                height: 36px;
              }
              .schedule {
                width: max-content;
              }
            }
          }
        }
      }
      .schedule-wrapper {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: fit-content;
        .title {
          margin: 0;
          padding: 0;
        }
        .schedules {
          .schedule {
            width: auto;
            flex-grow: 0;
          }
        }
      }
    }
  }

  .weekly & .pignose-calendar-row > div {
    &:nth-child(1) > a:first-of-type::after {
      content: "일";
      margin-left: 5px;
      white-space: nowrap;
      font-weight: normal;
      font-size: 0.9rem;
    }
    &:nth-child(2) > a:first-of-type::after {
      content: "월";
      margin-left: 5px;
      white-space: nowrap;
      font-weight: normal;
      font-size: 0.9rem;
    }
    &:nth-child(3) > a:first-of-type::after {
      content: "화";
      margin-left: 5px;
      white-space: nowrap;
      font-weight: normal;
      font-size: 0.9rem;
    }
    &:nth-child(4) > a:first-of-type::after {
      content: "수";
      margin-left: 5px;
      white-space: nowrap;
      font-weight: normal;
      font-size: 0.9rem;
    }
    &:nth-child(5) > a:first-of-type::after {
      content: "목";
      margin-left: 5px;
      white-space: nowrap;
      font-weight: normal;
      font-size: 0.9rem;
    }
    &:nth-child(6) > a:first-of-type::after {
      content: "금";
      margin-left: 5px;
      white-space: nowrap;
      font-weight: normal;
      font-size: 0.9rem;
    }
    &:nth-child(7) > a:first-of-type::after {
      content: "토";
      margin-left: 5px;
      white-space: nowrap;
      font-weight: normal;
      font-size: 0.9rem;
    }
  }
  @media (max-width: 812px) {
    &:has(dl.schedule) .pignose-calendar-row > div {
      &:nth-child(1) > a:first-of-type::after {
        content: "일";
        margin-left: 5px;
        white-space: nowrap;
        font-weight: normal;
        font-size: 0.9rem;
      }
      &:nth-child(2) > a:first-of-type::after {
        content: "월";
        margin-left: 5px;
        white-space: nowrap;
        font-weight: normal;
        font-size: 0.9rem;
      }
      &:nth-child(3) > a:first-of-type::after {
        content: "화";
        margin-left: 5px;
        white-space: nowrap;
        font-weight: normal;
        font-size: 0.9rem;
      }
      &:nth-child(4) > a:first-of-type::after {
        content: "수";
        margin-left: 5px;
        white-space: nowrap;
        font-weight: normal;
        font-size: 0.9rem;
      }
      &:nth-child(5) > a:first-of-type::after {
        content: "목";
        margin-left: 5px;
        white-space: nowrap;
        font-weight: normal;
        font-size: 0.9rem;
      }
      &:nth-child(6) > a:first-of-type::after {
        content: "금";
        margin-left: 5px;
        white-space: nowrap;
        font-weight: normal;
        font-size: 0.9rem;
      }
      &:nth-child(7) > a:first-of-type::after {
        content: "토";
        margin-left: 5px;
        white-space: nowrap;
        font-weight: normal;
        font-size: 0.9rem;
      }
    }
  }
}

/* 날짜 범위 선택 스타일 */

.calendar:not(.single) {
  .pignose-calendar-unit-first-active a::after,
  .pignose-calendar-unit-second-active a::after {
    position: absolute;
    left: 40px;
    top: 0;
    z-index: 10;
    content: "입실일";
    line-height: 36px;
    border-radius: 23px;
    font-size: 0.8rem;
    padding: 0 9px;
    font-weight: bold;
    color: initial;
    display: none;
  }
  .pignose-calendar-unit-active,
  .pignose-calendar-unit-range {
    background-color: var(--gray-pale);
  }

  .pignose-calendar-unit-second-active a::after {
    content: "퇴실일";
  }
}
.fc .fc-button-primary {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--gray-pale);
  color: var(--gray-dark);
  border: 0;
  font-size: 12px;
  font-weight: 300;
}
/* ==========================================================================
   상세 정보 및 스케줄 (.district)
   ========================================================================== */
.calendar .district {
  display: none;
  user-select: none;

  .element & {
    opacity: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    padding: 0 5px 10px;
  }

  .tooltip {
    position: absolute;
    top: 50%;
    margin-top: -12px;
    padding: 8px;
    line-height: 1;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.7em;
    pointer-events: none;
    opacity: 0;
    transition: 0.4s;
    &.hover {
      opacity: 1;
    }
  }
  dl.schedule {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    clear: both;
    font-size: 0.8em;
    line-height: 1.2;
    color: var(--gray-dark);
    cursor: pointer;
    transition: background-color 0.4s;
    overflow: hidden;
    overscroll-behavior: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    row-gap: 4px;
    &.active {
      color: #fff;
    }
    &.selected {
      box-shadow: 0 0 0 1px var(--main-color);
      background-color: rgba(255, 255, 255, 0.9);
      color: var(--main-color);
    }
    &.soldout,
    &.disable {
      cursor: no-drop;
      pointer-events: none;
      z-index: 0;
      dt,
      .remain {
        background-color: var(--gray-border);
      }
      dd {
        color: var(--gray-border);
      }
    }

    dt,
    .remain {
      height: 18px;
      min-width: 18px;
      line-height: 18px;
      font-weight: bold;
      text-align: center;
      border-radius: 50em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      float: left;
      padding: 0 4px;
      background-color: var(--color);
      &:has(span) {
        min-width: 40px;
        width: auto;
        padding: 0 6px;
        border-radius: 10em;
      }
      .total::before {
        content: "/";
        font-weight: normal;
        margin: 0 1px;
      }
    }
    dd {
      color: var(--gray-mid);
    }
    dd.time {
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 2px;
      font-weight: bold;
      color: inherit;
      &::before {
        content: "schedule";
        font-family: "Material symbols sharp";
        font-weight: 400;
      }
    }

    /* 섹션별 호버 효과 */
    &.over dt {
      background-color: var(--white);
      color: var(--color);
      border: 1px solid var(--color);
    }
    &.sect01.over dt {
      --color: var(--type1);
    }
    &.sect02.over dt {
      --color: var(--type2);
    }
    &.sect03.over dt {
      --color: var(--type3);
    }
    &.sect04.over dt {
      --color: var(--type4);
    }
    &.sect05.over dt {
      --color: var(--type5);
    }
    &.sect06.over dt {
      --color: var(--type6);
    }
    &.sect07.over dt {
      --color: var(--type7);
    }
    &.sect08.over dt {
      --color: var(--type8);
    }
    &.sect09.over dt {
      --color: var(--type9);
    }

    span {
      display: inline-block;
    }
    &.disable {
      color: var(--gray-light);
      text-decoration: line-through;
      background-color: transparent;
      border-style: dashed;
      dd {
        color: var(--gray-light);
      }
      dt {
        background-color: var(--gray-light);
      }
    }
    &.my-reservation {
      border-color: #4caf50;
      border-style: solid;
      background-color: rgba(76, 175, 80, 0.08);
      color: #4caf50;
      text-decoration: none;
      dd {
        color: #4caf50;
      }
      dt {
        background-color: #4caf50;
      }
    }
  }

  dl.nonclick {
    padding: 10px;
    dt {
      background-color: transparent;
      color: var(--color);
      border: 1px solid var(--color);
      width: fit-content;
      border-radius: 3em;
      padding: 0 6px;
    }
  }

  /* 클릭 가능한 카드 */
  dl.clickable {
    border: 1px solid var(--gray-border);
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    &.on {
      color: #fff;
      border-color: transparent;
      h4.name {
        color: #fff;
      }
      dt {
        background-color: rgba(0, 0, 0, 0.2);
      }
    }
  }

  /* 카테고리 블록 */
  .ctg {
    display: flex;
    flex-direction: column;
    gap: 5px;
    position: relative;
    padding: 5px;
    border-radius: 5px;
    overflow: visible;
    background-color: color-mix(in srgb, var(--color) 8%, transparent);

    .ctg-name {
      font-size: 14px;
      padding: 5px;
      display: flex;
      color: rgba(0, 0, 0, 0.8);
      align-items: center;
      gap: 5px;
      .material-symbols-sharp {
        font-weight: normal;
      }
    }
    dl {
      width: 100%;
      > div {
        flex-grow: 1;
      }
      .location {
        color: var(--gray-dark);
      }

      background-color: var(--white);
      z-index: 2;
      position: relative;
      border-color: transparent;
      display: flex;
      width: 100%;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 2px;
      .title {
        display: flex;
        gap: 5px;
        align-items: baseline;
        dt {
          margin: 0;
          flex-shrink: 0;
        }
      }
      &.on,
      &.active {
        > * {
          color: #fff;
        }
        dd.description {
          color: #fff;
          opacity: 0.6;
        }
        color: #fff;
        dd {
          color: #fff;
        }
        background: var(--color);
        dt,
        .remain {
          background-color: rgba(0, 0, 0, 0.3);
        }
      }

      &.notyet {
        background-color: transparent;
        border: 2px dashed rgba(0, 0, 0, 0.1);
        cursor: not-allowed;
        .title,
        .time {
          opacity: 0.6;
        }
        dd strong {
          word-break: keep-all;
          color: var(--gray-dark);
          .material-symbols-sharp {
            font-size: 1.2em;
            vertical-align: text-bottom;
            padding: 0;
            margin-right: 2px;
          }
        }
      }
    }
  }

  dl:has(h4.name) {
    flex-wrap: wrap;
    color: var(--color);
  }

  &:has(.ctg) {
    gap: 5px;
  }
  .schedule-wrapper {
    .title {
      font-size: 12px;
      color: var(--map-color);
      padding: 5px;
      margin-bottom: 5px;
      display: flex;
      gap: 3px;
      &::before {
        font-size: 1.2em;
        content: "deployed_code";
        font-family: "Material Symbols Sharp";
      }
    }
    padding: 5px;
    background-color: color-mix(in srgb, var(--color) 5%, #000 5%);
    border-radius: 6px;
  }
  .schedules {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    position: relative;

    .schedule {
      flex-grow: 0;
      border: 0;
      width: calc(50% - 1px);
      dd:before {
        display: none;
      }
      @media (max-width: 812px) {
        width: calc(50% - 2px);
        flex-grow: 0;
        margin: 0;
      }
    }
  }
  .schedule {
    pointer-events: all;
  }
}
.schedule-go-next {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  left: 0;
  top: 0;
  margin: 0;
  cursor: pointer;
  gap: 8px;

  pointer-events: auto;
  .btn {
    cursor: pointer;
    padding: 8px 12px;
    height: auto;
    line-height: initial;
    border: 0;
    height: 36px;
    display: inline-flex;
    align-items: center;
    pointer-events: all;
    &::before {
      font-weight: 400;
      content: "arrow_cool_down";
      font-family: "Material Symbols Sharp";
    }
    &.reset {
      aspect-ratio: 1/1;
      padding: 0;
      background: var(--white);
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      color: var(--gray-mid);
      &::before {
        font-size: 1.2em;
        content: "refresh";
      }
    }
  }
}

.calendar .schedules {
  position: relative;
}
.calendar .schedule-wrapper {
  position: relative;
}
.calendar .pignose-calendar-unit-disabled .district {
  display: none;
  flex-shrink: 0;
}

/* ==========================================================================
   월 선택기 (.month-picker)
   ========================================================================== */
.month-picker {
  position: relative;

  &.min .selects {
    width: calc(40px * 6);
  }

  .selector {
    display: flex;
    align-items: center;
    gap: 3px;
    position: relative;
    .material-symbols-sharp {
      margin: 0 3px;
      font-weight: 500;
      font-size: 1.1em;
    }
  }

  .selects {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
    width: calc(50px * 6);
    display: none; /* JS로 토글 */
    z-index: 2;
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--white);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    font-size: 0.9em;
    display: flex;
    flex-wrap: wrap;

    .year {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      padding: 0.8em;
    }
    .month {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .sel {
        width: calc(100% / 6);
        aspect-ratio: 1/1;
        text-align: center;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: normal;
        border-top: 1px solid var(--gray-border);
        border-right: 1px solid var(--gray-border);
        box-sizing: border-box;
        &:nth-child(6n) {
          border-right: 0;
        }
        &.on {
          background-color: var(--main);
          color: #fff;
        }
      }
    }
    .current {
      text-align: center;
      padding: 0;
      border: 0;
      font-weight: bold;
      height: auto;
      user-select: none;
      font-size: 1.2em;
    }
  }

  .bottom & .selects {
    bottom: 100%;
    margin: 0 0 10px;
  }
  .inputs:has(& + &) & .selects {
    left: 0;
    transform: none;
  }
}

/* ==========================================================================
   월간 그리드 (.monthly)
   ========================================================================== */
.monthly {
  display: flex;
  flex-direction: column;
  font-weight: 300;
  padding-bottom: 10px;
  ul {
    display: flex;
    li {
      width: calc(100% / 7);
      text-align: center;
    }
  }
  .thead {
    font-weight: bold;
    font-size: 0.8em;
    color: var(--gray-light);
    padding: 5px 0;
  }
  .week {
    li {
      display: flex;
      position: relative;
      height: 42px;
      flex-direction: column;
      > a {
        width: 32px;
        height: 32px;
        margin: auto;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      &.past,
      &.not,
      &.disable {
        color: var(--gray-lighter);
      }
      &.absent > a,
      &.not > a,
      &.disable > a {
        pointer-events: none;
      }
      &.absent > a {
        position: relative;
        &::after {
          content: "";
          position: absolute;
          left: 10%;
          top: 50%;
          width: 80%;
          height: 1px;
          background-color: var(--gray-lighter);
          transform: rotate(-45deg);
        }
      }
      &.attend > a {
        color: var(--mint);
        font-weight: bold;
      }
      &.enter > a {
        color: var(--green);
        font-weight: bold;
      }
      &.has::after {
        content: "";
        display: block;
        margin: -4px auto 0;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: var(--main);
      }
      &.has.on::after {
        display: none;
      }
    }
  }

  section:not(.thumb-cal) & {
    .week li.today > a {
      color: var(--main);
      box-sizing: border-box;
    }
    .week li.on > a {
      color: #fff;
      background-color: var(--main);
    }
  }

  &.weekend .week {
    li:first-child {
      color: var(--red);
      &.past {
        opacity: 0.4;
      }
    }
    li:last-child {
      color: var(--blue);
      &.past {
        opacity: 0.4;
      }
    }
  }
}
.calendar.single.time-schedule {
  &.go-next-open {
    position: relative;
  }
  .ctg.go-next-locked {
    pointer-events: none;
    filter: grayscale(1);
    opacity: 0.45;
  }
}

/* ==========================================================================
   전체화면 캘린더 / 위젯
   ========================================================================== */

/* 모드 활성화 시 body 스타일 */
.date-time-pick-mode,
.huge-widget-mode,
.date-range-pick-mode,
.seat-pick-mode,
.days-pick-mode,
.time-range-pick-mode,
.week-time-pick-mode,
.pick-mode {
  overflow: hidden;
  overscroll-behavior: none;

  .floating {
    display: none;
  }
}

/* 전체화면 캘린더 컨테이너 */
.cal-huge-full,
.huge-widget {
  position: fixed;
  inset: 0 auto 0 0;
  right: -100%;
  height: 100%;
  z-index: 200;
  overflow: hidden;
  overscroll-behavior: none;
  transition: 0.2s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

/* 모드별 활성화 */
.date-time-pick-mode .cal-huge-full.date-time,
.huge-widget-mode .huge-widget,
.seat-pick-mode .huge-widget,
.date-range-pick-mode .range,
.date-range-pick-mode .date-range,
.time-range-pick-mode .time-range,
.week-time-pick-mode .week-time,
.pick-mode .pick,
.modal-on .cal-huge-full.on {
  opacity: 1;
  visibility: visible;
  z-index: 430;
  width: 100%;
  right: 0;
  overflow: hidden;
  pointer-events: all;
  background-color: color-mix(in srgb, var(--black) 60%, transparent);
  backdrop-filter: blur(20px);
}

/* 캘린더 정보 */
.cal-info {
  z-index: 2;
  background-color: #fff;
  display: flex;
  align-items: center;
  gap: var(--padding);
  margin: 0 auto 20px;
  padding: 10px;
  border: 1px solid var(--gray-border);
  border-radius: 80px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  .infos {
    padding: 10px 20px 10px 0;
    display: flex;
    align-items: center;
    .current {
      text-align: center;
      margin-left: 30px;
      h4 {
        color: var(--gray-mid);
        font-size: 0.8em;
      }
    }
    .info h4 {
      color: var(--main-deep);
    }
    .cnt {
      font-weight: 200;
      color: var(--gray-light);
      font-size: 2.1em;
      span {
        color: var(--main-color);
      }
    }
  }
  .thumb {
    background: no-repeat center/cover;
    width: 90px;
    height: 90px;
    &.profile {
      border-radius: 50%;
    }
  }
}

/* 큰 캘린더 위젯 기본 */

.cal-huge.ui-widget.ui-widget-content,
.huge-widget .ui-widget {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  width: 100%;
  margin: 0;
  transition: 0.4s;
  user-select: none;
  background-color: #fff;
  .ui-sect & {
    border-radius: 0;
    box-shadow: none;
  }
}

.cal-huge-full .cal-ment {
  position: relative;
  z-index: 2;
  padding-top: 0.5em;
  margin-bottom: 1em;
}

.cal-huge.ui-widget {
  .focus {
    opacity: 0;
    visibility: hidden;
    height: 0;
    width: 0;
    position: absolute;
    left: 0;
    top: 0;
  }

  .cal-btns {
    height: var(--btn-h);
    line-height: var(--btn-h);
    font-weight: bold;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    a.cancel {
      width: 80px;
      background-color: var(--gray-dark);
      color: #fff;
    }
    a.select-complete {
      flex-grow: 1;
      color: #fff;
      background-color: var(--gray-light);
      transition: 0.5s;
      span {
        opacity: 0.7;
        display: none;
      }
      &.ed {
        background-color: var(--main-color);
        span {
          display: inline;
        }
      }
      &::after {
        content: "이용하실 날짜와 시간을 선택하세요";
      }
    }
  }

  .ui-body {
    flex-grow: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    table {
      border-collapse: collapse;
      table-layout: fixed;
      margin: 0;
      border: 0;
      th,
      td {
        width: calc(100% / 7);
        text-align: left;
        border-top: 1px solid var(--gray-border);
        border-right: 1px solid var(--gray-border);
      }
      td:last-child,
      th:last-child {
        border-right: 0;
      }
      th {
        padding: 10px;
        color: var(--gray-dark);
        &.attendance span + span {
          margin-left: 5px;
        }
        &.attendance.attended {
          background-color: var(--mint-deep);
          color: #fff;
          border: 0;
          border-left: 1px solid rgba(255, 255, 255, 0.2);
          border-right: 1px solid rgba(255, 255, 255, 0.2);
        }
        &.attendance.absent {
          background-color: var(--red-deep);
          color: #fff;
          border: 0;
          border-left: 1px solid rgba(255, 255, 255, 0.2);
          border-right: 1px solid rgba(255, 255, 255, 0.2);
        }
      }
      td {
        height: auto;
        line-height: 1.3;
        width: auto;
        text-align: left;
        vertical-align: top;
        > a,
        > .ui-state-default {
          padding: 10px;
          height: auto;
          line-height: initial;
          text-align: left;
        }
      }
      td.current {
        background-color: var(--gray-dark);
        color: #fff;
        a {
          color: #fff;
        }
        .start .times li {
          border-color: rgba(255, 255, 255, 0.2);
          color: #fff;
        }
        .end .times li {
          background-color: #fff;
          border-color: transparent;
        }
        .times li.disable {
          background-color: var(--gray-mid);
        }
        .time-range .end {
          border-left: 2px dashed rgba(255, 255, 255, 0.2);
        }
        .start .times li p:first-child {
          color: #fff;
        }
      }
      td.ui-datepicker-today a::after {
        content: "오늘";
        margin-left: 5px;
      }
      .holiday {
        background-color: #fe5f576a;
        opacity: 1;
      }
      td.holiday {
        background-color: #fe5f5724;
        opacity: 1;
      }
      :where(.holiday) :where(span, a) {
        color: var(--red);
      }
      td .event {
        font-weight: bold;
        font-size: 1.1em;
        padding: 0 10px;
      }
      td.event-day {
        a {
          color: var(--main-color);
          font-weight: bold;
        }
        .event {
          color: var(--main-color);
          > div > p {
            white-space: normal;
            word-break: break-all;
            color: var(--main-color);
          }
          + div {
            margin-top: 10px;
          }
        }
        &.ui-state-disabled .event,
        &.ui-datepicker-unselectable .event {
          color: var(--gray-mid);
        }
        .event.reserv-day {
          .event-name {
            color: var(--red-color);
            font-weight: bold;
            font-size: 1em;
          }
          p {
            font-weight: normal;
            color: var(--gray-dark);
            font-size: 0.9em;
          }
          .d-day {
            font-size: 0.85em;
            color: #fff;
            background-color: var(--red-color);
            border-radius: 3px;
            display: inline-block;
            padding: 4px 8px;
            font-weight: bold;
            margin-bottom: 5px;
          }
        }
      }
    }
  }
}

/* 시간 범위 선택 레이아웃 */
.time-range {
  display: flex;
  > div {
    flex-grow: 1;
  }
  > .end {
    border-left: 2px dashed var(--gray-border);
  }
  .cal-huge.ui-widget .cal-btns a.select-complete::after {
    content: "입실시간을 먼저 선택하세요";
  }
  .cal-huge.ui-widget .cal-btns a.select-complete.during::after {
    content: "퇴실시간을 선택하세요";
  }
}

/* 선택된 날짜 하이라이트 */
.cal-huge.ui-widget .ui-body td {
  overflow: hidden;
  position: relative;
  &:has(.times li.selected) {
    .ui-state-default {
      font-weight: bold;
    }
    &::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0.1;
      background-color: var(--main-color);
    }
  }
}

/* ==========================================================================
   날짜 다중 선택 (.cal-select-day)
   ========================================================================== */
.cal-select-day.ui-widget.ui-widget-content {
  display: none;
  margin: 60px 0;
  font-size: 1.1em;
  position: absolute;
  z-index: 20;

  &.on {
    display: block;
  }

  .cal-btns {
    margin-top: 20px;
    border-top: 1px solid var(--gray-border);
    display: flex;
    a {
      width: 35%;
      height: var(--input-h);
      line-height: var(--input-h);
      background-color: var(--gray-mid);
      color: #fff;
      text-align: center;
      transition: 0.2s;
      &.select-complete {
        background-color: var(--gray-light);
        width: 65%;
        pointer-events: none;
        &.ed {
          background-color: var(--main-color);
          pointer-events: all;
        }
      }
    }
  }

  .selected-days {
    padding: 10px;
    background-color: var(--gray-pale);
    margin-bottom: -20px;
    h4 {
      font-weight: normal;
      text-align: center;
      font-size: 1em;
      padding: 10px 0;
    }
  }

  .selected-day {
    display: flex;
    flex-wrap: wrap;
    li {
      pointer-events: all;
      padding: 8px;
      border: 1px solid var(--gray-dark);
      font-size: 0.85em;
      border-radius: 3px;
      width: calc(50% - 6px);
      margin: 3px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      user-select: none;
      background-color: #fff;
      i {
        display: block;
        color: var(--gray-mid);
        margin-left: 5px;
        cursor: pointer;
      }
    }
  }
}
.ui-sect .calendar {
  padding: 0;
}
.ui-sect .calendar .calendar-in {
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--gray-border);
  border-bottom: 1px solid var(--gray-border);
}
.ui-sect > .sect:only-child .calendar .calendar-in {
  border-bottom: 0;
}

/* ==========================================================================
   반응형 스타일
   ========================================================================== */

@media (max-width: 812px) {
  .calendar {
    .event {
      .event-name {
      }
    }
    /* 본문 달력 */
    .ui-sect & {
      border-radius: 12px;
      .ui-datepicker .ui-datepicker-header {
        border: 0;
        background-color: var(--gray-pale);
        border-radius: 50em;
        margin: 0 10px;
      }

      .cal-huge.ui-widget .ui-body {
        font-size: 1em;
      }
      .calendar-in {
        border: 0;
      }
    }
    .cal-huge.ui-widget .ui-body table td,
    .pignose-calendar:has(dl.schedule) .pignose-calendar-row > div,
    .weekly .pignose-calendar:has(dl.schedule) .pignose-calendar-row > div {
      &::after {
        display: inline-block;
      }
    }
    .pignose-calendar {
      &:has(dl.schedule) {
        .pignose-calendar-header {
          display: none;
        }
        .pignose-calendar-row {
          display: flex;
          flex-wrap: wrap;
          .element {
            padding: 0;
          }
          .schedule-wrapper {
            .title {
              padding-top: 5px;
            }
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            .schedules {
              width: 100%;
              .schedule {
                width: calc(100% / 6 - 2px);
                padding: 8px;
                line-height: 1;
                text-align: center;
              }
            }
          }
          .pignose-calendar-unit {
            &.pignose-calendar-unit-disabled {
              background-color: var(--gray-pale);
              display: none;
              /* &:has(.event) {
                display: flex;
              } */
            }
            width: 100%;
            justify-content: flex-start;
            flex-wrap: wrap;
            .event {
              width: auto;
            }
            a {
              font-size: 1rem;
              font-weight: bold;
              width: auto;
              height: auto;
              aspect-ratio: initial;
              line-height: 1;
              padding: 15px;
              margin: 0;
              white-space: nowrap;
              text-align: left;
              flex-direction: row;
              &::after {
                margin-left: 5px;
              }
            }
            &.pignose-calendar-unit-active a {
              background: transparent;
              color: inherit;
            }
            &.pignose-calendar-unit-past {
              display: none;
            }
          }
        }
      }
      height: fit-content;
      border: 2px solid var(--white);
      border-radius: 12px;
      overflow: hidden;

      .pignose-calendar-body {
        overflow: hidden;
      }

      .pignose-calendar-unit {
        min-height: auto;
        border-right: 0;

        a {
          margin: 4px auto;
        }
      }

      .pignose-calendar-unit-first-active {
        border-radius: 12px 0 0 12px;
      }

      .pignose-calendar-unit-second-active {
        border-radius: 0 12px 12px 0;
      }

      .pignose-calendar-header {
        &,
        .pignose-calendar-week {
          border: 0;
        }
      }

      .pignose-calendar-top {
        .pignose-calendar-top-date {
          font-size: 16px;
        }
      }

      .pignose-calendar-top-nav.pignose-calendar-top-prev,
      .pignose-calendar-top-nav.pignose-calendar-top-next {
        width: 30px;
        height: 30px;
        background-size: auto 10px;
      }
    }
    .district {
      dl.schedule {
        justify-content: center;
        margin: auto;
        font-size: 1.1em;
        padding: 10px;
        border-radius: 6px;
        dt {
          font-size: 1em;
          font-size: 10px;
          width: 20px;
          height: 20px;
          line-height: 20px;
          height: initial;
          line-height: 1;
          border-radius: 30px;
          aspect-ratio: 1 / 1;
          font-size: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: auto;

          flex-shrink: 0;
        }

        dd.description {
          display: block;
          .active & {
            color: #fff;
            opacity: 0.6;
          }
        }
        .title .name {
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .time {
          flex-shrink: 0;
        }
      }

      .pignose-calendar-button-schedule-container {
        justify-content: center;
      }
    }
  }
}



/* ---- global/css/components/clock.css ---- */
/* ==========================================================================
   시계 (Clock) 스타일
   ========================================================================== */
.time-clock-set {
  display: flex;
  gap: 20%;
  row-gap: 2em;
  > div {
    > h4 {
      margin-bottom: 15px;
      color: var(--gray-mid);
    }
    &.holidays {
      > h4 {
        text-align: center;
      }
    }
  }
}
.time-clock {
  display: flex;
  flex-wrap: wrap;
  width: 100% !important;
  --size: 120px;
  --border: 4px;
  gap: 5em;

  > div {
    position: relative;

    &.thismonth {
      background-color: var(--gray-lightest);
      border-radius: 8px;

      &::before {
        font-size: 0.8em;
        position: absolute;
        left: 20px;
        top: 20px;
        color: var(--main-color);
        font-weight: bold;
      }
    }
  }

  .infos {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    line-height: 1.3;
    flex-direction: column;

    h3 {
      font-size: 1em;
      color: var(--gray-mid);
    }

    h4 {
      font-size: 1.3em;
      color: var(--main-color);

      &:has(.closed) {
        color: var(--red-color);
      }
    }
    .time {
      font-size: 1.6em;
      font-weight: 200;
      font-family: "Pretendard";
    }
    h5 {
      font-size: 1.1em;
      font-weight: normal;
    }
    p {
      font-size: 14px;
      color: var(--gray-mid);
    }
  }

  .status {
    background-color: var(--main-color);
    font-size: 0.7em;
    border-radius: 2em;
    padding: 8px 15px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    margin-top: -4px;
    margin-left: 5px;
    color: #fff;
  }

  &.horizon {
    margin: 0;
    justify-content: flex-start;
    --size: 100px;
    .status {
      margin-left: 0;

      &.closed {
        background-color: var(--red-color);
      }
    }

    > div {
      flex-grow: 1;
      width: auto;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      gap: 1.3em;
      padding: 0;

      &.current {
        position: relative;
        padding: 0.7em;
        padding-right: 4em;
        border-radius: 50em;
      }
    }

    .infos {
      text-align: left;
      font-size: 1em;
      margin: 0;
      line-height: 1.3;
      h3 {
        font-size: 1em;
      }
      .time {
        font-family: inherit;
        font-weight: bold;
        font-size: 1.5em;
      }
      h4 {
        font-size: 1.3em;
      }
    }
  }

  .current::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--green);
    opacity: 0.08;
    left: 0;
    top: 0;
    border-radius: 50em;
  }
  .holiday {
    --main-color: var(--red);
    .clock {
      background: conic-gradient(
        from 0deg,
        color-mix(in srgb, var(--red) 50%, transparent) 0%,
        var(--white) 100%
      );
      &::after {
      }
    }
  }
}

.clock-frame {
  box-shadow: 0 20px 34px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  width: var(--size);
  height: var(--size);
  margin: auto;
  position: relative;
  --h: 0;
  --r: 0;
  --b: 0;
  /* 시계 타입별 높이 변수 설정 */
  &.t1 {
    --h: 1;
  }
  &.t2 {
    --h: 2;
  }
  &.t3 {
    --h: 3;
  }
  &.t4 {
    --h: 4;
  }
  &.t5 {
    --h: 5;
  }
  &.t6 {
    --h: 6;
  }
  &.t7 {
    --h: 7;
  }
  &.t8 {
    --h: 8;
  }
  &.t9 {
    --h: 9;
  }
  &.t10 {
    --h: 10;
  }
  &.t11 {
    --h: 11;
  }
  &.t12 {
    --h: 12;
  }
  /* 휴게시간(시작 지점) */
  &.b1 {
    --b: 1;
  }
  &.b2 {
    --b: 2;
  }
  &.b3 {
    --b: 3;
  }
  &.b4 {
    --b: 4;
  }
  &.b5 {
    --b: 5;
  }
  &.b6 {
    --b: 6;
  }
  &.b7 {
    --b: 7;
  }
  &.b8 {
    --b: 8;
  }
  &.b9 {
    --b: 9;
  }
  &.b10 {
    --b: 10;
  }
  &.b11 {
    --b: 11;
  }
  &.b12 {
    --b: 12;
  }
  /* 휴게시간(길이) */
  &.r1 {
    --r: 1;
  }
  &.r2 {
    --r: 2;
  }
  &.r3 {
    --r: 3;
  }
  &.r4 {
    --r: 4;
  }
  &.r5 {
    --r: 5;
  }
  &.r6 {
    --r: 6;
  }
  &.r7 {
    --r: 7;
  }
  &.r8 {
    --r: 8;
  }
  &.r9 {
    --r: 9;
  }
  &.r10 {
    --r: 10;
  }
  &.r11 {
    --r: 11;
  }
  &.r12 {
    --r: 12;
  }
  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
    z-index: 5;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.5) 100%
    );
    animation: light-rotate 3s linear infinite;
  }
  .clock {
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border) solid #fff;
    box-shadow: inset 10px 10px 24px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    position: relative;
    width: var(--size);
    height: var(--size);
    background: conic-gradient(
      from 0deg,
      var(--main-light) 0%,
      var(--main-color) calc(var(--h) * (100% / 12)),
      var(--white) calc(var(--h) * (100% / 12)),
      var(--white) 100%
    );

    .brake &::before {
      content: "";
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 1;
      border-radius: 50%;
      background: conic-gradient(
        from 0deg,
        var(--red-color) 0%,
        var(--red) calc(var(--r) * (100% / 12)),
        transparent calc(var(--r) * (100% / 12)),
        transparent 100%
      );
      transform: rotate(calc(30deg * var(--b)));
    }
    &::after {
      width: 10%;
      aspect-ratio: 1/1;
      content: "";
      border: 0.25em solid #fff;
      background-color: var(--main-color);
      border-radius: 50%;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      position: relative;
      z-index: 5;
    }

    .hour,
    .min {
      width: var(--border);
      background-color: #fff;
      border-radius: var(--border);
      position: absolute;
      left: 50%;
      margin-left: -2px;
      transform-origin: center bottom;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
      z-index: 2;
    }

    .hour {
      height: 35%;
      top: 15%;
      transform: rotate(calc((360 / 12) * (var(--h) * 1deg)));
    }

    .min {
      height: 50%;
      top: 5%;
    }

    .openToclose {
      position: absolute;
      color: #fff;
      font-weight: bold;
      top: 12%;
      font-size: 0.8em;
    }
  }
}
@keyframes light-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ==========================================================================
   반응형(Responsive) 스타일
   ========================================================================== */
@media (max-width: 812px) {
  .time-clock-set {
    display: flex;
    flex-direction: column;

    > div {
      width: 100%;
      > h4 {
        color: var(--gray-dark);
      }
      .time-clock {
        width: 100%;
        justify-content: space-between;
        gap: 1em;
        > div {
          display: flex;
          flex-direction: row;
          align-items: center;

          justify-content: space-between;
          gap: 15px;
          .infos {
            margin: 0;
            text-align: left;
          }
        }

        .clock-frame {
          --size: 70px;
          --border: 3px;
        }
      }
      &.holidays {
        > h4 {
          text-align: left;
        }
      }
    }
  }
  .sub .sub-detail > .time-clock.horizon {
    margin-bottom: 0;

    > div {
      margin: 0 20px;
      border-radius: 8px;
      padding: 20px 10px 20px 20px;
    }
  }

  .time-clock {
    --size: 90px;
    &:has(> div:nth-child(3)) {
      justify-content: space-between;
      > div {
        flex-grow: 0;
      }
    }
    > div {
      .infos {
        line-height: 1.4;
        text-align: center;
        h3 {
          font-size: 1em;

          .status {
            padding: 0.5em 1em;
            font-size: 0.7em;
          }
        }
        h4 {
          font-size: 1.4em;
        }
      }
    }
    &.horizon {
      --size: 90px;
      gap: 0;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      row-gap: 3em;
      justify-content: space-between;
      > div {
        flex-direction: 0;
        flex-direction: column;
        .infos {
          line-height: 1.4;
          text-align: center;
        }
      }
    }

    &:has(.current) {
      gap: 0;

      > div {
        padding: 0.7em;
        padding-right: 3em;
        border-radius: 50em;
      }
    }
  }
}



/* ---- global/css/components/datepicker.css ---- */
/* 데이트피커 */
.ui-widget {
  &.ui-widget-content {
    border: 1px solid var(--gray-dark);
    width: 400px;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    overscroll-behavior: none;
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.1);
  }
}

#ui-datepicker-div {
  margin-left: -360px;
  margin-top: -60px;
  position: absolute;
}

.huge-widget {
  .ui-widget {
    border: 1px solid var(--gray-dark);
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    overscroll-behavior: none;
    box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.1);

    .sight {
      padding: var(--padding);
    }
  }

  > .head.date {
    padding-bottom: 15px;
    position: relative;
    z-index: 2;

    h3 {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      font-size: 1.2em;
    }
  }
}

.ui-datepicker {
  th {
    color: var(--gray-light);
    font-size: 12px;
    text-align: center;
    padding: 10px 0;
  }

  table {
    border: none;
  }

  .ui-datepicker-header {
    background-color: transparent;
    border: none;
    padding: 10px;
    height: 56px;
  }

  .ui-datepicker-title {
    line-height: var(--ui-input);
    color: var(--gray-dark);
  }

  .ui-datepicker-prev,
  .ui-datepicker-next {
    top: 10px;
    width: 36px;
    height: var(--ui-input);
    background: var(--gray-pale) var(--icon) no-repeat center;
  }

  .ui-datepicker-prev {
    left: 10px;
    --icon: url(/youthCenter/icon/arrow-left.svg);
  }

  .ui-datepicker-next {
    right: 10px;
    --icon: url(/youthCenter/icon/arrow-right.svg);
  }
}

.ui-widget-header {
  background-color: transparent;
  border: none;
  padding: 10px;
  height: 56px;

  a {
    background-color: var(--gray-pale);
    border-radius: 50%;
    top: 10px;
    display: inline-block;

    &:hover {
      border: none;
    }
  }
}

:is(
    .ui-state-default,
    .ui-widget-content .ui-state-default,
    .ui-widget-header .ui-state-default,
    .ui-button,
    html .ui-button.ui-state-disabled:hover,
    html .ui-button.ui-state-disabled:active
  ) {
  color: initial;
  border: none;
  text-align: center;
  background-color: transparent;
  height: calc(298px / 7);
  width: calc(298px / 7);
  line-height: calc(298px / 7);
  padding: 0;
}

:is(.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight) {
  color: var(--main-color);
}

:is(.ui-state-active, .ui-widget-content .ui-state-active) {
  background-color: var(--gray-dark);
  color: #fff;
  border-radius: 100px;
}

.visual {
  .ui-datepicker {
    .ui-datepicker-title {
      color: #fff;
    }
  }
}
@media (max-width: 812px) {
  #ui-datepicker-div {
    margin-left: initial;
    margin-top: initial;
  }
  .ui-widget {
    &.ui-widget-content {
      width: 100%;
    }
  }
}



/* ---- global/css/components/file.css ---- */
/*file*/
.filebox {
  display: flex;
  margin-bottom: 5px;
  overflow: hidden;
  overscroll-behavior: none;
  position: relative;
}
.filebox input[type='file'] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  overscroll-behavior: none;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.filebox label {
  display: inline-block;
  line-height: var(--input-h);
  height: var(--input-h);
  border: 1px solid var(--gray-border);
  padding: 0 10px;
  vertical-align: top;
  margin-left: 0;
  border-radius: 0 5px 5px 0;
  margin: 0;
}
/* Upload filename input styling */
.filebox .upload-name { flex-grow: 1; border-right: 0; border-radius: 5px 0 0 5px; }
/* .swiper-wrapper[aria-live='off'] + .swiper-pagination-progressbar {
  opacity: 0;
} */



/* ---- global/css/components/filter-control.css ---- */
/* 필터 고정 시 원래 높이 유지 */
.calendar {
  --filter-h: 0px;
  &.filter-fixed {
    padding-top: var(--filter-h);
    body:not(.scrolled) & {
      padding-top: 0;
    }
  }

  .filter-control {
    padding: 10px;
  }
}

/* 공통 필터 컨트롤 스타일 */
.filter-control {
  & + .accordion {
    margin-top: 12px;
  }
  &.scroll-x {
    overflow-x: auto;
    flex-wrap: nowrap;

    .filter-targets {
      flex-wrap: nowrap;
    }
  }
  .sect:has(&) {
    position: relative;
  }
  &:not(:has(.filter-targets button)) {
    position: absolute;
    margin-top: -45px;
    right: 0;
  }
  & + .list {
    margin-top: 20px;
    &.horizon.prices {
      margin-top: 10px;
    }
  }
  user-select: none;
  display: flex;
  gap: 8px;
  column-gap: 30px;
  align-items: center;
  font-size: 14px;
  justify-content: space-between;

  .filter-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-grow: 0;
    flex-shrink: 0;
    order: 3;
  }

  .filter-order.selectbox {
    border: 0;
    padding: 0;
    box-shadow: none;
    .selector {
      height: fit-content;
      border: 0;
      padding: 0;
      background: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--gray-dark);
      &::after {
        position: static;
      }
    }
    > ul {
      left: auto;
      right: 0;
    }
  }
  &.is-calendar {
    .filter-targets {
      justify-content: center;
    }
  }
  .filter-targets {
    display: flex;
    order: 1;
    flex-grow: 1;
    flex-wrap: wrap;
  }
  button {
    padding: 10px 16px;
    border: 1px solid var(--gray-border);
    background: #fff;
    cursor: pointer;
    font-size: inherit;
    transition: border-color 0.15s ease, color 0.15s ease;
    position: relative;
    z-index: 1;
    margin-left: -1px;
    &:first-child {
      border-radius: 6px 0 0 6px;
    }
    &:last-child {
      border-radius: 0 6px 6px 0;
    }
    &.active {
      z-index: 2;
      background: var(--main-color);
      border-color: var(--main-color);
      color: #fff;
    }

    &:hover:not(.active) {
      border-color: var(--main-color);
      color: var(--main-color);
      z-index: 2;
    }
  }

  /* 지난 일정 보기 버튼 그룹 */
  .filter-past-toggle {
    display: flex;
    align-items: center;
    order: 2;
    .filter-past-btn {
      cursor: pointer;
      color: var(--gray-light);
      font-weight: bold;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      &::before {
        font-size: 1.2em;
        font-weight: normal;
        content: "check";
        font-family: "Material Symbols Sharp";
      }
      &::after {
        content: "지난 일정 보기";
      }
      &.active {
        color: var(--gray-dark);
        &::before {
          color: var(--main-color);
        }
      }
    }
  }
  & {
    .filter-targets {
      gap: 5px;
    }
    button {
      color: var(--gray-mid);
      border-radius: 10em;
      margin: 0;
      opacity: 1;
      &:first-child,
      &:last-child {
        border-radius: 10em;
      }
    }
    button.active {
      opacity: 1;
      &[data-target="ALL"] {
        border-color: var(--main-color);
        background-color: var(--main-color);
        color: #fff;
      }
      &:hover {
      }
    }
  }
  &.mode-toggle {
    .filter-targets {
      gap: 5px;
    }
    button {
      transition: initial;
      border-style: dashed;
      background: var(--gray-pale);
      color: var(--gray-light);
      opacity: 0.8;
      border-radius: 10em;
      margin: 0;

      &:hover {
        color: inherit;
        border-color: var(--gray-border);
      }
      &::after {
        content: "visibility_off";
        font-family: "Material symbols sharp";
        font-size: 1.2em;
        vertical-align: text-top;
        margin-left: 6px;
        opacity: 0.5;
        line-height: 1;
      }
    }
    button.active {
      border-style: solid;
      border-color: var(--gray-border);
      background: var(--white);
      color: var(--gray-dark);
      opacity: 1;
      &[data-target="ALL"] {
        border-color: var(--main-color);
        background-color: var(--main-color);
        color: #fff;
      }
      &:hover {
        border: 1px dashed var(--gray-border);
        background-color: var(--gray-pale);
        color: var(--gray-light);
      }
      &::after {
        content: "visibility";
      }
    }
  }

  /* 달력형 필터 컨트롤 보조 스타일 */
  .calendar & {
    width: 100%;
    justify-content: center;
  }
  /* 스크롤시 고정 필터 */
  .scrolled .filter-fixed & {
    /* GNB 높이를 고려한 달력 필터 고정 위치 */
    position: fixed;
    top: calc(var(--top-h) + 10px);
    .wrap:has(.gnb .tab-menu) & {
      top: calc(var(--top-h) + var(--tab-h));
    }
    left: 0;
    z-index: 35;
    overflow-x: auto;
    flex-wrap: nowrap;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    width: max-content;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(var(--width) - 20px);
    justify-content: flex-start;
    padding-bottom: 0;
    border-radius: 6em;
    padding: 0;
    .filter-targets {
      flex-wrap: nowrap;
      max-width: 1000%;
      gap: 0;
      button {
        padding: 12px 18px;
        border-top-color: transparent;
        border-bottom-color: transparent;
        white-space: nowrap;
        border: 0;
        background-color: transparent;
        &:hover {
          border-color: var(--main-color);
        }
        &.active[data-target="ALL"],
        &.active {
          background-color: var(--main-color);
        }
        .mode-toggle & {
        }
      }
      width: fit-content;
      padding: 2px;
    }
    &.mode-toggle {
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 10em;
      .filter-targets {
        gap: 20px;
        padding: 2px;
        button {
          border-color: transparent;
          white-space: nowrap;
          background-color: transparent;
          &:hover {
            border-color: transparent;
          }
          &:not([data-target="ALL"]) {
            padding-left: 0;
            padding-right: 0;
          }
          &:last-child {
            margin-right: 20px;
          }
        }
      }
    }
  }
  /* 반응형 */
  @media (max-width: 1100px) {
    padding-bottom: 0;
    padding-left: 1px;
    padding: 0;
    row-gap: 12px;
    .calendar & {
      padding: 0;
    }
    & + .list {
      margin-top: 14px;
    }
    &:not(:has(.filter-targets button)) {
      position: static;
      margin-top: 0;
      right: 0;
      .filter-targets {
        display: none;
      }
    }
    button {
      margin-top: -1px;
      flex-grow: 1;
      &:first-child,
      &:last-child {
        border-radius: 0;
      }
    }
    & {
      .ui-sect & {
        padding: 2px;
      }
      flex-wrap: wrap;
      gap: 4px;
      button {
        flex-grow: 0;
        padding: 8px 12px;
        border-radius: 10em;
        &:first-child,
        &:last-child {
          border-radius: 10em;
        }
      }
    }
    &.mode-toggle {
      .ui-sect & {
        padding: 2px;
      }
      flex-wrap: wrap;
      button {
        flex-grow: 0;
        padding: 8px 6px 8px 10px;
        border-radius: 10em;
        &::after {
          margin-left: 3px;
        }
      }
    }
    .calendar & {
      padding-top: 10px;
      margin: 0 -1px -1px -1px;
      width: initial;
    }
    .scrolled .filter-fixed & {
      margin-top: 5px;
      justify-content: flex-start;
      max-width: calc(100% - 20px);

      & .filter-targets {
        width: initial;
        max-width: 1000%;
        flex-wrap: nowrap;
        button {
          border: 0;
          border-radius: 0;
        }
        .mode-toggle & {
          button {
            padding: 8px 8px;
            white-space: nowrap;
            background-color: transparent;
            &[data-target="ALL"] {
              color: var(--main-color);
            }
            .scrolled &[data-target="ALL"] {
              color: #fff;
            }
          }
        }
      }
    }
    .filter-targets {
      font-size: 12px;
      flex-wrap: wrap;
      width: 100%;
    }
    .filter-toolbar {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
    .filter-order.selectbox {
    }
  }
}



/* ---- global/css/components/floating.css ---- */
/* 플로팅 */
.floating {
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: static;
  width: initial;
  border-radius: 0;
  border-bottom: 1px solid var(--gray-border);

  .float-el {
    border-radius: 12px 12px 0 0;
    background-color: color-mix(in srgb, var(--main-color) 4%, transparent);
    padding: 20px;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 1);
    border-bottom: 0;
    position: relative;
  }
  .float-con {
    display: flex;
    gap: 1em;
    .btnlook {
      display: block;
      text-align: center;
      width: fit-content;
      font-weight: bold;
      margin-top: 5px;
      font-size: 0.8em;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--gray-dark);
      font-size: 13px;
    }
    .icon {
      background-position: center;
      height: auto;
      aspect-ratio: 1/1.2;
      width: 44px;
      flex-shrink: 0;
      position: relative;
      img {
        width: 100%;
      }
    }
    .title h1 {
      line-height: inherit;
      font-size: 1em;
    }

    > p {
      font-size: 12px;
      line-height: inherit;
      word-break: keep-all;
    }
  }
  .d-day {
    border-radius: 30px;
    position: absolute;
    z-index: 3;
    bottom: 5px;
    display: flex;
    text-align: center;
    font-size: 0.8em;
    padding: 5px 8px;
    background-color: rgba(213, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    font-weight: bold;
    color: #fff;
    box-shadow: 0 5px 20px rgba(213, 0, 0, 0.3);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .title {
    display: flex;
    flex-direction: column;
    justify-content: center;

    h1 {
      font-size: 0.9em;
      word-break: break-all;
      word-break: keep-all;
    }
  }

  p {
    font-size: 12px;
    line-height: 1.4;
    color: var(--gray-mid);
    word-break: break-all;
    white-space: normal;

    span {
      color: var(--main-color);
    }
  }

  .btns {
    font-size: 0.7em;
    margin-top: 10px;
    height: auto;

    input[type='checkbox'] + label {
      margin: 0;
      line-height: 1;
      height: initial;
      &::before {
        width: 12px;
        height: 12px;
        margin-right: 3px;
      }
    }
  }

  .close {
    position: absolute;
    padding: 10px;
    top: 0;
    right: 0;
    z-index: 20;
    font-size: 13px;
    opacity: 0.5;
  }
  &.expire .float-el {
    background-color: color-mix(in srgb, var(--red) 10%, var(--white));
  }
  &.expire {
    --main-color: var(--red);
    .d-day {
      background-color: var(--red);
      color: #fff;
      font-weight: bold;
      border: 0;
    }
    .icon {
      img {
        filter: hue-rotate(160deg);
      }
    }
    .title h1 {
      color: var(--red);
    }
  }
}

@media (max-width: 812px) {
  .floating {
    padding: 10px;
    border: 0;
    .float-el {
      border-radius: 8px;
      background-color: transparent;
      width: 100%;
      background-color: var(--white);
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      padding: 15px;

      .float-con {
        align-items: center;
        gap: 1.5em;
        .title {
          margin-bottom: 0;

          h1 {
            font-size: 1.15em;
            br {
              display: none;
            }
          }
        }
        .d-day {
          bottom: -5px;
        }
        .icon {
          width: 44px;
          img {
            width: auto;
          }
        }
        .btnlook {
          font-size: 12px;
          margin-top: 3px;
        }
      }
    }
    &.active {
      right: 0;
      transition: 0.6s;
    }
    .close {
      font-size: 1.15em;
    }
  }

  .modal {
    .modal-popup .popup-content .descript .img-set img {
      margin: 0 3px;
      height: auto;
      max-width: calc(33.3% - 6px);
    }

    &.ticket .modal-popup .popup-content {
      .subscr,
      .ticket-img {
        width: initial;
      }
    }
  }

  .huge-widget.map-district .ui-widget .ui-body .map-picker :where(.map-area, .map-area1200) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .scrolled {
    .main .floating,
    .ui-fix .sub .floating {
      top: auto !important;
      z-index: 151;
    }
  }

  .cal-huge.ui-widget {
    padding: 0;
    .ui-widget-content .ui-state-default {
      padding: 0;
    }
    .ui-body table tr td .element {
      padding: 0;
    }
  }

  .paying {
    .auth {
      .floating {
        display: none;
      }
    }
  }

  .auth {
    .floating {
      right: 0;
      left: 0;
      width: 100%;
      bottom: calc(var(--btn-h) + 20px);
      box-shadow: none;
      z-index: 2 !important;

      > div.float-el {
        width: 100%;
        background-color: #fff;
        color: var(--gray-dark);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
      }

      .btns {
        position: absolute;
        right: 40px;
        top: 3px;
        z-index: 20;
      }

      .icon {
        margin: 0;
      }

      > div .modal-call {
        flex-direction: row;
        display: flex;
        align-items: center;
        gap: 10px;
        text-align: left;
      }
    }

    &:has(.reserv-ui .btns + .btns) {
      .floating {
        bottom: 150px;
        width: calc(100% - 20px);
        left: 10px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
      }
    }
  }
}



/* ---- global/css/components/grid-fixed-scroll.css ---- */
/* 그리드 세로형 좌측 고정 우측 스크롤 */
span.icon {
  & + span.icon {
    margin-left: 5px;
  }

  &::before {
    content: '';
    font-size: 1.2em;
    font-family: 'xeicon';
    display: inline-block;
    vertical-align: middle;
    font-weight: normal;
  }

  &.cash::before {
    content: '\\ebb1';
  }

  &.event::before {
    content: '\\ea3a';
  }

  &.nocadi::before {
    content: '\\ea62';
  }

  &.night::before {
    content: '\\eb10';
  }

  &.duo::before {
    content: '\\e9f9';
  }
}

.grid-left-fixed {
  display: flex;
  width: 100%;
  overflow: hidden;

  table {
    border-collapse: collapse;

    td,
    th {
      height: 52px;
      vertical-align: middle;
      padding: 5px 10px;
      border-right: 1px solid var(--gray-border);
    }

    th {
      &.title {
        width: 99%;
      }

      &.icon {
        width: 1%;
        white-space: nowrap;
        text-align: center;
      }
    }

    &.grid.vertical {
      td:last-child,
      thead th:last-child {
        border-right: 0;
      }
    }
  }

  .left-fixed {
    flex-grow: 0;

    table {
      width: auto;
    }

    td:first-child,
    th:first-child {
      padding-left: 0;
      padding-right: 15px;
    }

    td,
    th {
      border-right: 1px solid var(--gray-lighter);
    }

    th {
      span.icon:first-child {
        margin-left: 5px;
      }

      &.pick-cal {
        text-align: center;

        &::before {
          content: '\\e9a0';
          cursor: pointer;
          font-family: 'xeicon';
          font-size: 1.2em;
          font-weight: normal;
        }
      }
    }

    .name + span.icon {
      margin-left: 5px;
    }
  }

  .right-scrollable {
    flex-grow: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1 0 auto;
    flex-wrap: nowrap;

    th,
    td {
      font-weight: normal;
      color: var(--gray-mid);
      width: calc(100% / var(--weekcnt));
    }

    td {
      white-space: nowrap;
      padding: 5px;

      &.sun,
      &.sat,
      &.holiday {
        background-color: var(--gray-pale);
        color: orangered;

        .cnt {
          color: orangered;
          border-color: orangered;

          &:hover {
            background-color: orangered;
          }
        }
      }

      .cnt {
        margin: auto;
        width: 32px;
        height: 32px;
        line-height: 30px;
        text-align: center;
        border-radius: 50%;
        cursor: pointer;
        border: 1px solid var(--main-color);
        color: var(--main-color);
        background-color: #fff;
        transition: 0.2s ease-in-out;
        position: relative;

        &:hover {
          background-color: var(--main-color);
          color: #fff;
          transform: scale(1.15);
          font-weight: bold;
        }
      }
    }

    .day-week {
      font-size: 0.9em;
      text-align: center;
      padding: 5px;
      line-height: 1.2;

      span {
        display: block;
      }
    }
  }
}

.week2count {
  .grid-left-fixed {
    .right-scrollable {
      th,
      td {
        --weekcnt: 14;
      }
    }
  }
}



/* ---- global/css/components/label.css ---- */
/* ===============================
   라벨(label) 공통 스타일
   =============================== */
.label {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  --color: var(--gray-dark);
  border: 1px solid var(--color);
  color: var(--color);
  flex-shrink: 0;
  font-weight: bold;

  /* 변형: 원형(circle) */
  &.circle {
    border-radius: 50%;
    padding: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background-color: var(--gray-light);
    font-size: 12px;
    color: #fff;
  }
  &.filled {
    background-color: var(--color);
    border-color: var(--color);
    color: #fff;
  }
  &.rounded {
    border-radius: 100em;
  }
  &.main-color {
    --color: var(--main-color);
  }
}

/* ===============================
   반응형
   =============================== */
@media (max-width: 812px) {
}



/* ---- global/css/components/list.css ---- */
/* ========================================
   List Components
======================================== */
/* ========================================
   Base: .list
======================================== */
/* ================================
   리스트(.list) 전체 네스팅 구조
================================ */
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  /* 형제 리스트 */
  & + .list {
    margin-top: 40px;
  }

  /* 공통 이미지 */
  .img {
    background-size: cover;
    background-position: center;
  }
  &.dot {
    flex-direction: column;
    > li {
      &::before {
        content: "•";
        margin-right: 2px;
        opacity: 0.4;
      }
    }
  }
  &.number {
    flex-direction: column;
    counter-reset: number;
    > li {
      &::before {
        counter-increment: number;
        content: counter(number) ".";
        margin-right: 2px;

        font-weight: bold;
      }
    }
  }
  /* 아이템 */
  li {
    /* --- 썸네일 --- */
    .thumb {
      object-fit: cover;

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

      /* swiper 공통 */
      .with-swiper {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;

        .swiper-button-next,
        .swiper-button-prev {
          &::after {
            font-size: 1.3em;
          }
        }

        .swiper-wrapper {
          height: 100% !important;

          li {
            background: no-repeat center/cover;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;

            &.swiper-slide-active {
              cursor: pointer;

              &:hover::before {
                content: "\e97b";
                font-family: "xeicon";
                color: #fff;
                text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
                transition: 0.4s;
                font-size: 3em;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -20px;
                margin-top: -20px;
                display: flex;
                align-items: center;
                justify-content: center;
              }
            }

            .img {
              width: 100%;
              height: 100%;
            }

            .detailed {
              display: none;
            }
          }
        }

        .thumb-swiper {
          overflow: hidden;
          overscroll-behavior: none;
          border-radius: 8px;

          .nav {
            z-index: 20;
            display: none;
          }

          &:hover .nav {
            display: block;
          }
        }

        /* 줌 모드 */
        &.zoom {
          .swiper-button-next::after,
          .swiper-button-prev::after {
            font-size: 4em;
            text-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
          }

          .swiper-button-prev,
          .swiper-button-next {
            padding: 0 16px;
            position: fixed;
            width: 56px;
            height: 56px;
            border-radius: 56px;
            background-color: #fff;
            box-shadow: 0 5px 16px rgb(0 0 0 / 20%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1em;
            z-index: 10;
            cursor: pointer;

            &::after {
              color: var(--gray-dark);
              text-shadow: none;
              font-size: 1.3em;
            }
          }

          .swiper-button-prev {
            left: 20px;
          }

          .swiper-button-next {
            right: 20px;
          }
          .thumb-swiper {
            .nav {
              display: block;
            }
          }
        }
      }

      /* 줌 전체화면 */
      .zoom.with-swiper {
        position: fixed;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        left: 0;
        top: 0;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 1200px);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 1200;

        .close {
          display: flex;
        }

        .swiper-container {
          overflow: hidden;
          overscroll-behavior: none;
          width: var(--width);
          margin: auto;

          .swiper-wrapper {
            width: var(--width);
          }

          &.swiper-container-autoheight .swiper-wrapper {
            align-items: center;
          }
        }

        .thumb-swiper {
          border-radius: 12px;
          transition: 0.4s;
          display: flex;

          .swiper-wrapper {
            li {
              width: var(--width);
              border-radius: 12px;
              display: flex;
              align-items: center;
              z-index: 1;
              overflow: hidden;
              overscroll-behavior: none;
              height: 100%;

              .img {
                aspect-ratio: 16/9;
                border-radius: 12px;
                max-height: 500px;
              }

              .detailed {
                width: 100%;
                display: block;
                color: var(--main-color);
                z-index: 2;
                line-height: 1.3;
                padding: 30px 0;

                h4 {
                  color: var(--main-deep);
                }

                h3 {
                  font-size: 2em;
                }

                p {
                  color: var(--gray-dark);
                  font-size: 1.1em;
                }
              }
            }
          }
        }
      }

      /* 닫기 버튼 */
      .close {
        width: 56px;
        height: 56px;
        border-radius: 56px;
        background-color: var(--red-color);
        box-shadow: 0 5px 16px rgba(0, 0, 0, 0.2);
        display: none;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 24px;
        left: 50%;
        margin-left: -28px;
        font-size: 1.5em;
        z-index: 10;
        cursor: pointer;
        color: #fff;
      }
    }
    &.sect01,
    &.sect02,
    &.sect03,
    &.sect04,
    &.sect05,
    &.sect06,
    &.sect07,
    &.sect08,
    &.sect09 {
      --main-deep: var(--map-color, --main-color);
    }
    .check-item {
      position: absolute;
      top: 10px;
      left: 10px;
    }
    /* --- 상세 영역 --- */
    .infos {
      display: flex;
      flex-grow: 1;
      flex-direction: column;

      .info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        h4.category {
          color: var(--main-deep);
          font-size: 0.9em;

          &.sect01,
          &.sect02,
          &.sect03,
          &.sect04,
          &.sect05,
          &.sect06,
          &.sect07,
          &.sect08,
          &.sect09 {
            color: var(--map-color, --main-color);
          }

          .material-symbols-sharp {
            vertical-align: text-bottom;
          }
        }
        p {
          color: var(--gray-mid);
          &.title,
          &.category {
            color: var(--gray-dark);
          }
        }
      }

      h2 {
        span.num {
          display: inline-block;
          background-color: var(--main-color);
          min-width: 24px;
          height: 24px;
          line-height: 24px;
          text-align: center;
          color: #fff;
          border-radius: 24px;
          font-size: 0.7em;
          margin-right: 5px;
          padding: 0 5px;
          vertical-align: top;

          &::after {
            display: none;
          }

          &.pin {
            background-color: var(--red-color);
          }
        }
      }

      h5 {
        margin-bottom: 10px;
        font-weight: normal;
      }
    }

    &:has(.subinfo) {
      .info {
        p {
          color: var(--gray-dark);
        }
      }
    }
    /* --- 사이클 텍스트 --- */
    .info {
      .cycle-text {
        display: flex;
        flex-wrap: wrap;
        color: var(--gray-mid);
        font-size: 0.9em;
        counter-reset: number;

        li {
          width: auto;
          flex-direction: row;
          align-items: center;

          &::before {
            counter-increment: number;
            content: "" counter(number);
            font-size: 0.8em;
            border-radius: 50%;
            width: 14px;
            height: 14px;
            border: 1px solid var(--gray-mid);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 2px;
          }

          &::after {
            content: "→";
            margin: 0 5px;
            opacity: 0.5;
            display: inline-block;
          }

          &:last-child::after {
            display: none;
          }

          &.return::before {
            content: "1";
          }

          span {
            opacity: 0.5;
            margin: 0 5px;
          }
        }
      }
    }
    a.print {
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      img {
        width: 24px;
      }
      .material-symbols-sharp {
        font-size: 2em;
        font-weight: 200;
      }
    }
    /* 아이템 */
    &.item {
      display: flex;
      padding: 0;
      border-radius: 10px;
      box-shadow: 0 20px 20px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--gray-border);
      align-items: center;
      position: relative;
      background-color: #fff;
      width: auto;
      flex-grow: 0;
      overflow: hidden;
      .count-num {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        row-gap: 0.5em;
        h5 {
          margin: 0;
        }
      }
      .thumb,
      .qr {
        flex-grow: 0;
        flex-shrink: 0;
        aspect-ratio: 1/1;
        width: 160px;
        background-position: center;
        background-size: cover;
        align-self: flex-start;
      }
      .infos {
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex-grow: 1;

        h4 {
          font-size: 1em;
          color: var(--main-color);
        }
        h3 {
          line-height: 1.2;
          font-size: 1.15em;
          &.sub {
            font-size: 1.2em;
          }
        }
        p {
          color: var(--gray-mid);
          font-size: 0.9em;
          &.notice {
            color: var(--gray-dark);
          }
        }
        .option {
          display: flex;
          gap: 5px;
          flex-wrap: wrap;
          margin-top: 15px;
          p {
            padding: 6px 12px;
            border: 1px solid var(--gray-border);
            border-radius: 3px;
            span {
              color: var(--gray-dark);
              font-weight: bold;
            }
          }
        }
        .expire {
          color: var(--red-color);
          font-weight: bold;
          .dday {
            border-color: var(--red-color);
          }
        }
      }
    }
  }

  /* --- 공통 카테고리 --- */
  li h4.category {
    color: var(--main-color);
  }

  /* --- 공통 가격 --- */
  li .price {
    dl {
      dt {
        font-weight: bold;
      }

      dd {
        font-weight: bold;
        color: var(--main-color);
        text-align: left;
        flex-grow: 0;
        font-size: 1.3em;
        font-weight: 300;
        font-family: "pretendard";
        letter-spacing: 0;
      }
    }
  }
}

/* ========================================
   Variant: .list.vertical
======================================== */
.list.vertical {
  display: flex;
  --cell: 2;
  --gap: 20px;
  gap: var(--gap);
  row-gap: calc(var(--padding) * 2);
  justify-content: flex-start;
  &:has(.subinfo) {
    li {
      gap: 10px;
      .thumb + .infos {
        margin-top: 10px;
      }
    }
  }
  &.month-ticket {
    --cell: 5;
    > li {
      flex-grow: 0;
    }
  }

  &.row2 {
    --cell: 2;
  }
  &.row3 {
    --cell: 3;
  }
  &.row4 {
    --cell: 4;
  }
  &.row5 {
    --cell: 5;
  }
  &.program {
    &.prices {
      --cell: 4;
    }
  }

  > li {
    width: calc(
      (100% / var(--cell)) - (var(--gap) - (var(--gap) / var(--cell)))
    );
    flex-grow: 1;
    display: flex;
    gap: var(--gap);
    flex-direction: column;

    &.item {
      .infos {
        padding: 0 var(--padding) var(--padding);
      }
    }
    .thumb {
      background: no-repeat center center;
      background-size: cover;
      position: relative;
      overflow: hidden;
      overscroll-behavior: none;
      aspect-ratio: var(--ratio);
      --ratio: 4/3;
      width: 100%;
      .with-swiper {
        .thumb-swiper {
          transition: 0.2s;
        }

        .swiper-wrapper {
          li {
            transition: 0.2s;
            background: no-repeat center/cover;
            aspect-ratio: var(--ratio);
            height: auto;

            .img {
              transition: 0.2s;
              background: no-repeat center/cover;
              aspect-ratio: var(--ratio);
              height: auto;
              border-radius: 8px;
            }
          }
        }
      }
    }

    .infos {
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      position: relative;
      padding: 0;
      width: 100%;
      flex-grow: 0;
      .info {
        position: relative;
        width: 100%;
        text-align: left;

        h4.category {
          font-size: 0.9em;
          margin-bottom: 4px;
          display: block;
          margin-bottom: 0;
        }
      }

      .price {
        text-align: left;
      }

      p {
        font-size: 0.9em;
      }

      h2 {
        font-size: 1.3em;
      }
    }

    .info {
      display: flex;
      flex-direction: column;
      line-height: 1.3;
    }

    .btns {
      display: flex;
      gap: 6px;
      width: 100%;

      > a {
        font-size: 0.8em;
        padding: 12px 16px;
        border: 1px solid var(--gray-border);
        border-radius: 4px;
        color: var(--gray-mid);
        text-align: center;
        transition: 0.2s;
        display: flex;
        align-items: center;
        gap: 5px;

        i {
          font-size: 1.2em;
        }

        &:hover {
          background-color: var(--main-color);
          border-color: var(--main-color);
          color: #fff;
        }
      }
    }

    h2 + p {
      margin-top: 0;
    }

    .price {
      display: flex;
      flex-wrap: wrap;
      gap: 24px;
      row-gap: 5px;
      margin-top: 20px;
      > h6 {
        width: 100%;
        color: var(--gray-light);
      }
      dl {
        display: flex;
        align-items: flex-end;
        gap: 5px;
      }
      &.multi {
        flex-wrap: wrap;
      }

      .list.horizon {
        flex-direction: column;

        dl {
          flex-direction: row;
          display: flex;
          align-items: flex-end;
        }
      }
    }

    &.full {
      width: 100%;

      .infos {
        flex-direction: row;
        justify-content: space-between;
        gap: var(--btn-h);
      }

      .price {
        margin-top: 4px;
      }
    }
  }

  &.square {
    li {
      .thumb {
        height: initial !important;
        background-color: var(--gray-pale);
      }
    }
  }

  &.circle {
    --gap: 2em;
    li {
      flex-grow: 0;
      text-align: center;
      .thumb {
        padding-top: 0;
        display: inline-flex;
        max-width: 200px;
        border-radius: 50%;
        background-size: cover;
        aspect-ratio: 1/1;
        margin: auto;
      }
      .info {
        justify-content: center;
        text-align: center;
      }
      .price {
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center;
      }

      .btn {
        margin-top: 20px;
      }
    }
  }

  &.gallery {
    --cell: 4;
    margin-bottom: 30px;
    --gap: 20px;
    &.press {
      --cell: 3;
    }
    li {
      flex-grow: 0;

      .infos {
        .info {
          display: flex;
          flex-direction: column;
          gap: 5px;
          p.descript {
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          p {
            font-size: 1em;
            &.date {
              font-size: 0.85em;
              margin-top: 0.5em;
              color: var(--gray-light);
            }
          }
          .option-info {
            margin-top: 6px;

            p {
              display: flex;
              align-items: center;
              gap: 5px;
            }
          }
        }
      }

      p.address {
        color: initial;
        font-size: 0.85em;
      }
    }

    .thumb {
      aspect-ratio: 8/5;
      width: 100%;
      border-radius: 10px;

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

    &.press .thumb {
      background-color: var(--gray-pale);

      img {
        object-fit: contain;
      }
    }

    .infos .info h4.category {
      color: var(--gray-light);
    }

    &.numberic {
      counter-reset: number;

      .infos h2::before {
        counter-increment: number;
        content: counter(number) "";
        margin-right: 5px;
        aspect-ratio: 1/1;
        color: #fff;
        background-color: var(--main);
        border-radius: 50%;
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        font-size: 0.6em;
        vertical-align: text-top;
        flex-shrink: 0;
        display: inline-block;
      }
    }
  }

  &.prices {
    > li {
      flex-grow: 0;
      &:only-child {
        --cell: 1;
        flex-grow: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        gap: 30px;
        --img-h: 200px;
        min-height: var(--img-h);

        .thumb {
          width: 300px;
          margin-bottom: 0;
          flex-shrink: 0;
          height: 100%;
          border-radius: 12px;
        }

        .infos {
          .price {
            margin-top: var(--padding);
          }
        }
        .subinfo {
          & > li {
            .price-set {
              flex-direction: row;
            }
          }
        }
      }
    }

    > li.full {
      width: 100%;

      .promotion {
        .infos {
          color: #fff;
          justify-content: center;
          align-items: center;
          text-align: center;
          width: 100%;

          .price {
            margin-top: 30px;

            dl {
              text-align: center;
              justify-content: center;
              align-items: center;

              dd {
                color: var(--main-light);
                text-align: center;
                font-size: 1.8em;
              }
            }

            dt {
              color: #fff;
              opacity: 0.6;
            }
          }

          h4.category {
            font-size: 1.2em;
            color: var(--main-light);
            text-align: center;
          }
        }

        &::before {
          background-color: rgba(0, 0, 0, 0.6);
        }

        .info {
          h2 {
            font-size: 1.8em;
          }

          p {
            color: #fff;
            font-size: 1.1em;
          }
        }
      }

      .infos .price-multi .price {
        width: auto;
      }
    }

    > li {
      .price-multi {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;

        &.single .price {
          width: 100%;
        }

        &.row .price {
          flex-grow: 1;
          gap: 0;
          width: calc(50% - 3px);
          align-items: flex-start;
        }

        .price {
          dl + dl {
            margin-left: 0;
          }

          &:only-child {
            gap: var(--padding);
            row-gap: 6px;
            width: 100%;

            dl {
              flex-grow: 0;
            }
          }
        }
      }

      .thumb {
        --ratio: 16/10;
        aspect-ratio: var(--ratio);
        height: auto;
        position: relative;
        overflow: hidden;
        overscroll-behavior: none;
        padding-top: 0;
        border-radius: 8px;

        .with-swiper .thumb-swiper .swiper-wrapper {
          li.zoom {
            height: 100%;
            .thumb-swiper {
              height: 100%;
              li {
                height: 100%;
              }
            }
          }
        }
      }
    }

    > li.full .thumb {
      aspect-ratio: 3/1;
      border-radius: 8px;
      overflow: hidden;
    }
  }

  :is(.full) &.prices > li.full .thumb {
    aspect-ratio: 4/1;
  }

  /* 썸네일 hover 오버레이 (자세히보기) */
  &.open-detailed {
    > li {
      .thumb {
        cursor: pointer;
        &::before {
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: bold;
          font-size: 1.1em;
          background-color: rgba(0, 0, 0, 0);
          transition:
            background 0.3s,
            backdrop-filter 0.3s;
          z-index: 1;
        }
      }
      .thumb:hover::before {
        content: '🔍\a자세히보기';
        white-space: pre;
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        text-align: center;
      }
    }
  }
}
/* ========================================
   Variant: .list.horizon
======================================== */
.list.horizon {
  li {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 0;
    width: 100%;
    border-bottom: 1px solid var(--gray-border);
    gap: 30px;
    padding: 10px 0;
    .thumb {
      width: 400px;
      height: 100%;
      border-radius: 8px;
      background-position: center;
      background-size: cover;
      flex-shrink: 0;
      position: relative;
      overflow: hidden;

      &.wide {
        width: 180px;
      }

      .with-swiper {
        .thumb-swiper {
          height: 100%;

          .swiper-wrapper {
            aspect-ratio: 1/1;
            height: 100% !important;
          }
        }
      }
    }

    .infos {
      h2 {
        font-size: 1.3em;
      }

      .info {
        h4.category {
          font-size: 1em;
        }
      }

      .price-multi {
        display: flex;
        gap: 30px;
        align-items: flex-start;

        .price {
          justify-content: flex-end;
          flex-direction: column;
          align-items: flex-end;
          gap: 3px;
        }
      }
    }

    .info {
      padding-right: var(--padding);
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 4px;

      h3 {
        font-size: 1.3em;
      }

      .feat {
        display: flex;
        color: var(--gray-mid);
        flex-wrap: wrap;
        gap: 4px;

        > li {
          width: calc(50% - 2px);
        }
      }
    }

    .btnset {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 30px;
      font-size: 12px;
      text-align: center;
      color: var(--gray-dark);

      .button {
        border: 0;
        padding: 0;

        &:hover {
          color: var(--main-color);
          background-color: inherit;
        }

        .icon {
          img {
            width: 24px;
          }
        }
      }

      p {
        margin-top: 0;
        font-size: 0.9em;
      }
    }

    .category {
      font-weight: bold;
      color: var(--gray-dark);
    }

    .title {
      white-space: nowrap;
      overflow: hidden;
      overscroll-behavior: none;
      text-overflow: ellipsis;
    }

    .comment-count {
      display: flex;
      align-items: center;
      gap: 0.2em;
      font-size: 0.85em;
      color: initial;

      i {
        font-size: 1.2em;
      }
    }

    .date,
    .writer {
      color: var(--gray-light);
      font-size: 0.85em;
      flex-grow: 0;
      text-align: right;
      margin-left: 1em;
    }
    .title {
      flex-grow: 1;
    }
    .writer {
      color: var(--gray-mid);
    }

    &:has(.writer) {
      .date {
        flex-grow: 0;
      }
    }

    &.disabled {
      background-color: var(--gray-pale);
      cursor: initial;

      .thumb,
      .infos .info {
        filter: grayscale(0.7);
        color: var(--gray-light);
      }

      .infos {
        h4.category,
        p,
        .price dt dd {
          color: var(--gray-light);
        }

        .price dd.soldout {
          color: var(--red-color);
          font-weight: bold;
        }
      }
    }

    &.new::before {
      content: "●";
      position: absolute;
      left: -15px;
      color: var(--red-color);
      font-size: 0.5em;
    }
  }

  &.col2 {
    > li {
      width: calc(50% - 15px);
    }

    li {
      .infos {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;

        h2 + p {
          margin-top: 0;
        }

        .price {
          text-align: left;
        }

        .price-multi {
          margin-top: 12px;

          .price {
            align-items: flex-start;

            dl + dl {
              margin-left: 0;
            }
          }
        }
      }
    }
  }

  &.facilities {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;

    li {
      width: calc(50% - 15px);
      border: 0;
      padding: 0;
      pointer-events: none;
      --ratio: 8/5;

      &::after {
        display: none;
      }

      .thumb {
        width: 240px;
        height: auto;
        aspect-ratio: var(--ratio);
      }

      &:nth-child(even) {
        .infos .info {
          padding-right: 0;
        }
      }
    }
  }

  &.prices {
    &.programs {
      > li {
        width: 50%;
        padding: 15px 0;
      }
      &.programs.program {
        > li {
          width: 100%;
          .infos {
            align-items: flex-start;
          }
        }
      }
      @media (max-width: 812px) {
        > li {
          width: 100%;
        }
      }
    }
    &:not(.program):has(li .subinfo) {
      --thumb: 180px;
      > li {
        display: grid;
        grid-template-columns: var(--thumb) minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 24px;
        row-gap: 10px;
        align-items: start;
      }
      .thumb {
        grid-column: 1;
        grid-row: 1 / 3;
        width: var(--thumb);
        border-radius: 12px;
      }
      .infos {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        font-size: 14px;
        .info {
          row-gap: 2px;
        }
      }
      .subinfo {
        grid-column: 2;
        grid-row: 2;
        min-width: 0;

        li {
          gap: 0;
          font-size: 13px;
          border: 0;
          padding: 0;
          strong {
            min-width: 60px;
          }
        }
      }
      @media (max-width: 812px) {
        > li {
          --thumb: 100px;
          column-gap: 15px;
          row-gap: 10px;
          .infos {
            h2 {
              font-size: 1.2em;
            }
          }
          .subinfo {
            margin-top: 0;
            gap: 0;
          }
        }
      }
    }
    > li {
      border-bottom: 0;
    }
  }

  &.single {
    border-top: 0;

    &::before {
      content: "";
      display: block;
      border-bottom: 1px solid var(--gray-border);
      transform-origin: left bottom;
      width: 100%;
      bottom: 0;
      left: 0;
    }

    > li {
      padding: 24px 0;
      gap: 5px;
      border-bottom: 1px solid var(--gray-border);

      .category {
        white-space: nowrap;
      }

      .infos,
      .info {
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }
  }

  &.items {
    gap: 10px;
    justify-content: flex-start;

    li {
      border: 1px solid var(--gray-border);
      border-radius: 6px;
      padding: 10px;
      gap: 1em;
      width: auto;
      flex-grow: 1;
      min-width: calc(25% - 4px);
      max-width: calc(50% - 5px);

      h3 {
        margin-bottom: 0;
        padding-bottom: 0;
        font-size: 1.2em;

        & + p {
          margin-top: 0;
        }

        &:has(a, .date) {
          display: flex;
          align-items: center;
          gap: 0.3em;

          .date {
            font-weight: normal;
            display: flex;
            align-items: center;
            gap: 0.15em;
            font-size: 0.8em;

            .material-symbols-sharp {
              font-size: 1.1em;
            }
          }
        }
      }

      .icon {
        font-size: 2.5em;
        margin-left: 10px;
      }

      .close {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 1.3em;
        color: var(--gray-light);

        &:hover {
          color: var(--red-color);
        }
      }

      .infos {
        padding: 10px 0;
        align-items: flex-start;
      }

      .date {
        text-align: left;
        margin-left: 0;
      }
    }

    &.pets {
      li {
        border: 0;
        background-color: var(--gray-pale);

        &.male {
          .icon {
            color: pink;
          }
        }

        &.female {
          .icon {
            color: skyblue;
          }
        }
      }

      .infos {
        .info > .inputs:last-child {
          margin-top: 0.2em;
        }

        .info > .inputs {
          strong {
            color: var(--gray-mid);
          }

          input + label {
            margin-right: 10px;
          }
        }
      }
    }
  }
  &.prices.program {
    --thumb: 240px;
    > li {
      display: flex;
      column-gap: 24px;
      row-gap: 10px;
      align-content: start;
      align-items: center;
      .thumb {
        width: var(--thumb);
        img {
          height: auto;
          max-width: 100%;
          max-height: 600px;
          aspect-ratio: initial;
          object-fit: initial;
          border-radius: 10px;
        }
      }
      &:has(.my-class) {
        .data-time {
          .time-el.my-class {
            background-color: var(--map-color, --main-color);
            border-color: var(--map-color, --main-color);
            color: #fff;
          }
        }
        .thumb {
          img {
            object-fit: contain;
            width: 100%;
            height: auto;
          }
          &::before {
            content: "수강중";
            background-color: color-mix(
              in srgb,
              var(--map-color, --main-color) 70%,
              transparent
            );
            backdrop-filter: blur(5px);
            color: #fff;
            position: absolute;
            font-weight: bold;
            font-size: 11px;
            padding: 5px 8px;
            border-radius: 5px;
            left: 4px;
            top: 4px;
          }
        }
      }
      padding: 18px 0;
      position: relative;
      gap: 20px;
      cursor: default;
      &::after {
        content: "";
        width: 100%;
        height: 1px;
        background: var(--px1);
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: 0.2;
      }

      .infos {
        grid-column: 2;
        grid-row: 1;
        flex-direction: column;
        align-items: flex-start;
        font-size: 14px;
        gap: 18px;
        .info {
          margin: 0;
          padding: 0;
        }
      }
      .subinfo {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: 3em;
        row-gap: 12px;

        li {
          font-size: 14px;
          width: auto;
          max-width: none;
          padding: 0;
          border: 0;
          flex-direction: column;
          row-gap: 2px;
          column-gap: 5px;
          align-items: flex-start;
          > div {
            font-size: 14px;
          }
          &.my-class,
          &.my-class > div {
            color: var(--map-color);
          }
          .data-date {
            width: 100%;
            font-size: 14px;
            p.expired {
              color: var(--gray-light);
              text-decoration: line-through;
            }
          }
          &.key-period {
            width: 100%;
            .multi-reg-list {
              display: flex;
              flex-wrap: wrap;
              gap: 0;
              row-gap: 10px;
              @media (max-width: 812px) {
                flex-direction: column;
                flex-wrap: nowrap;
                row-gap: 20px;
                .multi-reg-item {
                  width: 100%;
                }
              }
            }
            .multi-reg-date-wrap {
              display: inline-flex;
              align-items: center;
              flex-wrap: wrap;
              gap: 3px;
              order: 3;
              width: 100%;
            }
            .multi-reg-segment {
              display: inline-flex;
              align-items: center;
              gap: 3px;
              &.expired {
                opacity: 0.5;
                text-decoration: line-through;
              }
            }
            .multi-reg-status {
              order: 2;
            }
            .multi-reg-date-date,
            .multi-reg-time {
              white-space: nowrap;
            }
            .multi-reg-item {
              flex-direction: row;
              flex-wrap: wrap;
              width: 33.3%;
              flex-grow: 1;
              align-content: flex-start;
              gap: 3px;
              &:has(.multi-reg-label.label-returning) {
                --multi-reg-accent: var(--blue);
                --live-accent: var(--blue);
              }
              &:has(.multi-reg-label.label-new) {
                --multi-reg-accent: var(--orange);
                --live-accent: var(--orange);
              }
              &:has(.multi-reg-label.label-waitlist) {
                --multi-reg-accent: var(--green);
                --live-accent: var(--green);
              }

              .multi-reg-label {
                order: 1;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                font-weight: bold;
                border-radius: 4px;

                white-space: nowrap;
                &.label-returning {
                  color: var(--multi-reg-accent);
                }
                &.label-new {
                  color: var(--multi-reg-accent);
                }
                &.label-waitlist {
                  color: var(--multi-reg-accent);
                }
              }
              &.live {
                .multi-reg-status {
                  color: var(--multi-reg-accent);
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
      &.now:not(.soldout) {
        cursor: pointer;
        .go-btn {
          cursor: pointer;
          opacity: 1;
          box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
          background-color: var(--white);
          color: var(--gray-dark);
          pointer-events: all;

          &::after {
            font-weight: 400;
            font-size: 18px;
            content: "arrow_forward";
          }
          &:hover,
          li:hover & {
            background-color: var(--map-color, --main-color);
            color: #fff;
            box-shadow: 5px 5px 20px
              color-mix(in srgb, var(--map-color, --main-color) 40%, #fff);
          }
        }

        .infos {
          .info {
            h2 {
              display: flex;
              align-items: center;
              gap: 4px;
              position: relative;
              display: inline-flex;
              align-items: center;
              gap: 6px;
              overflow: hidden;
              isolation: isolate;
              &::before {
                content: "접수중";
                color: #fff;
                border-radius: 30em;
                font-size: 11px;
                padding: 4px 10px;
                background: var(--map-color, --main-color);
                animation: blink alternate infinite 0.5s;
              }
            }
          }
        }
      }
      &.soldout,
      &:not(.now) {
        background: linear-gradient(
          to right,
          transparent 0%,
          var(--gray-pale) 50%
        );
        .thumb {
          &::before {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: bold;
          }
        }
      }
      &.soldout {
        .infos {
          .info {
            opacity: 0.5;
          }
        }
        .subinfo {
          opacity: 0.5;
        }
        .thumb {
          &::before {
            content: "마감";
            background-color: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(4px);
          }
        }
        .go-btn {
          &::after {
            content: "playlist_remove";
          }
        }
      }
      &:not(.now) {
        pointer-events: none;
        /* background-color: var(--gray-pale); */
      }
      &.program-empty {
        justify-content: center;
        background: none;
        min-height: 300px;
      }
      .go-btn {
        aspect-ratio: 1/1;
        flex-shrink: 0;

        height: 46px;
        width: 46px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50em;
        transition: 0.2s;
        pointer-events: none;
        color: var(--gray-light);
        cursor: not-allowed;
        &::after {
          font-size: 1.4em;
          font-weight: 400;
          display: block;
          content: "calendar_clock";
          font-family: "Material Symbols Sharp";
        }
      }
    }
    @media (max-width: 812px) {
      margin: 0 calc(-1 * var(--padding));
      li {
        align-items: flex-start;
        &:has(.data-time) {
          /* .thumb {
            position: absolute;
            top: var(--padding);
            right: var(--padding);
          } */
          .infos {
            .info {
              gap: 5px;
              /* > h3,
              > h4,
              > h2,
              > p {
                width: calc(100% - 100px);
              } */
              .data-time {
                .time-el {
                  border-radius: 5em;
                  text-align: center;
                  padding: 5px 8px;
                  min-width: calc(50% - 4px);
                }
              }
            }
          }
        }
        flex-wrap: wrap;
        padding: var(--padding);
        .thumb {
          width: 90px;
          height: 90px;
          aspect-ratio: initial;
          order: 2;
        }
        .infos {
          width: calc(100% - 110px);
          order: 1;
          .info {
            h2 {
              font-size: 1.2em;
              .now:not(.soldout) &::before {
                background-color: transparent;
                border: 1px solid var(--map-color, --main-color);
                color: var(--map-color, --main-color);
              }
            }
            p {
              font-size: 13px;
            }
            &:has(.data-time) {
              > p {
                display: block;
              }
            }
          }
        }
        .subinfo {
          gap: 3em;
          row-gap: 16px;
          flex-wrap: wrap;
          justify-content: flex-start;
          order: 3;
          > li {
            width: auto !important;
            max-width: none !important;
            &.period,
            &.key-period {
              flex-grow: 1;
              .data-date {
                width: auto;
                .period-days {
                  font-size: 16px;
                }
                .expired {
                  display: none;
                }
                .period-days:has(.expired) {
                  display: none;
                }
              }
            }
            &.key-pricing .amount {
              font-size: 16px;
            }
          }
        }
        .go-btn-area {
          order: 10;
          display: flex;
          justify-content: flex-end;
          flex-grow: 1;
          .go-btn {
            display: none;
            order: 5;
            .now:not(.soldout) & {
              display: flex;
              aspect-ratio: initial;
              width: fit-content;
              padding: 10px 16px;
              height: auto;
              margin-left: auto;
              background: var(--map-color, --main-color);
              box-shadow: 5px 5px 20px
                color-mix(in srgb, var(--map-color, --main-color) 30%, #fff);
              color: #fff;
              font-weight: bold;
              gap: 10px;
              &::before {
                content: "예약하기";
              }
              li:has(.my-class) &::before {
                content: "재등록하기";
              }
            }
          }
        }
      }
    }
  }
  :is(.portal) & > li {
    border: 0;
  }
}
.infos {
  .info {
    .data-time {
      margin-top: 4px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      .time-el {
        border: 1px solid var(--gray-border);
        font-size: 13px;
        padding: 6px;
        line-height: 1;
        border-radius: 5px;
        color: var(--gray-mid);
      }
    }
  }
}
/* 서브인포 */
.subinfo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  > li {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 0.88em;
    &.expired {
      display: none;
    }
    > p,
    > span,
    > div {
      color: var(--gray-mid);
      flex-shrink: 1;
    }
    > strong {
      white-space: nowrap;
    }
    &.key-period .live:not(.multi-reg-item),
    .multi-reg-date-wrap .live {
      margin-top: 3px;
      font-weight: 700;
      position: relative;
      overflow: hidden;
      isolation: isolate;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      color: var(--live-accent, var(--map-color, --main-color));
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid
        color-mix(
          in srgb,
          var(--live-accent, var(--map-color, --main-color)) 40%,
          #fff
        );
      background-color: color-mix(
        in srgb,
        var(--live-accent, var(--map-color, --main-color)) 5%,
        #fff
      );
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background-color: color-mix(
          in srgb,
          var(--live-accent, var(--map-color, --main-color)) 22%,
          #fff
        );
        opacity: 0;
        animation: blinkBg 0.55s ease-in-out infinite alternate;
        z-index: 0;
        pointer-events: none;
      }
      > * {
        position: relative;
        z-index: 1;
      }
    }
    .data-date {
      display: flex;
      gap: 5px;
      row-gap: 1px;
      flex-wrap: wrap;
      &:has(.period-days:nth-child(2)) .period-days {
        &::after {
          content: ",";
        }
        &:last-child::after {
          display: none;
        }
      }
    }
    .data-time {
      display: flex;
      flex-direction: column;
      gap: 2px;
      color: var(--gray-mid);
      .time-el {
        color: inherit;
      }
    }
    .dest {
      color: var(--gray-mid);
    }
    &.detail-key-apply-period {
      > p {
        vertical-align: top;
      }
      .horizon & .val {
        border-radius: 3px;
        padding: 5px 8px;
        border: 1px solid var(--gray-border);
        background-color: var(--gray-pale);
        font-size: 12px;
        margin-right: 4px;
        vertical-align: top;
      }
    }
    h6,
    p {
      font-size: 1em;
      flex-shrink: 1;
    }
    .pricing {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      row-gap: 0;
      > p {
        display: inline-flex;
        gap: 5px;
        .nm,
        .amount {
          color: var(--map-color, --gray-dark);
        }
      }
    }
  }
}
@keyframes blink {
  0% {
    filter: brightness(1.1);
  }
  100% {
    filter: brightness(1);
  }
}
/* ========================================
   Ancillary / Mixed Selectors
======================================== */
:is(.swiper-button-prev, .swiper-button-next) {
  &.swiper-button-disabled {
    opacity: 0;
  }
}

@keyframes shimmer-live {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}
.my {
  .list.horizon {
    li {
      .btnset {
        margin: 15px;
        font-size: 1em;
        a {
          gap: 2px;
          height: auto;
          font-weight: normal;
          .icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            .material-symbols-sharp {
              font-size: 1.3em;
              font-weight: 300;
            }
          }
        }
      }
      .info {
        gap: 5px;
        display: flex;
        flex-direction: column;
        line-height: 1;
        padding: 20px 0;
        h3 {
          margin-bottom: 0;
          padding-bottom: 0;
          font-size: 1.3em;
          line-height: 1;
          &:has(.label) {
            display: flex;
            align-items: center;
            gap: 5px;
          }
        }
        h5 {
          margin-bottom: 0;
          font-size: 0.95em;
          color: var(--gray-mid);
          font-weight: bold;
          font-size: 1em;
          &:has(.label) {
            display: flex;
            align-items: center;
            gap: 5px;
          }
        }

        .impo .label {
          border-color: var(--main-color);
        }
        p {
          font-size: 0.85em;
          margin-top: 0;
          strong {
            margin-right: 6px;
          }
        }
        .price {
          color: var(--main-color);
          font-size: 1.2em;
          line-height: initial;
        }
      }
    }
    &.log {
      li {
        .info {
          gap: 0;
        }
      }
    }
    &.point {
      border-top: 1px solid var(--gray-border);
      li {
        display: flex;
        padding-right: 15px;
        padding: 15px 15px 15px 0;
        border-bottom: 1px solid var(--gray-border);
        .date {
          display: block;
        }
        .info {
          .number {
            width: 20px;
          }
        }
      }
    }
  }
}

/* 반응형 */
@media (max-width: 812px) {
  .list {
    li {
      h4.category {
        font-size: 12px;
        margin-bottom: 5px;
        display: none;
      }

      &.item {
        gap: 20px;
        .horizon & {
          padding: 0;
        }
        width: initial;
        padding: 0;
        flex-direction: column;
        overflow: hidden;

        .thumb {
          width: 100% !important;
          height: auto !important;
          aspect-ratio: 16/9;
          border-radius: 0;
        }

        .infos {
          padding: 0 20px;
          width: 100%;
          text-align: center;

          .option {
            border: 0;
          }

          h4 {
            font-size: 14px;
          }

          p {
            font-size: 12px;
            text-align: left;
          }
        }

        .qr {
          text-align: center;
          align-self: center;
          width: 50%;
          height: auto;
          padding-top: var(--padding);

          img {
            width: 100%;
          }
        }

        .print {
          margin-top: 15px;
          flex-direction: row;
          width: initial;
          height: initial;
          background: none;
          border: 1px solid var(--gray-border);
          border-radius: 5px;
          padding: 15px 0;
          text-align: center;
          aspect-ratio: initial;
          width: 100%;
          border: 0;
          border-radius: 0;
          border-top: 1px solid var(--gray-border);
          margin-top: 0;
          justify-content: center;
          img {
            height: 18px;
            margin-bottom: 0;
          }
        }

        &::before {
          width: 80px;
          height: 80px;
          top: 10px;
          margin-top: 0;
          right: initial;
          left: 10px;
          mix-blend-mode: difference;
        }
      }

      .infos {
        flex-direction: column;

        h2 {
          span.num.pin {
            height: 20px;
            line-height: 20px;
            min-width: 20px;
            font-size: 0.5em;
            vertical-align: middle;
            margin-top: -3px;
            display: inline-block;
          }
        }

        .price-multi {
          .price {
            margin-bottom: 0;

            dl + dl {
              margin-left: 0;
            }

            dl {
              font-size: 1.1em;
              width: 100%;
            }

            h6 {
              color: var(--gray-light);
              font-size: 0.95em;
            }
          }
        }
      }
      /* 서브 정보 블록 */
      .subinfo {
        margin-top: 0.5em;
        display: flex;
        flex-direction: column;
        gap: 3px;

        /* 각 항목 */
        > li {
          display: flex;
          gap: 5px;
          align-items: baseline;
          font-size: 12px;

          h6,
          p {
            font-size: 1em;
          }
        }

        /* 목적지 관련 이미지 블록 */
        .dest {
          .img-in {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;

            > li {
              display: flex;
              flex-direction: column;
              align-items: center;
              width: calc(100% / 4 - 8px);
              gap: 6px;

              .img {
                aspect-ratio: 16/9;
                border-radius: 4px;
                overflow: hidden;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }
            }
          }
        }
      }
      .thumb {
        .with-swiper {
          .swiper-wrapper {
            li {
              &:hover::before {
                display: none;
              }
            }
          }

          &.zoom {
            padding: 0 5vw;
            :has(&) {
              .reserv-ui .reserv-btns {
                display: none;
              }
            }
            .swiper-button-prev,
            .swiper-button-next {
              width: auto;
              height: auto;
              box-shadow: none;
              background-color: transparent;
              -webkit-transform-style: preserve-3d;
              -webkit-transform: translatez(1000px);
              pointer-events: all;
              position: static;
              margin: 0;
              padding: 20px 0;
            }

            .swiper-button-prev {
              left: 0;
            }

            .swiper-button-next {
              right: 0;
            }

            .close {
              -webkit-transform-style: preserve-3d;
              -webkit-transform: translatez(1000px);
              pointer-events: all;
              position: static;
              width: 40px;
              height: 40px;
              margin-left: 0;
            }

            .thumb-swiper {
              display: flex;
              flex-direction: column;
              flex-wrap: nowrap;
              height: 100%;

              .swiper-wrapper {
                width: 100%;
                display: flex;
                align-items: center;
                flex-grow: 1;

                li {
                  -webkit-transform-style: preserve-3d;
                  -webkit-transform: translatez(210px);
                  pointer-events: all;
                  flex-grow: 1;

                  .detailed {
                    padding: var(--padding) 0;
                    overflow-y: auto;
                    -webkit-overflow-scrolling: touch;
                    overscroll-behavior: contain;

                    h3 {
                      font-size: 1.6em;
                    }
                  }
                }
              }

              .nav {
                display: flex;
                align-items: center;
                justify-content: space-between;
              }
            }

            .thumb-swiper,
            .thumb-swiper .swiper-wrapper {
              pointer-events: none;
            }

            .swiper-wrapper {
              width: initial;
            }
          }
        }
      }
    }

    .my-ticket {
      padding: 0 10px;
    }

    .info {
      .head + .list {
        margin-top: 30px;
        border-top: 1px solid var(--gray-dark);

        li {
          margin-bottom: 0;
          padding: var(--padding) 0;
          border-bottom: 1px solid var(--gray-border);
        }
      }
    }

    &.rect {
      li {
        padding: 0 !important;

        .check {
          height: auto;
          position: absolute;
          top: 10px;
          left: 10px;
          z-index: 20;
        }
      }
    }
  }

  .list.vertical {
    --cell: 2;
    --gap: 10px;
    &.month-ticket {
      --cell: 2;
    }
    > li {
      width: calc(
        (100% / var(--cell)) - (var(--gap) - (var(--gap) / var(--cell)))
      );
    }

    li {
      &.full {
        .infos {
          flex-direction: column;
          gap: 0px;
        }
      }

      .infos {
        .price-single {
          .price {
            display: flex;
            flex-direction: row;
            gap: 30px;
            justify-content: space-between;

            dl {
              flex-direction: column;
              align-items: flex-start;
              gap: 2px;

              dd {
                font-size: 1.3em;
              }
            }
          }
        }

        .btns {
          margin-top: var(--padding);

          > a {
            font-size: 0.95em;
          }
        }
      }

      .price {
        flex-direction: column;
        gap: 5px;
        margin-top: 10px;
        margin-bottom: 0;
        align-items: flex-start;

        dl {
          display: flex;
          align-items: center;

          dt {
            font-size: 1.05em;
            font-weight: normal;
            color: var(--gray-dark);
            margin-right: 5px;
          }

          dd {
            margin-top: 0;
            font-size: 1.1em;
          }
        }
      }

      .thumb {
        aspect-ratio: 4/3;
      }
    }

    &.row2 {
      li {
        &.full {
          .info {
            width: 100%;
          }
        }
      }
    }

    &.row2.prices {
      li {
        .infos {
          .price-multi {
            gap: 0;
            width: 100%;
            margin-top: 12px;

            .price {
              width: 50%;
            }
          }
        }
      }
    }

    &.row3,
    &.row4,
    &.row5 {
      --cell: 2;
      --gap: 16px;
    }

    &.circle {
      li {
        width: initial;
        flex-direction: row;
        text-align: left;
        margin-bottom: var(--btn-h);
        align-items: flex-start;

        .thumb {
          width: calc(35vw - 2.5vw - 12px);
          height: calc(35vw - 2.5vw - 12px);
          margin-bottom: 20px;
          margin-right: 20px;
          flex-shrink: 0;
          flex-grow: 0;
        }

        .info {
          flex-grow: 1;
          flex-shrink: 0;

          p {
            font-size: 12px;
            margin-top: 5px;
            white-space: inherit;
          }
        }

        .price {
          justify-content: flex-start;
          margin: 10px 0 0 0;
          flex-wrap: nowrap;
          flex-direction: row;

          dt {
            margin-right: 0;
          }

          dd {
            margin-right: 10px;
          }
        }

        .btn {
          margin-top: 15px;
        }
      }

      li:nth-child(4),
      li:nth-child(5) {
        width: initial;
        margin-left: 0;
      }

      .info {
        width: initial !important;
        flex-grow: 0 !important;
        flex-shrink: 1 !important;
      }
    }

    &.gallery {
      &.press {
        --cell: 1;
      }
      &.numberic {
        .infos {
          h2 {
            font-size: 1.2em;

            &::before {
              width: 18px;
              height: 18px;
              line-height: 18px;
              vertical-align: middle;
            }
          }
        }
      }

      li {
        p.address {
          font-size: 0.9em;
        }
      }
    }

    &.prices {
      > li {
        --cell: 1;
        position: relative;
        margin-bottom: 0;

        .thumb {
          --ratio: 16/9;
        }

        .price-multi {
          display: flex;
          width: 100%;

          .price {
            width: 50%;
            flex-direction: column;
            align-items: flex-start;

            &:has(dl:only-of-type) {
              flex-direction: column;
              align-items: flex-end;
            }
          }
        }
      }

      &:has(.with-swiper) {
        li {
          .thumb,
          .thumb .with-swiper .swiper-wrapper,
          .thumb .with-swiper .swiper-wrapper li,
          .thumb .with-swiper .swiper-wrapper li .img,
          .thumb .with-swiper .thumb-swiper {
            aspect-ratio: var(--ratio);
          }
        }
      }

      > li:not(.full):first-child:nth-last-child(1) {
        flex-direction: column;
        .thumb {
          width: 100%;
          aspect-ratio: var(--ratio);

          .with-swiper {
            .thumb-swiper {
              .swiper-wrapper,
              .swiper-wrapper li {
                height: initial !important;
              }
            }
          }
        }

        ~ li:not(.full) {
          flex-direction: column;
          gap: 20px;
        }
      }

      > li:first-child:nth-last-child(1),
      > li:first-child:nth-last-child(1) ~ li {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--padding);

        .thumb,
        .thumb ~ li .thumb,
        .thumb .with-swiper .swiper-wrapper li,
        .thumb .with-swiper .swiper-wrapper li .img {
          height: auto;
          width: 100%;
        }

        .infos {
          margin-bottom: auto;
          margin-top: 0;
        }
      }

      > li:last-child {
        &::after {
          display: none;
        }

        .price-multi {
          margin-bottom: 0;
        }
      }

      > li:first-child:nth-last-child(1) .infos .price {
        margin-top: 12px;
      }

      &.healing {
        > li {
          .infos {
            flex-direction: column;
          }
        }
      }
    }
  }

  .full .list.vertical.row3.prices {
    li {
      .price-multi {
        gap: 0;
      }
    }
  }

  .zoomed .list.vertical li .thumb .with-swiper.zoom .thumb-swiper {
    height: 100%;
    flex-wrap: nowrap;
  }

  .list.horizon {
    border: 0;

    > li {
      border: 0;
      padding: 10px 0;
    }

    &.single {
      > li {
        padding: 20px 0;
      }

      &::before,
      li::after {
        transform: scaley(0.33);
      }
    }

    li {
      .info {
        padding-right: 10px;
      }

      .date {
        display: none;
      }

      &.new::before {
        transform: scale(0.6);
      }

      .btnset {
        a {
          display: flex;
          gap: 6px;
          align-items: center;
        }

        .icon {
          margin-bottom: 0;

          img {
            max-height: 18px;
            max-width: 20px;
          }
        }
      }

      .infos {
        .price-multi {
          flex-direction: column;
          gap: 10px;
          margin-top: 10px;

          .price {
            flex-direction: row;
            justify-content: space-between;
            gap: 0;
            padding-right: var(--padding);
          }
        }

        .info h4.category {
          display: block;
          margin: 0;
          font-size: 13px;
        }

        h2 {
          font-size: 1em;
        }

        .price {
          font-size: 1em;
          text-align: left;
          max-width: 100%;
          gap: 20px;
          flex-direction: row;
          align-items: center;

          dl {
            gap: 30px;

            dd {
              margin-top: 2px;
              font-size: 1.2em;
              text-align: left;
            }
          }
        }
      }

      .thumb {
        width: 100px;
        height: 100px;
        align-self: flex-start;

        + .infos {
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          gap: 6px;
        }
      }
    }

    &.facilities {
      gap: 60px;

      li {
        width: 100%;
        flex-direction: column;
        padding: 0 var(--padding);
        gap: 20px;

        .thumb {
          width: 100%;
        }

        .infos {
          margin-left: 0;
          width: 100%;
        }
      }
    }

    &.items {
      li {
        width: 100%;
        max-width: 100%;
      }
    }

    &.rect {
      margin: 0 -10px;
      border: 1px solid var(--gray-border);

      li {
        .infos {
          padding: 20px 20px;

          .price-multi {
            margin-bottom: 0;
          }
        }

        .check + .infos {
          padding-left: 50px;
        }

        &::after {
          display: block !important;
        }
      }
    }

    &.prices {
      li {
        .thumb {
          .with-swiper {
            .swiper-wrapper li,
            .swiper-wrapper li .img {
              height: 100%;
            }
          }
        }

        .infos {
          .price-multi {
            margin: 0;
            margin-top: 12px;
          }
        }
      }
    }
  }
  .my {
    & .list.horizon {
      & li {
        .info {
          padding: 0;
        }
      }
    }
  }
  .ui-sect .sect .list.horizon.items {
    gap: 10px;
    margin-right: 0;
  }
}

/* ========================================
   등장 애니메이션 (Vertical / Horizon)
======================================== */
@keyframes listFadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes listFadeSide {
  from {
    opacity: 0;
    transform: translateX(-14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.list {
  --list-stagger: 0.05s;
}

.list:not(.horizon) > li,
.list.vertical > li {
  animation: listFadeUp 0.5s ease both;
}

.list.horizon > li {
  animation: listFadeSide 0.45s ease both;
}

.list:not(.horizon) > li:nth-child(n),
.list.horizon > li:nth-child(n) {
  animation-delay: calc(var(--list-stagger) * (var(--n, 0)));
}

.list:not(.horizon) > li:nth-child(1),
.list.horizon > li:nth-child(1) {
  --n: 0;
}
.list:not(.horizon) > li:nth-child(2),
.list.horizon > li:nth-child(2) {
  --n: 1;
}
.list:not(.horizon) > li:nth-child(3),
.list.horizon > li:nth-child(3) {
  --n: 2;
}
.list:not(.horizon) > li:nth-child(4),
.list.horizon > li:nth-child(4) {
  --n: 3;
}
.list:not(.horizon) > li:nth-child(5),
.list.horizon > li:nth-child(5) {
  --n: 4;
}
.list:not(.horizon) > li:nth-child(6),
.list.horizon > li:nth-child(6) {
  --n: 5;
}
.list:not(.horizon) > li:nth-child(7),
.list.horizon > li:nth-child(7) {
  --n: 6;
}
.list:not(.horizon) > li:nth-child(8),
.list.horizon > li:nth-child(8) {
  --n: 7;
}
.list:not(.horizon) > li:nth-child(9),
.list.horizon > li:nth-child(9) {
  --n: 8;
}
.list:not(.horizon) > li:nth-child(10),
.list.horizon > li:nth-child(10) {
  --n: 9;
}

@media (prefers-reduced-motion: reduce) {
  .list:not(.horizon) > li,
  .list.horizon > li {
    animation: none;
  }
}

ul.demical {
  counter-reset: demi;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-grow: 1;
  ul + &,
  div + & {
    margin-top: var(--padding);
  }
  li {
    flex-grow: 1;
    position: relative;
    color: var(--gray-mid);
    padding-left: var(--padding);

    table {
      font-size: 0.85em;
    }

    p + .allborder {
      margin-top: 12px;
    }

    .allborder {
      table {
        th,
        td {
          padding: 1em;
        }
      }
    }

    > p:first-child {
      line-height: inherit;
    }

    strong {
      color: var(--gray-dark);
      font-weight: normal;
    }

    &::before {
      counter-increment: demi;
      content: counter(demi, decimal-leading-zero) ".";
      color: var(--gray-dark);
      margin-left: calc(var(--padding) * -1);
      position: absolute;
      top: 0;
      line-height: inherit;
    }
  }

  &.bullet {
    li {
      padding-left: 0;
      margin: 0;
      display: flex;
      gap: 4px;

      &::before {
        counter-increment: initial;
        content: "•";
        margin: 0;
        left: 0;
        position: static;
        opacity: 0.3;
      }
    }
  }
}

dl.price {
  display: flex;

  dt {
    margin-right: 5px;
    font-weight: bold;
    color: var(--gray-dark);
  }

  dd {
    margin-right: 20px;
    flex-grow: 0;
    color: var(--main-color);
    font-weight: bold;

    &:only-of-type,
    &:last-of-type {
      margin-right: 0;
    }
  }
}

@media (max-width: 812px) {
  ul.demical.flex {
    flex-direction: row;
  }

  .option.color-var {
    p {
      img {
        height: 12px;
        width: 12px;
      }
    }
  }
}



/* ---- global/css/components/map.css ---- */
/* ==========================================================================
   지도(Map) 관련 스타일
   ========================================================================== */
#map {
  position: relative;
  background-color: #fff;
  .map {
    height: 500px;
    background: no-repeat center/cover;
  }
  .map-area {
    height: 500px;
    overflow: hidden;
    overscroll-behavior: none;
    & + .sect {
      margin-top: calc(var(--padding) * 2);
    }
  }
  &::before {
    content: '';
    position: absolute;
    border-top: 1px solid #fff;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
  }
}
.map-picker,
.map-area,
.map {
  background: no-repeat center/cover;
}
/* 지도 관련 섹션 패딩 조정 (페이징과 직접 관련 없음) */
.map-area {
  .map-img {
    border-radius: 12px;
  }
  position: relative;
  .sect-descript {
    display: flex;
    font-size: 0.85em;
    position: absolute;
    bottom: 20px;
    right: 30px;
    li {
      color: initial;
      &::before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: var(--map-color);
        display: inline-block;
      }
      &::after {
        content: '구역';
        margin-left: 5px;
      }
      + li {
        margin-left: 15px;
      }
    }
  }
  .root_daum_roughmap .wrap_map {
    height: 500px;
  }
  .root_daum_roughmap .cont .section.lst {
    display: none;
  }
  & + .form {
    margin-top: 30px;
    .grid.vertical td.form-in .inputs > p {
      font-weight: bold;
      font-size: 1.2em;
    }
  }
}

.map {
  position: relative;
  &.notyet {
    pointer-events: none;
  }
  .tint {
    opacity: 0;
  }
  .pin {
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 18px;
    color: #fff;
    .marker {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      cursor: pointer;
      background-color: var(--map-color);
      transition: 0.4s ease-in-out;
      transform-origin: center bottom;
      z-index: 1;
      position: relative;
      user-select: none;
      &:before {
        content: '';
        font-weight: 900;
        position: absolute;
        width: 100%;
        text-align: center;
        top: -10px;
        left: 0;
        font-size: 12px;
        line-height: 1;
      }
      &:after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        width: 0;
        height: 0;
        border-top: 14px solid var(--map-color);
        border-left: 9px solid transparent;
        border-right: 9px solid transparent;
        z-index: 0;
        transition: 0.4s;
        transform-origin: center bottom;
      }
      input[type='text'],
      > p {
        height: 18px;
        border: 0;
        background-color: transparent;
        width: 100%;
        padding: 0;
        text-align: center;
        font-size: 0.65em;
        font-weight: bold;
        display: block;
        position: relative;
        z-index: 10;

        line-height: 18px;
      }
      input[type='text']:read-only {
        pointer-events: none;
      }
    }
    &.s .marker:before {
      content: 'S';
    }
    &.m .marker:before {
      content: 'M';
    }
    &.l .marker:before {
      content: 'L';
    }
    &.disabled {
      .marker {
        color: var(--gray-light);
        filter: grayscale(1);
        --map-color: #f2f2f2 !important;
        cursor: not-allowed;
        &:before {
          content: '\e9ae';
          font-family: 'xeicon';
          position: absolute;
          width: 18px;
          height: 18px;
          top: 0;
          left: 0;
          text-align: center;
          line-height: 18px;
          font-size: 1.2em;
          color: #999;
          border: none;
          z-index: 2;
          background: none;
        }
        &:after {
          border-top-color: #f2f2f2 !important;
        }
      }
      input[type='text'],
      > p {
        color: var(--gray-mid);
      }
      .rate {
        display: none;
      }
    }
    &.active,
    &.over {
      z-index: 100;
    }
    &.active {
      animation: pin-blink 1s ease-in-out infinite;
      .marker {
        z-index: 11;
        animation: pin-tangle 0.5s ease-in-out infinite;
        input[type='text'],
        > p {
          height: 14px;
          width: 14px;
          background: #fff;
          border-radius: 50%;
          margin: 0 2px;
          font-weight: bold;
          letter-spacing: -0.5px;
          position: relative;
          top: 2px;
          line-height: 14px;
          color: var(--map-color);
        }
      }
    }
    &.over {
      .marker {
        z-index: 11;
        animation: pin-tangle-over 0.5s ease-in-out infinite;
      }
      .rate {
        transform: scale(1.1);
      }
    }
    .rate {
      background-color: #fff;
      color: var(--map-color);
      font-size: 10px;
      font-weight: bold;
      line-height: 1;
      padding: 2px;
      position: absolute;
      border-radius: 10em;
      border: 1px solid var(--map-color);
      bottom: -12px;
      z-index: 2;
      box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.15);
      transform: scale(0.9);
      transition: 0.2s;
      .current::after {
        content: ':1';
      }
    }
  }
  .feat {
    position: absolute;
    &.anno {
      text-shadow: 0 0 8px rgba(0, 0, 0, 1);
      font-size: 0.7em;
      font-weight: 900;
      color: #fff;
      text-align: center;
    }
    &.icon {
      width: 18px;
      height: 18px;
      .icon img {
        width: 18px;
      }
    }
    img {
      width: 18px;
    }
  }
  &.status {
    img {
      filter: grayscale(0.8);
      opacity: 0.4;
    }
    .pin {
      .deco {
        display: none;
      }
      &.available .marker {
        background-color: #000 !important;
        &:after {
          border-top-color: #000 !important;
        }
        &::before {
          color: #000 !important;
        }
      }
      &.ing {
        border: 2px solid #000;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        .marker {
          background-color: #fff !important;
          z-index: 10;
          &:after {
            border-top-color: transparent !important;
            box-shadow: inset 0 2px 0px #000;
          }
          &::before {
            color: #fff !important;
          }
          p {
            color: #000 !important;
          }
        }
      }
      &.checkedin .marker {
        background-color: green !important;
        &:after {
          border-top-color: green !important;
        }
        &::before {
          color: green !important;
        }
      }
      &.reserved .marker {
        background-color: #dd0000 !important;
        &:after {
          border-top-color: #dd0000 !important;
        }
        &::before {
          color: #dd0000 !important;
        }
      }
    }
  }
  + .form {
    margin-top: 20px;
  }
}

.map-picker {
  position: relative;
}

.sect {
  .map-area {
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    .page & {
      border-radius: 0;
      .map_border {
        display: none;
      }
      .root_daum_roughmap .map {
        border-radius: 0;
      }
    }
  }
  .article + .article {
    margin-top: 40px;
  }
}
.public-transport {
  margin-bottom: 30px;
  h3 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.3em;
    margin-bottom: 10px;
  }
  .bus-info {
    margin-top: 10px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
  }
  .bus-direction {
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      background-color: #3182f6;
      color: #fff;
      border-radius: 50%;
      font-size: 0.85em;
      font-weight: bold;
    }
  }
  .bus-numbers {
    font-size: 0.9em;
    color: #555;
    line-height: 1.8;
    margin-bottom: 15px;
    padding-left: 30px;
    word-break: keep-all;
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.map {
  overflow: hidden;
  border-radius: 8px;
  pointer-events: none;
  .btn_zoom {
    pointer-events: all;
  }
}

body:has(.type2) .sect {
  .map-area {
    height: initial;
  }
}

.local {
  .map-area {
    height: 600px;
    overflow: hidden;
  }
}

.img-full {
  &.map-picker {
    .map-area {
      transform: initial;
      .map img {
        max-width: 1024px;
      }
    }
    .option.color-var {
      margin-top: 90px;
    }
  }
  .map-area .map {
    transform: scale(1.171875);
  }
}

.string {
  .map {
    .pin {
      width: auto;
      height: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
      &.disabled .marker {
        color: var(--gray-light);
        &:before {
          position: static;
          width: auto;
          margin-right: 3px;
        }
      }
      .marker {
        width: auto;
        color: #fff;
        padding: 5px 10px;
        border-radius: 50px;
        height: auto;
        white-space: nowrap;
        font-weight: bold;
        font-size: 0.8em;
        text-align: center;
        position: static;
        display: flex;
        align-items: center;
        box-shadow: 0 -4px 4px rgba(0, 0, 0, 0.15);
        &:after {
          left: 50%;
          margin-left: -8px;
        }
      }
    }
  }
}

.sect-num {
  position: relative;
  .option + & {
    margin-top: 30px;
  }
  .pin {
    position: absolute;
    background-color: #000;
    color: #fff;
    display: flex;
    justify-content: center;
    border-radius: 4px;
    .name {
      padding: 8px;
      z-index: 12;
      position: relative;
      border-radius: 4px;
    }
    &:after {
      content: '';
      border-top: 14px solid #000;
      border-left: 9px solid transparent;
      border-right: 9px solid transparent;
      position: absolute;
      bottom: -14px;
      z-index: 1;
    }
    &.left {
      &:after {
        transform: rotate(90deg);
        left: -8px;
        top: 50%;
        transform-origin: top center;
      }
      .deco {
        display: none;
      }
    }
    .deco {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transition: 0.4s;
      transform-origin: center bottom;
      transform: rotate(-20deg);
      filter: blur(1px);
      width: 28px;
      height: 10px;
      background-image: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 80%);
      display: block;
      z-index: 0;
      opacity: 0.5;
    }
    &.bg-blue:after {
      border-top-color: var(--blue);
    }
    &.bg-red:after {
      border-top-color: var(--red-color);
    }
    &.bg-green:after {
      border-top-color: var(--green-color);
    }
    &.bg-mint:after {
      border-top-color: var(--mint-blue);
    }
  }
}

.map-area1200 {
  overflow: hidden;
  .map img {
    max-width: 100%;
    width: 100%;
    user-select: none;
  }
}

.root_daum_roughmap {
  width: 100% !important;
  border: 0 !important;
  overflow: hidden;
  .wrap_controllers.hide {
    display: none;
  }
  .wrap_btn_zoom {
    z-index: 1 !important;
  }
}

.cs #map {
  margin-top: 0;
}

/* 키프레임 애니메이션 */
@keyframes pin-tangle {
  0%,
  100% {
    margin-top: 0;
  }
  50% {
    margin-top: -4px;
  }
}

@keyframes pin-tangle-over {
  0%,
  100% {
    margin-top: 0;
  }
  50% {
    margin-top: -4px;
  }
}

@keyframes pin-blink {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.5);
  }
}

@keyframes pin-tangle-blink {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

@keyframes blend-diff {
  0%,
  100% {
    mix-blend-mode: normal;
  }
  50% {
    mix-blend-mode: difference;
  }
}

/* 반응형 스타일 */
@media (max-width: 812px) {
  .root_daum_roughmap {
    .wrap_map .map {
      pointer-events: none;
      touch-action: none;
    }
  }
  .map-area1200 {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    .map .map-img {
      max-width: 1024px;
      width: 1024px;
    }
  }

  .cs .map-area {
    height: 300px;
    iframe {
      margin-top: -190px !important;
    }
  }
  .local {
    .list.vertical.gallery {
      font-size: 1em;
      --cell: 2 !important;
      row-gap: 30px;
    }
    #map-picks > div > div > div > div::after {
      --cell: 2 !important;
    }
    .search {
      margin-bottom: 12px;
    }
  }
  .sect {
    &.shop-info > .map-area {
      padding: 0;
      overflow-x: hidden;
      border-radius: 0;
    }
    &.sight .map-picker {
      .map-area {
        padding: 0;
      }
      &:has(.course-table) .map {
        margin-bottom: var(--padding);
        padding-left: 10px;
        padding-right: 10px;
        max-width: 800px;
        width: 800px;
        .map-img {
          width: 100%;
        }
      }
    }
  }
  .map .pin .marker {
    input[type='text'],
    > p {
      font-size: 0.8em;
    }
  }
  .section.map-section .map-area1200 {
    padding-left: var(--padding);
    margin-bottom: var(--padding);
    .map-img {
      max-width: 800px;
    }
  }
}



/* ---- global/css/components/modal.css ---- */
/* =============== Modal (nested, optimized, scoped-responsive) =============== */
.modal-inc {
  display: block;
}

.modal {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 0; /* opened via .modal-on .modal.on */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: none;
  z-index: 150;
  .modal-popup {
    border-radius: 20px;
    h1 {
      font-size: 1.75em;
      line-height: 1.3;
    }

    &.cert h1.certificated {
      color: var(--main-color);
      display: flex;
      align-items: center;
      &.cert-success::after {
        content: "인증완료";
        color: #fff;
        font-size: 0.5em;
        background-color: var(--main-color);
        border-radius: 5px;
        padding: 9px 12px;
        display: inline-block;
        margin-left: 10px;
        line-height: 1;
        animation: certok 1s linear infinite;
        transform-origin: center;
      }
    }
    h2 {
      color: var(--gray-mid);
      font-size: 1em;
      font-weight: normal;
      span {
        font-weight: bold;
        color: var(--main-color);
      }
    }
    .info {
      padding: 1.5em;
      background-color: var(--gray-pale);
      border-radius: 12px;
      margin-top: 20px;
      text-align: center;
      &.login-form {
        padding: var(--padding);
      }
      .tab-content & {
        margin-top: 0;
      }
      h5 {
        color: var(--gray-mid);
      }
      h2 {
        font-weight: bold;
        font-size: 1.8em;
        color: var(--gray-dark);
      }
    }
  }
  &.on {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(30px);
  }

  &.system {
    z-index: 160;
    text-align: center;
  }

  .dimed {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.6);
    transition: 0.4s;
    opacity: 0;
  }

  .modal-popup {
    position: relative;
    z-index: 2;
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
    overscroll-behavior: none;
    transition: 0.4s;
    box-shadow: 60px 60px 90px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    &:has(.calendar) {
      width: 100%;
      max-width: var(--width);
    }

    .popup-content {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      display: flex;
      flex-direction: column;
      border-radius: 20px 20px 0 0;
      background-color: #fff;
      line-height: 1.5;
      flex-grow: 0;
      max-height: calc(100% - var(--btn-h));

      .head {
        padding: var(--padding);
      }
      &.split {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: max-content;
      }

      > li {
        padding: 24px;
        border-bottom: 1px solid #ddd;
        &:last-of-type {
          border-bottom: 0;
        }
      }

      .descript .img-set {
        overflow: hidden;
        overscroll-behavior: none;
        margin: 20px 0;
        display: flex;
        gap: 10px;
        img {
          height: var(--btn-h);
        }
      }

      .grid {
        &:not(:first-child) {
          margin-top: var(--padding);
        }
        table {
          th {
            white-space: nowrap;
          }
          .canceled {
            text-decoration: line-through;
          }
          td:has(.button) {
            padding: 10px;
          }
          .button {
            border-color: var(--gray-dark);
            color: var(--gray-dark);
            font-size: 0.85em;
            height: auto;
            border-radius: 4px;
            padding: 0.8em;
            &:hover {
              background-color: var(--gray-dark);
              color: #fff;
            }
          }
        }
      }
    }
  }

  .btn-set {
    display: flex;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    &.close-only {
      justify-content: center;
      position: absolute;
      right: 0;
      top: 0;
      width: var(--btn-h);
      height: var(--btn-h);
      border-radius: 50%;
      padding: 0;

      a.no.cancel {
        font-size: 1.2rem;
        margin: 0;
        background-color: transparent;
        color: var(--gray-dark);
        display: flex;
        align-items: center;
        padding: 0;
        justify-content: center;
      }
    }
    a {
      height: 60px;
      line-height: 60px;
      color: #fff;
      font-weight: bold;
      text-align: center;
      background-color: var(--gray-mid);
      width: 100%;
      transition: 0.3s;
      &:first-child:nth-last-child(3),
      &:first-child:nth-last-child(3) ~ a:first-child {
        background-color: var(--gray-light);
      }
      &.submit {
        background-color: var(--main-color);
      }
      img {
        vertical-align: middle;
      }
    }

    &:not(.close-only) a:hover {
      background-color: var(--gray-dark);
    }
    a.submit:hover {
      background-color: var(--main-deep);
    }
  }

  .no {
    margin-top: 20px;
    color: var(--white);
    font-weight: bold;
    transition: 0.3s;
    position: relative;
    z-index: 2;
    border: 2px solid var(--white);
    border-radius: 10px;
    padding: 15px;
    opacity: 0.5;
    &:hover {
      color: #fff;
    }
  }

  /* Forms & tables inside popup */
  .popup-content {
    li > dl {
      border-top: 1px solid var(--gray-border);
      padding-top: 20px;
      margin-top: 10px;
      &.form {
        border: 0;
        padding-top: 0;
      }
      dt {
        font-weight: bold;
        font-size: 0.9em;
        color: var(--gray-mid);
      }
      dd {
        border-bottom: 1px solid var(--gray-border);
        padding-bottom: 20px;
        word-break: keep-all;
      }
      &.form dt {
        margin-bottom: 10px;
      }
      &.form dd {
        margin-bottom: 0;
        padding-bottom: 0;
      }
      & dd + dt {
        margin-top: 20px;
      }
    }

    .inquiry {
      text-align: center;
      margin-top: 10px;
      cursor: pointer;
      display: block;
      &:hover {
        color: var(--main-color);
      }
    }

    table .inputs {
      min-height: initial;
      input,
      select {
        height: var(--input-h);
      }
    }
    .agree {
      border: 1px solid var(--gray-border);
      border-radius: 6px;
      padding: 20px;
    }
  }

  /* Filebox */
  .filebox {
    input {
      border-radius: 5px 0 0 5px;
      border-right: 0;
    }
    label {
      font-weight: bold;
      border: none;
      background-color: var(--gray-light);
      color: #fff;
      padding: 0 15px;
      flex-shrink: 0;
    }
  }
}

/* ===== Variants ===== */
.modal.login {
  .modal-popup {
    h1 {
      width: fit-content;
      font-weight: 900;
    }
    .popup-content {
      max-height: 100%;
      background-color: #fff;

      &.split {
        flex-direction: column;
        width: initial;
        flex-wrap: nowrap;
      }
      > li {
        flex-grow: 1;
        border-bottom: 0;
        width: 100%;
        padding: var(--padding);
        gap: 2px;

        &.non-login {
          background-color: var(--gray-pale);
          border: 0;
        }

        .login-form {
          .tab-content > & {
            margin-top: 0;
          }
          display: flex;
          gap: 8px;
          flex-direction: column;
          margin-top: 20px;
          padding: 0;
          .info.login-form {
            padding: 1em;
          }
          .inputs {
            display: flex;
            flex-direction: column;
            gap: 8px;
            &.nowrap {
              flex-direction: row;
              flex-wrap: nowrap;
            }
            select {
              flex-grow: 0;
              width: fit-content;
            }
            input {
              flex-grow: 1;
              width: 100%;
            }
          }
          .button {
            border: 0;
          }
        }

        .login-form + .join-find {
          margin-top: 16px;
        }

        .join-find > div {
          margin-top: 4px;

          a {
            font-weight: bold;
            text-decoration: underline;
          }
        }
      }
    }
    a.lined {
      border: 2px solid var(--gray-dark);
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      font-size: 1.2em;

      height: var(--btn-h);
      &:hover {
        border-color: var(--main-color);
        color: var(--main-color);
      }
      .login-form + & {
        margin-top: 10px;
      }
    }
  }
}

.modal.ticket {
  .modal-popup {
    border-radius: 0;
    box-shadow: none;

    .popup-content {
      border-radius: 0;
      box-shadow: none;
      overflow-x: hidden;
      overflow-y: auto;
      max-height: 100%;
      position: relative;
      background-color: transparent;
      padding: 0 10px;

      .ticket-img {
        background-color: #fff;
        border-radius: 20px;
        overflow: hidden;
        flex-shrink: 0;
        position: relative;
        width: 400px;
      }

      .subscr {
        color: #fff;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        width: 400px;

        p {
          line-height: 1.2;
          font-size: 0.8em;

          &::before {
            content: "•";
          }
        }
      }

      .ticket-printing {
        position: absolute;
        inset: 0;
        padding-top: 20%;
        line-height: 1.4;

        .qrcode {
          padding: 5% 30%;
        }

        .name {
          font-weight: bold;
          text-align: center;
          font-size: 1.7em;
          line-height: 1.3;
          color: #000;
        }

        .remain {
          text-align: center;
          font-size: 1.1em;
          display: block;
          color: var(--gray-mid);
          margin-bottom: 1%;

          span {
            color: var(--gray-dark);
          }

          .num {
            font-weight: bold;
            color: var(--main-color);
          }
        }

        .info {
          display: flex;
          justify-content: space-between;
          padding: 4% 7%;
          gap: 4%;
          background-color: transparent;

          dt {
            font-weight: bold;
            color: var(--gray-light);
            font-size: 0.85em;
          }

          dd {
            font-size: 1.1em;
          }
        }

        .date {
          font-weight: bold;
          text-align: center;
          font-size: 1.4em;
          color: #000;
        }
      }

      .ticket-bg {
        img {
          width: 400px;
          display: none;
        }
      }
    }
  }

  .ticket-bg {
    width: 400px;
    aspect-ratio: 8.6/15;
    background: url(/youthCenter/images/img/ticket.svg) no-repeat center
      bottom/100% auto;
  }
}

/* Stamp */
.stamp {
  --color: var(--main);
  position: absolute;
  width: 240px;
  height: 240px;
  border: 4px solid var(--color);
  border-radius: 50%;
  opacity: 1;
  transform-origin: center;
  transform: rotate(-30deg);
  left: 20%;
  bottom: 10%;
  padding: 10px;
  box-sizing: border-box;
  color: var(--color);
  z-index: 3;
  mix-blend-mode: multiply;
  font-weight: 900;
  font-size: 2.5em;
  text-align: center;
  line-height: 212px;
  &::before {
    content: "";
    width: 212px;
    height: 212px;
    left: 10px;
    top: 10px;
    border-radius: 50%;
    border: 10px solid var(--color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: absolute;
  }
  &.used {
    --color: rgb(0, 149, 255);
  }
  &.expired {
    --color: orangered;
  }
  &.canceled,
  &.unabled {
    --color: rgb(171, 0, 0);
  }
}
.item .stamp {
  bottom: initial;
  top: var(--padding);
  mix-blend-mode: hard-light;
  z-index: 100;
}

.cal-huge-full .mask,
div.max {
  width: 100vw !important;
}

@keyframes certok {
  0% {
    background-color: var(--main-color);
  }
  50% {
    background-color: var(--main-light);
  }
  100% {
    background-color: var(--main-color);
  }
}

/* 기존수강자 인증 모달 */
.returning-verify-program-name {
  font-size: 0.9em;
  font-weight: 700;
  color: var(--main-color);
  background: var(--gray-pale, #f5f6f8);
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  text-align: center;
  word-break: keep-all;
}
.returning-verify-program-name:empty {
  display: none;
}

/* 기존수강자 인증 모달 안내 문구 */
@keyframes blink-notice { 0%,100%{opacity:1} 50%{opacity:.4} }
.returning-verify-notice {
  margin-top: 10px;
  font-size: 13px;
  color: #e65100;
  line-height: 1.6;
  font-weight: 600;
  animation: blink-notice 1.5s ease-in-out infinite;
}

/* Modal open state */
.modal-on {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Sanctions size */
.modal.sanctions {
  .modal-popup {
    width: 340px;
  }
  .modal-popup .head strong {
    color: var(--main-color);
  }
}

/* System modal tweaks */
.modal.system {
  &.error {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
  }
  .popup-content {
    max-height: calc(100% - var(--input-h));
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  }
  .modal-popup {
    box-shadow: 60px 60px 60px rgba(0, 0, 0, 0.5);
  }
}

/* Lottery log */
.lottery-log {
  .modal-popup {
    max-width: 700px;
    width: fit-content;
  }
  .list.horizon.log {
    gap: 10px;
    margin-top: var(--padding);
    li {
      padding: 20px;
      border: 1px solid var(--gray-border);
      border-radius: 8px;
      &.canceled {
        background-color: var(--gray-pale);
        text-decoration: line-through;
        opacity: 0.5;
      }
    }
  }
}

/* Privacy / forms */
.popup-content {
  .form {
    margin-top: 30px;
  }
  .form + div {
    margin-top: 30px;
  }
  .form h4,
  .privacy h4 {
    margin-bottom: 12px;
  }
  .privacy {
    .agreement {
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    ul.agree {
      display: flex;
      flex-direction: column;
      gap: 6px;
      li {
        display: flex;
        gap: 5px;
        color: var(--gray-mid);
        line-height: 1.2;
        &::before {
          content: "•";
          opacity: 0.5;
        }
        ul li::before {
          content: "-";
        }
        strong {
          color: var(--gray-dark);
        }
      }
    }
    .agreement .inputs {
      justify-content: center;
      font-size: 1.3em;
      font-weight: bold;
      margin-top: 10px;
    }
  }
}

/* Additional responsive targets placed under their classes */
.my {
}
.reserved-my-ticket {
}
.info-sub {
}

/* =========================
   PROGRAM DETAIL (modal)
   ========================= */
.modal.program-detail {
  .popup-content {
    max-width: 800px;
    > li {
      padding: 0;
    }
  }

  .program-detail-body {
    display: flex;
    flex-direction: column;
  }

  .program-detail-thumb {
    order: 2;
    overflow: hidden;
    background: #f3f5f8;
  }

  .program-detail-copy {
    order: 1;
    padding: var(--padding);
    .program-detail-category {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--color, var(--main-color));
      font-size: 0.95em;
      font-weight: 700;

      .program-detail-category-icon {
        font-size: 1.15em;
        line-height: 1;
      }
    }

    p {
      color: var(--gray-mid);
    }
  }

  .program-detail-facts {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    border: 1px solid var(--gray-border);
    border-radius: 8px;

    dl {
      display: grid;
      grid-template-columns: 60px minmax(0, 1fr);
      gap: 8px 14px;
      margin: 0;
      padding: 15px;
      border-bottom: 1px solid var(--gray-border);
      margin-bottom: -1px;
      word-break: keep-all;
      &:nth-child(even) {
        border-left: 1px solid var(--gray-border);
      }
    }

    dt {
      font-weight: 700;
      color: var(--gray-dark);
    }

    dd {
      margin: 0;
      color: var(--gray-mid);

      .data-date {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
      }

      .period-days {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 3px;
      }

      .period-weekly {
        aspect-ratio: 1 / 1;
        height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10em;
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        border: 1px solid var(--gray-border);
        vertical-align: text-bottom;
      }
    }
  }

  .program-detail-schedule {
    margin-top: 20px;

    h4 {
      font-weight: 700;
      margin-bottom: 10px;
      color: var(--gray-dark);
    }

    table {
      width: 100%;
      border-collapse: collapse;
      border: 1px solid var(--gray-border);
      border-radius: 8px;
      overflow: hidden;
      font-size: 0.9em;
      line-height: 1.4;
    }

    thead {
      background-color: var(--gray-pale, #f5f6f8);

      th {
        padding: 10px 12px;
        font-weight: 700;
        color: var(--gray-dark);
        border-bottom: 1px solid var(--gray-border);
        white-space: nowrap;
        text-align: center;
      }
    }

    tbody {
      td {
        padding: 10px 12px;
        border-bottom: 1px solid var(--gray-border);
        color: var(--gray-mid);
        text-align: center;
        word-break: keep-all;
      }

      tr:last-child td {
        border-bottom: 0;
      }
    }
  }
}

/* ==========================================================================
   반응형 스타일 (Responsive Styles)
   ========================================================================== */

@media (max-width: 812px) {
  .modal {
    max-width: 100vw;
  }
  .modal.on {
    padding: 5px;
  }
  .modal.on.system {
    padding: 20px;
  }
  .modal.on:has(.calendar) {
    padding: 0;
    backdrop-filter: initial;
    overflow: visible;
  }
  .modal.on:has(.calendar) .modal-popup {
    height: 100%;
    overflow: visible;
  }
  .modal.on:has(.calendar) .modal-popup .popup-content {
    flex-grow: 1;
    height: 100%;
    overflow: visible;
  }
  .modal.on:has(.calendar) .modal-popup .popup-content .calendar {
    height: 100%;
    overflow: visible;
  }
  .modal.on:has(.calendar) .modal-popup .popup-content .calendar .calendar-in {
    height: 100%;
    overflow-y: auto;
  }
  .modal.on:has(.calendar)
    .modal-popup
    .popup-content
    .calendar
    .calendar-in
    .pignose-calendar {
    border: 0;
    overflow: visible;
  }
  .modal .reserv-ui a.submit,
  .modal .reserv-ui a.pay {
    display: none;
  }
  .modal .popup-content > li {
    padding: 30px 20px;
  }
  .modal .modal-popup {
    max-width: 100%;
    max-height: 100%;
    border-radius: 20px;
    min-width: 80%;
  }
  .modal .btn-set a {
    height: var(--btn-h);
    line-height: var(--btn-h);
  }
  .modal .filebox label,
  .modal .filebox input {
    font-size: 12px;
  }

  .modal.login {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .modal.login .popup-content {
    max-height: initial;
    flex-grow: 1;
  }
  .modal.login .popup-content.split > li.non-login {
    border: 0;
  }

  .modal.ticket .popup-content .subscr {
    padding-left: 20px;
    width: 100%;
  }
  .modal.ticket .popup-content .ticket-img {
    width: 100%;
  }
  .modal.ticket .popup-content .ticket-printing {
    font-size: 1.2em;
  }

  .lottery-log .list.horizon.log li {
    padding-right: 10px;
  }
  .lottery-log .list.horizon.log li .btnset .button {
    flex-direction: column;
  }
  .lottery-log .list.horizon.log li .info-sub {
    flex-wrap: wrap;
    row-gap: 5px;
    font-size: 1em;
  }
  .lottery-log .list.horizon.log li .info-sub .status {
    width: 100%;
    font-size: 1em;
  }

  .my .list.horizon.log li .info {
    gap: 4px;
  }

  .reserved-my-ticket > li {
    font-size: 1em;
  }

  .info-sub {
    font-size: 1em;
  }

  .modal.program-detail {
    .program-detail-body {
      grid-template-columns: 1fr;
    }

    .program-detail-facts {
      grid-template-columns: 1fr;

      dl {
        grid-template-columns: 60px minmax(0, 1fr);
        gap: 4px;

        &:nth-child(even) {
          border-left: 0;
        }
      }
    }

    .program-detail-schedule table {
      font-size: 0.85em;
    }
  }
}



/* ---- global/css/components/notification.css ---- */


/* ==========================================================================
   Section 안내/알림 블록
   - 공통 notification 리스트 및 카드 스타일
   ========================================================================== */

/* ===== Notification ===== */
ul.notification {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  --gap: 60px;
  --cell: 2;
  row-gap: 3em;

  li {
    width: calc(100% / var(--cell) - (var(--gap) - var(--gap) / var(--cell)));
    display: flex;
    gap: 16px;

    h4 {
      margin-bottom: 6px;
    }

    &:has(h4:only-child) {
      align-items: center;
    }

    p {
      position: relative;
      display: flex;
      gap: 5px;
      font-size: 0.93em;
      color: var(--gray-mid);
      line-height: 1.4;
      .red {
        color: var(--red-color);
      }
    }

    .icon {
      font-size: 2.2em;
      position: relative;

      &.dup {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .xi-tint-o {
        font-size: 1.1em;
        margin-left: -0.1em;
      }
    }

    .noti-con {
      h5:first-child {
        margin-top: 0;
      }
      h5 {
        margin-top: 0.5em;
      }
      h6 {
        color: var(--gray-light);
        margin-bottom: 0.5em;
        font-size: 1rem;
      }
    }
  }
  /* 세로형 */
  &.vertical {
    flex-direction: row;
    --gap: 0px;
    --cell: 4;
    row-gap: 3em;
    justify-content: center;
    align-items: flex-start;
    li {
      width: calc((100% / var(--cell)) - (var(--gap) - (var(--gap) / var(--cell))));
      flex-grow: 0;
      .full & {
        --cell: 5;
        flex-grow: 1;
      }
      gap: 0.9em;
      flex-direction: column;
      text-align: center;
      p {
        width: 80%;
        margin: auto;
        font-size: 0.85em;
      }
      p::before {
        display: none;
      }

      .icon {
        font-size: 2em;
        aspect-ratio: 1/1;
        background-color: var(--gray-pale);
        border-radius: 50%;
        width: 40%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 300;
      }
    }
  }
  &.left {
    --gap: 1em;
    li {
      justify-content: flex-start;
      align-items: flex-start;
      text-align: left;
      .icon {
        margin: 0;
      }
    }
  }

  &.card {
    --gap: 20px;
    row-gap: var(--gap);
    --cell: 5;
    justify-content: flex-start;
    align-items: stretch;
    > li {
      width: calc(100% / var(--cell) - (var(--gap) - var(--gap) / var(--cell)));
      background-color: var(--gray-pale);
      border-radius: 12px;
      padding: 30px;
      .icon {
        background-color: var(--white);
      }
      p {
        width: 100%;
      }
      .full & {
        --cell: 5;
      }
    }
  }
  & + .noti {
    margin-top: var(--padding);
  }
}
.ul {
  li {
    padding-left: 10px;
    position: relative;
    line-height: 1.8;

    &::before {
      content: '•';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--gray-dark);
      opacity: 0.3;
    }
  }

  h5 {
    margin-bottom: 10px;
    font-size: 1.1em;
  }

  + .ul {
    margin-top: 30px;
  }
}
/* 시설 */
.feat {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  row-gap: 1em;
  line-height: 1.2;
  text-align: center;
  li {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .icon {
    font-size: 1.8em;
    font-weight: 300;
  }
  p {
    font-size: 13px;
  }
  &.over {
    column-gap: 3em;
    flex-wrap: wrap;
    .icon {
      font-size: 2.4em;
    }
    p {
      font-size: 14px;
    }
  }
}
@media (max-width: 812px) {
  ul.notification {
    li {
      width: 100%;
    }
    &.vertical {
      --cell: 2;
      align-items: flex-start;
      li {
        .full & {
          --cell: 2;
        }
        .icon {
          width: 60px;
          font-size: 2em;
        }
        p {
          width: 90%;
          font-size: 12px;
        }
      }
    }
    &.card {
      --gap: 10px;
      --cell: 2 !important;
      align-items: flex-start;
      li {
        padding: var(--padding);
        p {
          width: 100%;
        }
      }
    }
  }
  .feat {
    &.over {
      font-size: 1em;
      column-gap: 2em;
    }
  }
}



/* ---- global/css/components/options-complex.css ---- */



/* ---- global/css/components/overview.css ---- */
/* ==========================================================================
   Overview Components
   ========================================================================== */

/* Pay overview block */
.pay-overview {
  margin-bottom: 60px;
  display: flex;
  flex-direction: column;
  gap: 20px;

  .item {
    display: flex;
    gap: 20px;
    .thumb,
    .qr {
      margin: 0 auto;
      min-width: 200px;
      border-radius: 10px;
      aspect-ratio: 1/1;
      background-size: cover;
    }
    .qr {
      padding: 20px;
    }
    .infos {
      .info-sub {
        opacity: 0.6;
        margin-top: 10px;
      }
      .voucher {
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 0;
        margin-top: var(--padding);
        font-size: 0.9em;
        :where(th, td) {
          padding: 0;
          height: var(--cell-h);
          vertical-align: middle;
          border-color: rgba(255, 255, 255, 0.2);
        }
        td {
          color: var(--gray-lighter);
          padding-left: var(--padding);
          .status.complete {
            color: var(--mint-blue);
            font-weight: bold;
          }
        }
      }
      .option {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        > p {
          padding: 10px;
          border-radius: 5px;
          border: 1px solid var(--gray-border);
        }
        dl.price {
          justify-content: flex-end;
          line-height: 1.4;
          flex-wrap: wrap;
        }
      }
    }
  }
  .reserv-ui {
    width: 100%;
  }
}
.overview-set {
  display: flex;
  gap: 4em;
  row-gap: 1em;
  flex-wrap: wrap;
  .overview {
    &.small {
      flex: 0 0 auto;
      flex-wrap: wrap;
      gap: 2em;
      row-gap: 0.5em;
      align-items: flex-start;
      align-content: baseline;
      > h5 {
        position: absolute;
        top: 0;
        white-space: nowrap;
      }
      padding-top: 28px;
      > li {
        display: inline-flex;
        flex-direction: column;
        flex: 0 0 auto; /* 내용 크기만큼만 차지 */
        max-width: 100%;
        flex-wrap: wrap;
        min-width: 0;
        > p {
          font-size: 1.3em;
          &.init {
            font-size: 0.85em;
            color: var(--gray-mid);
          }
        }
      }
    }
  }
}
/* Overview blocks inside sub detail */
.overview {
  /* overview */
  display: block;
  position: relative;

  .price::before {
    content: var(--won);
  }
  p.ext {
    font-size: 0.8em;
    font-weight: normal;
  }
  h6 {
    color: var(--gray-light);
    margin-bottom: 5px;
  }
  > li {
    p {
      font-size: var(--padding);
      font-weight: 200;
      letter-spacing: -0.5px;
      color: var(--main-color);
      font-family: "Pretendard", sans-serif;
    }
  }
  & + .noti {
    margin-top: var(--padding);
  }
  .icon {
    font-size: 2.5em;
    font-weight: 300;
    margin-bottom: 0.5em;
    &.circle {
      aspect-ratio: 1/1;
      background-color: var(--gray-pale);
      width: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50em;
    }
  }
  &.small {
    height: auto;
    display: flex;
    gap: 60px;
    &.prices {
      background-color: color-mix(in srgb, var(--main-color) 5%, transparent);
      border-radius: 12px;
      padding: 30px;
      display: flex;
      align-items: center;
      .stitle {
        display: flex;
        flex-grow: 1;
        flex-direction: column;
        gap: 5px;
        h4 {
          display: flex;
          align-items: center;
          gap: 5px;
        }
        p {
          opacity: 0.6;
        }
      }
      & + & {
        margin-top: 12px;
      }
      > li {
        text-align: right;
        h6 {
          white-space: nowrap;
        }
      }
    }
  }
}

.overview-multi {
  border-top: 1px solid var(--gray-border);
  border-bottom: 1px solid var(--gray-border);
  padding: var(--padding) 0;
  &:first-of-type {
    border-top: 1px solid var(--gray-dark);
  }
  & + div {
    margin-top: -1px;
  }
  & + .noti {
    margin-top: 20px;
  }
}

/* ===== Overview MM ===== */
.overview-mm {
  th {
    width: 10%;
  }
  td {
    width: calc(90% / 5);
    border: 0;
    padding: var(--padding) 0;
  }
  th {
    border: 0;
    padding: var(--padding) 0;
  }
  h6 {
    color: var(--gray-light);
  }
  p {
    font-size: 1.45em;
    font-weight: 200;
    &.ext {
      font-size: 0.75em;
      font-weight: normal;
    }
    span.dimen {
      font-size: 0.8em;
    }
  }
}

/*  */
.schedule-overview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  font-size: 0.9em;
  .head + & {
    margin-top: 24px;
  }
  .infos {
    mix-blend-mode: multiply;
    padding: 24px 30px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    h3 {
      font-size: 1.3em;
    }
    .category {
      display: flex;
      align-items: center;
      gap: 4px;
      justify-content: center;
      .material-symbols-sharp {
        font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
      }
    }
    h2 {
      line-height: 1;
    }
  }
  &::after {
    content: "";
    background-color: var(--main);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.05;
    z-index: 0;
  }
}

@media (max-width: 812px) {
  .overview {
    &.small {
      display: flex;
      gap: 30px;

      padding: 0;
      li {
        flex-grow: 1;
        p {
          font-size: 18px;
        }
      }
      &.prices {
        flex-wrap: wrap;
        row-gap: 0.5em;
        padding: 24px;
        justify-content: space-evenly;
        align-content: space-evenly;
        &:has(.stitle) {
          .stitle {
            margin-bottom: 0.8em;
          }
          li {
            text-align: left;
          }
        }
      }
    }

    .img {
      margin: 30px 0 0;
      padding: 0 var(--padding);
    }
    .subscript {
      width: 100%;
      padding: 0;
      dl {
        border-top: 1px solid var(--gray-border);
        margin-top: 20px;
        padding-right: 0;
        bottom: 0;
        width: 100%;
        p {
          font-size: 12px;
          line-height: 1;
          border-bottom: 1px solid var(--gray-border);
        }
        dd {
          flex-grow: 1;
          p {
            text-indent: 10px;
          }
        }
      }
    }
  }

  .overview-mm {
    table,
    table tbody {
      display: block;
    }
    table tr {
      display: block;
    }
    tr {
      &:first-child {
        border-top: 1px solid var(--gray-dark);
        th {
          padding-top: 20px;
        }
      }
      th {
        width: 100%;
      }
      td:last-child {
        display: flex;
        position: absolute;
        align-items: center;
        right: 0;
        top: 20px;
        * {
          font-size: 0.8rem;
          font-weight: normal;
          color: var(--gray-mid);
        }
        h6 {
          margin-right: 3px;
        }
      }
    }
  }

  .pay-overview {
    padding: 0 10px;
    margin-bottom: 0;
    .item {
      flex-direction: column;
    }
  }
  .overview-multi {
    border-top: 1px solid var(--gray-border);
    border-bottom: 1px solid var(--gray-border);
    padding: 20px 0;
    &:first-of-type {
      border-top: 1px solid var(--gray-dark);
    }
    & + div {
      margin-top: -1px;
    }
    h4 {
      margin-bottom: 5px;
    }
    .overview.small li {
      width: calc(50% - 10px);
    }
  }
}



/* ---- global/css/components/popup.css ---- */
.popup {
  padding: 0px;
  top: 90px;
  border: 3px solid #fff;
  position: absolute;
  z-index: 12;
  background: #fff;
  max-width: 500px;
}

.price-popup {
  position: absolute;
  background-color: #fff;
  z-index: 20;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  min-width: 60%;
  border: 1px solid var(--gray-dark);
  border-radius: 12px;
  left: 260px;
  top: 0;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;

  .btn.on + & { /* &.on + .price-popup */
    pointer-events: all;
    opacity: 1;
  }

  .title {
    display: flex;
    align-items: center;
    padding: 30px 20px 20px 30px;

    a.close {
      padding: 10px;

      img {
        height: 18px;
      }
    }
  }

  h2 {
    flex-grow: 1;
  }

  .price-table {
    max-height: 40vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0px 30px 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 60px;

    .sect .overview-mm {
      margin-top: 30px;

      th,
      td {
        padding: 20px 0;
      }
    }
  }
}

@media (max-width: 812px) {
  .price-popup {
    left: 0;
    width: 100%;
    .title {
      padding: 20px;
      padding-right: 10px;
    }
    .price-table {
      padding: 0;
      gap: 0;
      .sect {
        > p,
        > h3 {
          padding: 0 var(--padding);
        }
        .overview-mm {
          td {
            p {
              font-size: 1em;
              &.ext {
                font-size: 0.7em;
              }
            }
            h6 {
              font-size: 0.7em;
            }
          }
          th h5 {
            font-size: 0.7em;
            padding-left: 10px;
          }
        }
        + .sect {
          border-top: 8px solid var(--gray-pale);
          padding-top: 30px;
        }
        > p {
          font-size: 0.85em;
        }
      }
    }
  }
}



/* ---- global/css/components/process.css ---- */
/* ==========================================================================
   프로세스 (Process) 스타일
   ========================================================================== */

.process {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;

  li {
    flex-grow: 0;
    flex-shrink: 0;
    width: calc(var(--width) / 5 + 30px);
    height: calc(var(--width) / 5 + 30px);
    margin-left: -40px;
    color: #002470;
    text-align: center;
    padding-top: 50px;
    position: relative;
    border-radius: 50%;

    &:first-child {
      margin-left: 0;
    }

    &:last-child {
      box-shadow: -30px 0 30px rgba(23, 104, 207, 0.4);
      color: #fff;
      p {
        color: #fff;
      }
    }

    h4 {
      &:nth-of-type(2) {
        margin-top: 20px;
      }
    }

    &::after {
      content: '';
      background-color: rgba(23, 104, 207, 1);
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 50%;
      z-index: 0;
    }

    &:first-child::after {
      opacity: 0.1;
    }
    &:nth-child(2)::after {
      opacity: 0.2;
    }
    &:nth-child(3)::after {
      opacity: 0.3;
    }
    &:nth-child(4)::after {
      opacity: 0.4;
    }

    > * {
      position: relative;
      z-index: 1;
    }

    h4 {
      font-size: 20px;
      margin-bottom: 5px;
    }

    p + h5,
    h5 + h5 + h5 {
      margin-top: 15px;
    }

    p {
      color: #002470;
      opacity: 0.6;
      line-height: 1.4;
    }
  }
}

/* ==========================================================================
   반응형(Responsive) 스타일
   ========================================================================== */
@media (max-width: 812px) {
  .process {
    flex-wrap: wrap;
    margin-left: var(--padding);
    margin-top: 20px;
  }

  .process li {
    width: calc(100vw / 2 - 12px);
    height: calc(100vw / 2 - 12px);
    flex-shrink: 0;
    flex-grow: 0;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: -10px;

    h4 {
      font-size: 16px;
      &:nth-of-type(2) {
        margin-top: 10px;
      }
    }

    p {
      line-height: 1.4;
      font-size: 0.86em;
    }

    &:first-child {
      margin-left: calc(var(--padding) * -1);
    }
  }
}



/* ---- global/css/components/qr-voucher.css ---- */

/* QR/Voucher component */
.qr-voucher {
  display: flex;
  justify-content: space-between;
  gap: 2em;
  flex-direction: column;

  &:has(.code) {
    flex-direction: column;
  }

  &.horizon {
    flex-direction: row;

    .qrcode {
      &:has(.code) {
        padding: 20px;
      }

      .qr-info {
        &:has(.code) {
          flex-direction: column;
          justify-content: center;
          text-align: center;
        }

        .btns .btn {
          margin: auto;
        }
      }
    }
  }

  .qrcode {
    border: 1px solid var(--gray-border);
    padding: 0 30px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);

    &:has(.code) {
      justify-content: flex-start;
      padding: 10px 20px;
    }

    .qr-info {
      padding-top: 30px;

      &:has(.code) {
        flex-direction: row;
        display: flex;
        align-items: center;
        text-align: left;
        width: 100%;
        gap: 1em;

        .code > img {
          width: 190px;
        }

        .date {
          justify-content: flex-start;
          display: flex;
          align-items: center;
          gap: 0.3em;
        }
      }

      .code {
        .img {
          position: relative;
          z-index: 1;
          aspect-ratio: 1/1;

          .expired {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.8);
            -webkit-backdrop-filter: blur(7px);
            backdrop-filter: blur(7px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;

            .refresh {
              aspect-ratio: 1/1;
              background-color: var(--white);
              border-radius: 50em;
              display: flex;
              align-items: center;
              justify-content: center;
              line-height: 1;
              font-size: 3em;
              padding: 0.5em;
              color: var(--gray-mid);
              box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            }
          }
        }

        .valid-period {
          font-size: 1em;
          padding: 0.5em 1.2em;
          border: 1px solid var(--gray-border);
          mix-blend-mode: multiply;
          border-radius: 50em;
          width: fit-content;
          margin: auto;
          margin-top: -2.6em;
          background-color: rgba(255, 255, 255, 0.8);
        }
      }
    }
  }

  &.canceled {
    .qrcode {
      box-shadow: none;
      color: var(--gray-light) !important;

      .date,
      .qr-info {
        .price-status,
        .time {
          color: var(--gray-light) !important;
        }
      }

      .date {
        .label {
          display: none;
        }
      }
    }
  }

  .cert {
    margin-top: 30px;
    padding: 0;
    width: auto;

    .form {
      margin-top: 12px;

      > h4 {
        margin-top: 30px;
      }

      .legal {
        border: 1px solid var(--gray-border);
        padding: 15px;
        border-radius: 6px;

        > h5 {
          margin-top: 12px;

          &:first-child {
            margin-top: 0;
          }
        }
      }

      .agreement {
        margin-top: 10px;

        .agree {
          font-size: 1.2em;
          margin-top: 10px;
          font-weight: bold;
        }
      }
    }

    p + p {
      margin: 0;
    }
  }

  *:has(.code) {
    flex-direction: column;
  }
}

/* Voucher detail block inside sub */
.sub {
  .detail {
    .vouch {
      display: flex;
      width: 100%;
      gap: 20px;

      .qr {
        height: fit-content;
        text-align: center;

        .code {
          border: 1px solid var(--gray-border);
          border-radius: 10px;
          padding: 20px;

          > * {
            width: 150px;
            height: auto;
          }
        }

        p {
          margin-top: 10px;
          font-weight: bold;
          color: #000;
        }
      }

      .voucher {
        border: 1px solid var(--gray-border);
        border-radius: 10px;
        flex-grow: 1;

        table {
          border-top: 0;

          th {
            white-space: nowrap;
            width: 1%;
            padding: 20px;
            position: relative;

            &::before {
              content: '';
              width: 1px;
              height: 30%;
              position: absolute;
              right: 0;
              top: 35%;
              background-color: var(--gray-border);
              display: block;
            }
          }

          td {
            padding: 20px;
            color: var(--gray-mid);
          }

          tr:last-child > * {
            border: none;
          }
        }
      }
    }
  }
}

@media (max-width: 812px) {
  .sub {
    &.my {
      .detail {
        .detail-contents {
          .sect.qr-voucher {
            flex-direction: column;
          }
        }
      }
    }

    .article + .detail {
      .detail-contents {
        .sect.qr-voucher {
          padding-top: 0;
        }
      }
    }
  }

  .qr-voucher {
    .voucher-info {
      .select-item.vertical {
        gap: 10px;
      }
    }

    .cert {
      .form {
        > h4 {
          margin-top: 10px;
        }
      }
    }

    .qrcode {
      &:has(.code) {
        padding: 0 30px 30px;
      }

      .qr-info {
        &:has(.code) {
          display: block;
          text-align: center;

          .code > img {
            width: 100%;
          }

          .date {
            justify-content: center;
          }
        }

        .price-status > div {
          justify-content: center;
        }

        .code {
          .label {
            margin-top: 20px;
          }
        }

        .btns {
          margin-top: 15px;
          display: flex;
          gap: 0.3em;
          justify-content: center;

          .btn {
            font-size: 1.2em;
          }
        }
      }
    }
  }
}



/* ---- global/css/components/select-item.css ---- */
/*
 * 선택항목(.select-item) 및 선택된(.selected-item) 관련 UI
 * 분리된 파일
 */

/* ==========================================================================
   2. 선택된 항목 (Selected Items)
   ========================================================================== */
.selected-item {
  z-index: 10;
  position: relative;
  gap: 10px;
  display: flex;
  flex-direction: column;
  --map-color: var(--gray-dark);

  .full .reserv-ui & {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;

    > li {
      padding: 0;
      border: 0;
      .selected-info {
        padding: 0;
      }
      .selected-option.notyet + .price {
        display: none;
      }
    }
  }
  .reserv-ui & {
    padding: 0 10px;
  }
  &:has(.add) {
    li.none {
      display: none;
    }
  }
  > li {
    background-color: #fff;
    padding: 20px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    position: relative;
    align-items: flex-start;
    margin: 0;

    &.none {
      border: 0;
      display: flex;
      gap: 0;
      .selected-info {
        > * {
          display: none;
        }
        h3 {
          display: block;
        }
      }
      .selected-option,
      .price {
        display: none;
      }
    }

    .selected-info {
      display: flex;
      flex-direction: column;
      gap: 5px;
      position: relative;
      h3 {
        font-size: 1.1em;
        color: var(--map-color);
      }
      h4 {
        color: var(--gray-dark);
        font-size: 14px;
        &.category {
          justify-content: flex-start;
          gap: 4px;
        }
      }
      /* Merge: for row layout */
      gap: 3px;
      padding: 8px 0;
    }

    .selected-option {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin: 10px -10px 0;
      &.notyet {
        display: none;
      }
      select,
      input {
        height: auto;
        padding: 15px 35px 15px 15px;
        background-size: auto 8px;
        width: auto;
        flex-grow: 1;
      }
    }

    .selected-quantity,
    .price-quantity {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px -10px 0;
      gap: 12px;
      flex-wrap: wrap;
      .item {
        color: var(--gray-dark);
        font-weight: 600;
      }
      .price {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
        color: var(--gray-mid);
      }
      .full & {
        margin: 0;
      }
    }
    .ctg-name {
      display: flex;
      align-items: center;
      font-size: 0.85em;
      border: 1px solid var(--gray-border);
      padding: 8px 12px;
      border-radius: 50em;
    }

    .date {
      font-weight: bold;
    }

    .delete {
      position: absolute;
      right: 20px;
      top: 20px;
      z-index: 20;
      cursor: pointer;
      /* Merge: for row layout */
      order: 100;
      width: 30px;
      height: 30px;
      color: #fff;
      border-radius: 50%;
      background-color: var(--gray-light);
      display: none;
      align-items: center;
      justify-content: center;
      font-size: 0.8em;
      gap: 5px;
      margin-left: 10px;
      flex-shrink: 0;
    }

    h4 {
      font-size: 0.9em;
      color: var(--gray-mid);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    h3 {
      font-size: 1.1em;
      &.notyet {
        color: var(--gray-light);
      }
    }

    .full &.add {
      width: fit-content;
      display: flex;
      align-items: center;
      flex-direction: row;
      flex-wrap: wrap;
      padding: 0;
      border: 0;
      row-gap: 6px;
      column-gap: 1em;
      position: relative;
      padding-right: 30px;
      .delete {
        border-radius: 3px;
        display: flex;
        top: 0;
        right: 0;
        padding: 5px;
        font-size: 10px;
        width: 20px;
        height: 20px;
        margin: 0;
      }
      .selected-option,
      .selected-quantity,
      .price-quantity {
        width: 100%;
        flex-grow: 1;
        flex-direction: row;
      }
      .selected-option select {
        padding: 12px;
        padding-right: 30px;
        flex-grow: 1;
        font-size: 13px;
      }
      .price {
        display: flex;
        position: static;
        margin: 0;
        text-align: right;
        justify-content: flex-end;
      }
      .price-total {
        color: var(--map-color, --main-color);
        font-weight: bold;
        font-size: 1.2rem;
      }
      .selected-option {
        margin-left: 0;
      }
      .day {
        justify-content: flex-start;
        gap: 0.5em;
        .time {
          font-weight: normal;
          display: flex;
          align-items: center;
          gap: 2px;
          &::before {
            content: "schedule";
            font-family: "Material Symbols sharp";
          }
        }
      }
      .price-set {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 1em;
      }
      .price {
        display: flex;
        align-items: center;
        gap: 0.5em;
        .data-price {
          color: var(--map-color, --main-color);
          font-weight: bold;
        }
      }
    }
    .quantity {
      background-color: var(--gray-pale);
      padding: 5px;
      border-radius: 5em;
      input {
        height: auto;
        width: 30px;
        max-width: 30px;
        flex-shrink: 0;
        background-color: transparent;
        font-size: 14px;
      }
      a {
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        font-size: 12px;
        color: initial;
        &.disable {
          color: var(--gray-light);
        }
        &:hover {
          font-weight: bold;
          color: var(--main-color);
          background-color: var(--white);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
        }
      }
    }
    > a.print {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 0.9rem;
      gap: 5px;
      > span {
        font-size: 2em;
        font-weight: 200;
      }
    }
  }
  .check-item {
    position: absolute;
    top: 10px;
    left: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    input + label {
      margin: 0;
      display: block;
    }
    input[type="checkbox"] + label:before {
      margin: 0;
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }
  }
  .sub.payment & {
    margin-bottom: var(--padding);
    .item {
      user-select: none;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      width: 100%;
      padding: 0;
      border-radius: 10px;
      box-shadow: 0 20px 20px rgba(0, 0, 0, 0.05);
      border: 1px solid var(--gray-border);
      align-items: center;
      position: relative;
      background-color: #fff;
      gap: 30px;
      padding-right: var(--padding);

      &:has(.subinfo) {
        flex-wrap: wrap;
        padding: 24px;
        justify-content: space-between;
        .infos.selected-info {
          padding: 0;
          width: calc(100% - 240px);
          order: 1;
          .subinfo {
            margin-top: 10px;
          }
        }

        > div:nth-child(3) {
          order: 3;
        }
        .selected-option,
        .prices {
          flex-direction: row;
          order: 10;
        }
        .prices {
          column-gap: 2em;
        }
        .thumb {
          order: 2;
          border-radius: 10px;
        }
      }
      .infos.selected-info {
        padding: 20px 0;
      }
      .thumb,
      .qr {
        flex-grow: 0;
        flex-shrink: 0;
        width: 180px;
        height: 180px;
        background-position: center;
        background-size: cover;
        border-radius: 8px 0 0 8px;
        align-self: flex-start;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .qr {
        &.padd {
          padding: var(--padding);
        }
        canvas {
          width: 100%;
          height: 100%;
        }
        img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      .selected-info {
        flex-grow: 1;
        padding: 0 15px;
      }
      .selected-quantity,
      .price-quantity {
        margin: 0;
        width: auto;
        flex-grow: 0;
      }

      .selected-option {
        flex-grow: 0;
        width: auto;
        flex-direction: column;
        width: fit-content;
        margin: 0;
      }
      .selectbox {
        font-size: 0.85em;
        .selector {
          height: auto;
          padding: 12px;
          white-space: nowrap;
        }
      }
      .delete {
        margin: 10px;
      }
      .infos {
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        flex-grow: 1;
        h4 {
          font-size: 1em;
          color: var(--map-color, --gray-mid);
        }
        h3 {
          line-height: 1.2;
          font-size: 1.25em;
          c &.sub {
            color: initial;
          }
        }
        .complete & {
          h4 {
            color: var(--gray-mid);
          }
          h3 {
            color: var(--gray-dark);
          }
        }
        .day {
          font-size: 1rem;
          color: initial;
          .date.placeholder {
            display: none;
            color: var(--red);
          }
          .time.placeholder {
            color: var(--red);
            animation: blink-placeholder 1s infinite ease-in-out;
          }
          .btn {
            font-size: 12px;
            height: auto;
            padding: 5px 10px;
            .ms-icon {
              font-size: 1.2em;
            }
          }
        }
        p {
          color: var(--gray-mid);

          &.notice {
            color: var(--gray-dark);
          }
        }
      }

      div.prices {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      div.price {
        display: flex;
        align-items: center;
        color: var(--map-color, --main-color);
        &:has(.quantity) {
          gap: 1.5em;
          justify-content: space-between;
        }
      }
      .price,
      .prices {
        text-align: left;
        flex-shrink: 0;
      }
    }
  }

  @media (max-width: 812px) {
    /* full 레이아웃 내 selected-item */
    .full & {
      max-height: initial;
      overflow: hidden;
      > li {
        border: 0;
        flex-wrap: wrap;
        width: 100%;
        .selected-info {
          padding: 10px 0;
          h4 {
            font-size: 14px;
          }
        }
        &.add {
          padding-right: 0;
          padding-bottom: 12px;
          width: 100%;
          h3 {
            font-size: 1rem;
          }
          .selected-option {
            margin-left: 0 !important;
          }
          .delete {
            right: 0;
            top: 0;
            position: absolute;
          }
          .price-set {
            width: 100%;
          }
          .price {
            width: 100%;
            padding: 0;
            margin: 0;
            gap: 10px;
            text-align: right;
            justify-content: flex-start;
            h4 {
              font-size: 0.9rem;
            }
          }
          .name-n-price {
            flex-grow: 1;
            text-align: left;
            .data-price {
              text-align: left;
            }
          }
          .selected-option,
          .selected-quantity,
          .price-quantity {
            width: 100%;
            flex-grow: 1;
            flex-wrap: wrap;
            flex-direction: row;
          }
          .selected-quantity {
            width: fit-content;
            flex-grow: 0;
          }
          .price-name {
            flex-grow: 1;
          }
          .selected-option select {
            padding: 12px;
            flex-grow: 1;
          }
        }
        &.none {
          display: none;
          padding: 20px 20px 0 20px;
        }
      }
    }

    /* 결제(sub.payment) 페이지 내 selected-item */
    .sub.payment & {
      padding: 0 10px;
      margin-bottom: 0;
      padding-bottom: 20px;
      font-size: 1rem;
      overflow: visible;
      .sect & {
        padding: 0;
      }
      > li.item {
        flex-wrap: wrap;
        padding: 0;
        padding-bottom: 20px;
        gap: 20px;
        justify-content: center;

        &:has(.subinfo) {
          padding: 0 0 20px;
          .selected-info.infos {
            padding: 0 20px;
          }
          .thumb {
            order: 1;
            border-radius: 10px 10px 0 0;
          }
          .selected-info {
            order: 2;
          }
          .prices {
            flex-direction: column;
          }
        }

        .thumb {
          width: 100%;
          aspect-ratio: 16/9;
          border-top-right-radius: 8px;
          border-bottom-right-radius: 0;
          border-bottom-left-radius: 0;
          &.qr {
            aspect-ratio: 1/1;
            background-size: auto 100%;
            background-repeat: no-repeat;
          }
        }
        .selected-info {
          padding: 0 20px;
          margin: 0;
          &.infos {
            padding: 0 20px;
          }
        }
        .selected-option {
          width: 100%;
          margin: 0;
          padding: 0 20px;
          flex-wrap: wrap;
          flex-direction: row;
          > div,
          select {
            flex-grow: 1;
          }
        }
        .prices {
          width: 100%;
        }
        .price {
          width: 100%;
          padding: 0 20px;
        }
        a.print {
          flex-grow: 1;
          justify-content: center;
          text-align: center;
          flex-direction: row;
          span {
            font-size: 1.2em;
            font-weight: 400;
          }
        }
      }
      .reserv-ui & {
        padding: 0 20px 10px;
      }
    }
  }
}
.select-item-type {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  border-radius: 12px;
  padding: 24px;
  background-color: var(--gray-pale);
  order: 3;
  > div {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    .require::before {
      content: "*";
      color: var(--red);
      margin-right: 5px;
    }
    &:has(.require) {
      &:not(:has(.select-item .on)) {
        .require {
          animation: blink-placeholder 1s infinite ease-in-out;
        }
      }
    }
    .select-item {
      gap: 6px;
      &.vertical {
        flex-wrap: wrap;
        li {
          flex-grow: 1;
          width: calc(20% - 5px);
          border-radius: 12px;
          padding: 20px;
        }
      }
      li {
        font-size: 14px;
        border-radius: 10em;
        padding: 10px 20px 10px 10px;
        min-width: auto;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        border: 0;
        &.active,
        &.on {
          background-color: var(--map-color, var(--main-color));
          box-shadow: color-mix(
            in srgb,
            var(--map-color, var(--main-color)) 10%,
            transparent
          );
        }
      }
    }
  }
  @media (max-width: 812px) {
    padding: 20px;
    .selected-item & {
      border-radius: 0;
    }
    > div {
      .select-item.vertical {
        li {
          width: calc(50% - 10px);
        }
      }
    }
  }
}
.select-item {
  display: flex;
  padding: 0;
  gap: 10px;
  flex-wrap: wrap;

  .reserv-ui & {
    padding: 10px 10px 0;
    margin-top: 0;
  }

  > li {
    cursor: pointer;
    padding: 15px;
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-grow: 0;
    background-color: #fff;
    transition: 0.2s;
    min-width: 8em;
    line-height: 1;

    &.disable,
    &.disabled {
      background-color: var(--gray-pale);
      color: var(--gray-light);
      border: 1px solid var(--gray-border);
      pointer-events: none;
      &::before {
        content: "block";
        font-family: "Material Symbols Sharp";
      }
      &.on {
        pointer-events: none;
        background-color: var(--red-light);
        background-image: repeating-linear-gradient(
          45deg,
          var(--red) 0 8px,
          var(--red-light) 8px 16px
        );
        &::before {
          content: "unpublished";
        }
        .select-item:has(&) li {
          pointer-events: none;
        }
      }
    }

    &.on {
      background-color: var(--main-color);
      color: #fff;
      border-color: transparent;
      &::before {
        font-variation-settings: "FILL" 1;
        color: #fff;
      }
    }

    &::before {
      content: "check_circle";
      font-family: "Material symbols sharp";
      font-weight: 400;
      color: var(--gray-lighter);
      font-size: 1.6em;
    }

    .bk {
      color: var(--gray-dark);
    }

    .reserv-ui & {
      flex-grow: 1;
      min-width: initial;
    }

    .big {
      flex-grow: 1;
      font-size: 1.5em;
    }
    .infos {
      display: flex;
      gap: 1em;
      row-gap: 0.3em;
      margin: 0 0.5em;
    }
  }

  &.horizon > li .big {
    flex-grow: 0;
  }
  &.vertical {
    gap: 6px;

    .sect & {
      gap: 8px;
    }

    li {
      flex-direction: column;
      text-align: center;
      max-width: calc(100% / 2 - 3px);
      border-radius: 6px;

      .big {
        font-size: 1.7em;
        flex-grow: 0;
        + span {
          margin-left: 0;
        }
      }

      &::before {
        font-size: 1.5em;
      }

      &:first-child:nth-last-child(3),
      &:first-child:nth-last-child(3) ~ li {
        max-width: calc(100% / 3 - 5px);
      }
    }
  }
}
.time-select {
  .select-item {
    li {
      &::before {
        content: "schedule";
      }
    }
  }
  @media (max-width: 812px) {
    overflow: hidden;
    .select-item {
      li {
        width: calc(50% - 4px);
        font-size: 14px;
        padding: 8px 10px;
      }
    }
  }
}
/* select-item 배치/스타일 (섹션 컨텍스트) */
.ui-form > .sect {
  input,
  textarea,
  select,
  .select-item > li:not(.disable, .disabled) {
    border-color: transparent;
    border-radius: 8px;
  }
}

.ui-sect {
  .select-item,
  .input-ui {
    margin-bottom: var(--padding);
  }

  .select-item {
    .on {
      background-color: var(--main-color);
      border-color: var(--main-color);
      color: #fff;

      .big,
      p {
        color: #fff;
      }

      > p {
        opacity: 0.7;
      }
    }
  }

  > ul.select-item,
  > .input-ui {
    padding: 0 var(--padding);
  }
  .select-item > li {
    flex-grow: 0;
    min-width: 15%;
    line-height: 1;
    border-radius: 6px;
  }
  .select-item.vertical > li {
    gap: 8px;
  }
}

/*
 * --------------------------------------------------------------------------
 * reservation-ui.css에서 이동된 중첩/반응형 규칙들
 * 이 규칙들은 부모 선택자에 의존하므로 수동 검토가 필요할 수 있습니다.
 * --------------------------------------------------------------------------
 */

/* .full .reserv-ui.multi 내부의 .selected-item */
.full .reserv-ui.multi .selected-item {
  gap: 5px;
  max-height: 300px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* .paying 상태 관련 */
.paying {
  .selected-item li.none {
    display: none;
  }

  &.go-next .selected-item > li .selected-quantity,
  &.go-next .selected-item > li .price-quantity {
    display: flex;
  }
}

/* 반응형 내의 선택 아이템 */
@media (max-width: 812px) {
  .ui-sect,
  .ui-form {
    .select-item {
      li {
        font-size: 1em;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 50%;
        flex-grow: 1;
        .infos {
          flex-wrap: wrap;
          .info {
            flex-grow: 1;
            &.date {
              width: 100%;
              display: flex;
              justify-content: center;
              gap: 1em;
              font-size: 1.1em;
            }
          }
        }
      }
    }
  }
}



/* ---- global/css/components/reservation-ui.css ---- */
/*
 * 예약 UI 스타일시트
 * 최종 수정: 2025-09-18
 * 네이티브 CSS 네스팅 및 반응형 구조 개선
 */

/* ==========================================================================
   애니메이션 (Animations)
   ========================================================================== */
@keyframes today_blink {
  0%,
  100% {
    color: var(--gray-dark);
  }
  50% {
    color: var(--gray-light);
  }
}

@keyframes blink-placeholder {
  50% {
    opacity: 0.4;
  }
}

/* ==========================================================================
   1. 기본 구조 (Base Layout)g
   ========================================================================== */
.reserv-ui {
  width: 300px;
  flex-grow: 0;
  flex-shrink: 0;
  /* border: 1px solid var(--gray-border); */
  border-radius: 12px;
  position: sticky;
  right: 0;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  height: fit-content;
  max-height: calc(100vh - var(--top-h) - 40px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  user-select: none;
  :has(.gnb .tabs) & {
    max-height: calc(100vh - var(--top-h) - 40px - var(--tab-h));
  }
  &.active {
    z-index: 10;
  }

  .cs-info {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.5);
    gap: 10px;
    padding: 12px 20px;
    background-color: color-mix(in srgb, var(--main-color) 5%, transparent);
    border-radius: 10px 10px 0 0;
    align-items: center;
    .title {
      h4 {
        opacity: 0.6;
        font-size: 0.9em;
      }
      h3 {
        font-size: 1.1em;
      }
    }
    .icon {
      width: 60px;
    }
  }

  .item & {
    .reserv-ui {
      ul.total.pay {
        font-size: 1rem;
      }
    }
  }
  &.active:has(.selecting .selection) & {
    padding-left: 300px;
    margin-left: -300px;
  }
  &.need-login {
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    overscroll-behavior: none;

    .login-wrap {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      color: #fff;
      z-index: 50;
      display: block;

      .overlay {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 2em;
        text-align: center;
        word-break: keep-all;

        h3 + p {
          margin-top: 10px;
        }

        .btns {
          width: 100%;
          font-size: 1rem;
          font-weight: bold;
          margin-top: 1em;
          display: flex;
          gap: 0.5em;

          a {
            display: block;
            border-radius: 5px;

            &.impo {
              background: var(--main-gra-rev);
              color: #fff !important;
            }
          }
        }
      }
    }
  }

  .login-wrap {
    display: none;
  }

  &.with-season {
    dl.input {
      &.class-pick,
      &.date-time-pick,
      &.grade-pick,
      &.age-pick,
      &.age-sim-pick {
        display: none;
      }
    }
  }

  .choose {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    .reserv-ui.active:has(.selecting .selection) & {
      padding-left: 300px;
      margin-left: -300px;
    }

    .head {
      padding: var(--padding);
      padding-right: 12px;
      border-top: 0;

      dt {
        padding-left: 0;
        margin-bottom: 5px;
      }

      dd {
        font-size: 26px;
        font-weight: 200;

        &::before {
          content: var(--won);
        }
      }

      .price + .upcoming {
        margin-top: 10px;
      }
    }

    .upcoming {
      display: flex;
      align-items: center;

      .ment {
        font-size: 0.9em;
        animation: today_blink 0.6s infinite ease-in-out;

        i {
          font-size: 1.2em;
          vertical-align: middle;
          margin-top: -2px;
          display: inline-block;
        }
      }
    }
  }

  dl {
    border-top: 1px solid var(--gray-border);
    padding: 20px 0 10px 0;
    position: relative;
    z-index: 1;

    &:first-child {
      border-top: 0;
    }

    dt {
      display: flex;
      align-items: center;
      gap: 5px;
      color: var(--gray-light);
      font-size: 12px;
      font-weight: bold;
      padding-left: 20px;

      + p {
        margin-top: 2px;
      }

      a.modify {
        flex-grow: 1;
        text-align: right;
        padding-right: 20px;
        text-decoration: underline;
        color: var(--gray-dark);
        font-size: 0;

        &::before {
          content: "수정";
          font-size: 12px;
        }

        &.ok {
          color: var(--main-color);

          &::before {
            content: "완료";
          }
        }
      }
    }

    &.require dt::before {
      color: var(--red-color);
      content: "\ea0f";
      font-family: "xeicon";
      font-size: 0.7em;
    }

    &.disable {
      background-color: var(--gray-pale);

      dd > * {
        opacity: 0.4;
      }
    }

    &.schedule {
      margin: 0;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 0;
      border: 0;

      .title {
        display: flex;
        align-items: center;
        gap: 5px;

        dt {
          background-color: var(--color);
          color: #fff;
          aspect-ratio: 1/1;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          padding: 0;
          width: 24px;
        }

        h4 {
          color: var(--color);
          font-size: 1.1em;
        }
      }

      dd.time::before {
        content: "schedule";
        font-family: "Material symbols sharp";
        vertical-align: middle;
        margin-right: 2px;
        font-size: 1.2em;
      }
    }

    &.sub-form {
      display: none;
    }

    &.selecting {
      z-index: 2;
      background-color: color-mix(in srgb, var(--main-color) 3%, transparent);

      dt,
      dd {
        color: var(--gray-dark);
        overflow: visible;
      }
    }
  }

  dd {
    > * {
      min-height: var(--ui-input);
    }
    input,
    select {
      width: 100%;
      border: none;
      display: block;
      padding: 0 20px;
      outline: 0;
      height: var(--ui-input);
      background-color: transparent;
      font-size: 1rem;
      &:focus {
        border: 0;
      }
    }
    input[type="checkbox"],
    input[type="radio"] {
      display: none;
    }
    .selector,
    select,
    .datepicker {
      background: url(../images/icon/select.svg) no-repeat right 20px center;
      padding-left: 20px;
      color: var(--gray-dark);
      opacity: 1;

      &:disabled {
        background: none;
      }
    }
    .selectbox {
      font-size: 1rem;
      padding: 0;
      .selector {
        background-image: none;
        border: 0;
        min-height: var(--ui-input);
        height: auto;

        &::after {
          top: 12px;
        }
      }
    }

    .datepicker {
      background-image: url(../images/icon/calendar.svg);
      background-size: auto 14px;
    }
    p.attend {
      color: var(--gray-mid);
      font-size: 12px;
      padding-left: var(--padding);
      display: flex;
    }
  }

  .selection {
    position: absolute;
    background-color: #fff;
    border: 1px solid var(--gray-dark);
    border-radius: 10px;
    z-index: 12;
    left: -300px;
    top: 0;
    width: 280px;
    transition: 0.2s;
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    dl.selecting &:not(.static) {
      opacity: 1;
      visibility: visible;
      box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.15);
      padding: 20px 0;
    }

    &.multi {
      padding: 0;
    }

    &.static,
    .always & {
      position: static;
      opacity: 1;
      display: block;
      width: auto;
      visibility: visible;
      border: 0;
      background-color: transparent;
      box-shadow: none;
    }

    .always & li {
      padding: 5px 20px;
    }

    > li {
      display: flex;
      padding: 0 20px;
      align-items: center;
      flex-wrap: nowrap;
      height: auto;
      justify-content: space-between;

      select {
        margin: 0;
        background-position: right center;
      }
      .name {
        font-weight: bold;
        font-size: 12px;
        color: var(--gray-light);
      }
      .item-name {
        flex-grow: 1;
      }
    }

    .option-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 10px 0;
      li {
        display: flex;
        align-items: center;
        width: 100%;

        .quantity {
          text-align: right;
          flex-grow: 0;
          gap: 0;
          width: fit-content;
          justify-content: space-between;
          background-color: var(--gray-pale);
          border-radius: 8px;
          padding: 3px;
          .selecting & {
            background-color: rgba(0, 0, 0, 0.03);
          }
          input {
            width: 36px;
            padding: 0;
            border: 0;
          }
          a {
            width: 32px;
            height: 32px;
            font-size: 0.8em;
            border-radius: 8px;
            background-color: transparent;
            border: 0;
            &:hover {
              background-color: var(--white);
              color: var(--main-color);
              box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
            }
            &.disable {
              box-shadow: none;
            }
            :focus {
              outline: 0;
              border: 0;
            }
          }
        }

        .item-name {
          flex-grow: 1;

          p {
            font-size: 14px;
            font-weight: bold;
            opacity: 0.6;
          }
          .price {
            font-size: 15px;
            display: flex;
            align-items: flex-end;
            gap: 5px;
            .before {
              font-size: 0.85em;
            }
          }
        }
      }
    }

    &.option > li {
      flex-wrap: wrap;
    }

    a.ok {
      display: block;
      text-align: center;
      border: 2px solid var(--gray-dark);
      border-radius: 6px;
      width: 100%;
      color: var(--gray-dark);
      font-weight: bold;
      padding: 15px 0;
    }
  }
  .checks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    input + label {
      margin: 0;
    }
    &.opt {
      padding: 0 20px;
      & + .opt-show {
        display: none;
      }
      &:has(.yes:checked) + .opt-show {
        display: block;
      }
    }
  }
  dl.total-payment {
    padding-bottom: 0;
    border-top: 1px dashed var(--gray-border);
    padding-top: 0;
    dt {
      padding-top: 20px;
      margin-bottom: 5px;
    }
  }
  ul.total {
    padding: 0 20px 20px;
    font-size: 14px;
    li {
      display: flex;

      &.discount,
      &.discount * {
        color: var(--red-color) !important;
        font-weight: bold;
      }

      p {
        flex-grow: 1;
        line-height: 1.6;

        &.price {
          color: var(--gray-dark);
          text-align: right;

          &::before {
            content: var(--won);
          }
        }
      }
    }
    &.pay {
      display: flex;
      align-items: center;
      border-top: 1px dashed var(--gray-border);
      padding: 20px;
      font-size: 14px;

      p,
      > * {
        font-size: 14px;
      }

      > * {
        flex-grow: 1;
        font-weight: bold;
        color: var(--gray-dark);
      }

      p:last-of-type {
        text-align: right;
        color: var(--main-color);
        font-size: 1.2em;
        &.refund {
          color: var(--red);
        }
      }
    }
  }

  .reserv-btns {
    display: flex;
    flex-direction: column;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
    flex-shrink: 0;
    a {
      display: block;
      color: #fff;
      text-align: center;
      height: 60px;
      line-height: 60px;
      position: relative;
      transition: background 0.5s ease-in-out;
      overflow: hidden;
      overscroll-behavior: none;
      font-weight: bold;
      background: var(--gray-dark);
      font-size: 15px;
      &.submit {
        background: var(--main-gra);
        box-shadow: 0 10px 20px
          color-mix(in srgb, var(--main-color) 20%, transparent);
        animation: bokemove 30s linear infinite alternate,
          blink 1s infinite alternate;
      }

      &.pay {
        background: var(--main-gra-rev);
        box-shadow: 0 10px 20px
          color-mix(in srgb, var(--main-color) 20%, transparent);
        animation: bokemove 30s linear infinite alternate,
          blink 1s infinite alternate;
      }
      &.refund {
        background: var(--red);
        box-shadow: 0 10px 20px color-mix(in srgb, var(--red) 20%, transparent);
        animation: bokemove 30s linear infinite alternate,
          blink 1s infinite alternate;
      }
    }
  }

  .tooltip {
    position: absolute;
    background-color: #fff;

    font-size: 0.85em;
    border-radius: 6px;
    top: -100%;
    z-index: 20;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    border: 1px solid rgba(0, 0, 0, 0);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transition: max-height opacity 0.2s;
    left: 0;
    max-height: 0;

    &.on {
      opacity: 1;
      top: -80px;
      padding: 12px;
      pointer-events: all;
      max-height: 100px;
    }

    &::after {
      content: "";
      border: 10px solid transparent;
      border-top: 10px solid #fff;
      position: absolute;
      bottom: -20px;
      left: 20px;
    }

    > i:first-child {
      width: 30px;
      height: 30px;
      background-color: var(--red);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      font-size: 1.3em;
      flex-shrink: 0;
    }

    .hide {
      font-size: 1.3em;
      margin-left: 10px;
    }
  }
}
.full .reserv-ui {
  bottom: 0;
  top: auto !important;
  width: var(--width);
  position: fixed;
  left: calc((100% - var(--width)) / 2);
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: row;
  align-items: center;
  border-radius: 36px 36px 0 0;
  background-color: var(--white);
  padding: 10px;

  > h4:first-of-type {
    padding-left: 10px;
  }

  .choose {
    flex-shrink: 1;
    flex-grow: 1;
    pointer-events: all;
  }

  .head {
    display: none;
  }

  dl.total-payment {
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
    flex-grow: 0;
    justify-content: flex-end;
    gap: 16px;
    .payment & {
      gap: 0;
      dd {
        flex-grow: 1;
        text-indent: 20px;
      }
      flex-grow: 1;
      ul.total.pay {
        flex-grow: 1;

        li {
          gap: 10px;
        }
        p:first-child {
          display: block;
        }
      }
    }
  }

  ul.total.pay {
    padding: 0;
    margin: 0;
    border: 0;
    font-size: 1.2em;

    > *,
    p {
      font-size: 1em;
    }

    p:first-child {
      display: none;
    }
  }

  .reserv-btns {
    padding-left: 10px;
    overflow: visible;

    > a {
      padding: 0 20px;
      margin: 0;
      border-radius: 8em;
      &.notyet {
        border: 0;
        background-color: var(--gray-pale);
        color: var(--gray-light);
        font-weight: normal;
        pointer-events: none;
      }
      &.submit {
        font-weight: bold;
        padding: 16px 24px;
        display: flex;
        color: #fff;
        border-radius: 8em;
        align-items: center;
        justify-content: center;
        line-height: initial;
      }
    }
  }

  .agree-policy {
    flex-grow: 0;
    display: none;
    align-items: center;
    justify-content: flex-end;
    margin-right: 1em;
    text-align: left;
    font-size: 0.9em;
    gap: 6px;

    > * {
      flex-grow: 0;
    }

    input[type="checkbox"] + label:before {
      flex-grow: 0;
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      border-radius: 50%;
      border-color: var(--gray-dark);
    }

    &:has(input[type="checkbox"]) + .total-payment {
      max-width: 0;
      transition: 0.3s;
      overflow: hidden;
    }

    &::after {
      content: "이용자 준수사항을 확인하셨습니까?";
    }

    &:has(input[type="checkbox"]:checked)::after {
      content: "이용자 준수사항 확인함";
    }

    &:has(input[type="checkbox"]:checked) + .total-payment {
      max-width: 200px;
      overflow: visible;
    }

    input + label {
      margin: 0;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
  }

  .go-next & .agree-policy {
    display: flex;
  }

  &.multi {
    dl.total-payment {
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: flex-end;
    }
  }
  &.payment .reserv-ui {
    dl.total-payment {
      flex-grow: 1;
      width: 100%;
      padding-left: 10px;
    }

    ul.total.pay p:first-child {
      display: block;
    }
  }
}

/* ==========================================================================
   3. ui-sect ui요소 (ui-item)
   ========================================================================== */
.ui-sect:has(.sect.date .time-schedule) {
  .sect.date:not(:has(dl.schedule.active)) + .sect.set-ea {
    .ui-item.prices li .quantity {
      position: relative;
      box-shadow: none;
      background-color: transparent;
      > * {
        opacity: 0;
      }
      &::before {
        content: "일정을 먼저 선택하세요";
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 1);
        /* backdrop-filter: blur(8px); */
        color: var(--gray-mid);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        border-radius: 20em;
        @media (max-width: 812px) {
          background-color: transparent;
        }
      }
    }
    .ui-item.prices.select-price {
      position: relative;
      li {
        position: relative;
        box-shadow: none;
        background-color: transparent;
        pointer-events: none;
        background-color: var(--white);
      }
      &::before {
        content: "일정을 먼저 선택하세요";
        font-weight: bold;
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(3px);
        color: var(--gray-mid);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        border-radius: 20em;
        @media (max-width: 812px) {
          background-color: transparent;
        }
      }
    }
  }
  .sect.date:has(dl.schedule.active) + .sect.set-ea {
    .ui-item.prices li .quantity {
      &::before {
        display: none;
      }
    }
  }
}
.ui-item {
  display: flex;
  gap: 10px;

  &.prices {
    margin-top: 0;
    .ui-sect & {
      padding: var(--padding);
    }
    .ui-sect .head + & {
      margin-top: 0;
    }

    li {
      pointer-events: none;
      .ui-sect & {
        pointer-events: all;
      }
      background-color: color-mix(in srgb, var(--main-color) 4%, transparent);
      padding: var(--padding);
      border-radius: 12px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 20px;
      flex-grow: 0;
      user-select: none;
      border: 2px solid transparent;
      transition: background-color, border-color 0.3s;
      .selet-item & {
        border: 0;
        &::before {
          display: none;
        }
      }
      .full & {
        flex-grow: 0;
        flex-wrap: wrap;
        padding: 10px;
        gap: 10px;
        align-content: space-between;
        align-items: center;
        .item-name {
          padding: 10px;
          .name:has(.price-multi) {
            flex-grow: 1;
          }
        }
      }
      .wrap:not(.full) & {
        pointer-events: none;
      }
      &:not(:has(.quantity)) {
        cursor: pointer;
      }
      &.selected:not(:has(.quantity)),
      &:hover:not(:has(.quantity)) {
        border: 2px solid var(--main-color);
        background-color: var(--white);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
      }
      .item-name {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        flex-grow: 1;

        .name {
          display: flex;
          flex-direction: column;
          gap: 0.2em;
          h4 {
            font-size: 1.2em;
          }
          > p {
            color: var(--gray-mid);
            font-weight: 400;
            font-size: 14px;
            &:last-of-type {
              flex-grow: 1;
            }
          }
        }
        .ms-icon {
          aspect-ratio: 1/1;

          color: var(--main-color);
          border-radius: 50%;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 2.4em;
        }

        .price-multi {
          margin-top: 5px;
          flex-grow: 1;
          display: flex;
          flex-wrap: wrap;

          column-gap: 2em;
          row-gap: 1em;
          .price {
            h5 {
              opacity: 0.6;
              font-size: 0.9em;
            }
            > p {
              font-size: 1.2em;
              color: var(--main-color);
              display: flex;
              gap: 5px;
              row-gap: 0;
              align-items: flex-end;
              flex-wrap: wrap;
            }
            .before {
              font-size: 0.75em;
            }
          }
        }
      }
      .quantity {
        flex-grow: 1;
        border-radius: 10em;
        background-color: var(--white);
        padding: 5px;
        justify-content: flex-start;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
        display: flex;
        height: fit-content;

        input {
          background: transparent;
          height: auto;
          flex-grow: 1;
          font-size: 1.2em;
        }
        a {
          border: 0;
          &:hover {
            background-color: var(--white);
            color: var(--main-color);
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
          }
        }
      }
      &.unable {
        pointer-events: none;
        filter: grayscale(1);
        opacity: 0.6;
        cursor: no-drop;
      }
    }
  }
}
/* ==========================================================================
   4. 상태별 스타일 (Stateful Layouts)
   ========================================================================== */
.ui-fix .reserv-ui {
  top: calc(var(--top-h) + 20px);
  .full & {
    left: calc((100% - var(--width)) / 2);
  }
}

.ui-fix:has(.gnb .tabs) .reserv-ui {
  top: calc(var(--top-h) + var(--tab-h) + 20px);
}

/* ==========================================================================
   5. 기타 (Miscellaneous)
   ========================================================================== */

/* .sub.complete .detail {
  .reserv-ui .reserv-btns > a.submit {
    background: var(--gray-dark);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  }

  .reserv-ui ul.total.pay {
    margin-top: 0;
    padding-top: 0;
    border: none;
  }
} */

/* ==========================================================================
   6. 반응형 (Responsive)
   ========================================================================== */
@media (max-width: 812px) {
  .reserv-ui {
    .ui-fix & {
      top: initial;
      .full & {
        left: initial;
      }
    }

    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    top: initial !important;
    z-index: 30;
    transform: translate3d(0, 0, 0);
    border: 0;
    background-color: transparent;
    max-height: 100%;
    flex-direction: column;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    .cs-info {
      display: none;
    }
    .close-ui {
      display: none;
      height: 20px;
      width: 100%;
      flex-shrink: 0;
      align-items: flex-end;
      justify-content: center;
      position: relative;
      z-index: 32;
      cursor: pointer;

      &::before {
        content: "";
        font-family: "xeicon";
        transform: rotate(180deg);
        transition: 0.2s;
      }
    }
    .choose {
      position: relative;
      z-index: 50;
      pointer-events: all;
      overflow: hidden;
      flex-grow: 0;
      transition: 0.2s ease-in-out;
      max-height: 0;
      border: 0;
      padding: 0;
      margin: 0;
      background-color: var(--white);
      .head {
        display: none;
      }
      .reserv-ui.active:has(.selecting .selection) & {
        padding-left: 0;
        margin-left: 0;
      }
    }

    dd {
      input,
      select {
        font-size: 1rem;
      }
    }

    .selection {
      font-size: 16px;
      width: initial;
      position: static;
      border: none;
      box-shadow: none;
      height: 0;
      overflow: hidden;
      overscroll-behavior: none;

      dl.selecting &,
      &.static,
      .always & {
        height: auto;
        padding-top: 0;
        background: transparent;
        box-shadow: none;
      }
    }

    dl.total-payment {
      display: none;
      width: 100%;
      .paying & {
        display: block;
      }
    }

    .total.pay {
      display: none;
      width: 100%;
      padding: 0 var(--padding);
      justify-content: space-between;
      .paying & {
        display: flex;
      }
    }

    .reserv-btns {
      width: 100%;
      padding: 0 10px;
      border-radius: 0;
      padding-bottom: calc(10px + var(--safe-bottom));
      overflow: visible;
      background: linear-gradient(0deg, var(--white) 0%, transparent 100%);

      z-index: 2;
      > a {
        margin: 0;
        border-radius: 90em;
        padding: 0;
        box-shadow: 0 10px 20px 10px rgba(0, 0, 0, 0.15);
      }
    }

    .tooltip {
      margin: 10px;
      z-index: 10;
      border-radius: 12px;
      position: static;
      .go-next & .on {
        opacity: 1;
      }
    }
  }
  /* 타입2 */
  .full {
    .reserv-ui {
      padding: 0;
      box-shadow: none;
      border-radius: 0;
      background-color: transparent;
      flex-direction: column;
      width: 100%;

      ul.total.pay {
        width: 100%;
        p:first-child {
          display: block;
        }
      }
      dl.total-payment {
        display: none;
        .payment & {
          display: flex;
          dd {
            text-indent: 0;
            line-height: 1;
            margin-bottom: 10px;
            background-color: color-mix(in srgb, var(--white) 10%, transparent);
            backdrop-filter: blur(10px);
            padding: 10px 20px;
            border-radius: 30em;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
          }
          flex-direction: column;
        }
      }
      .reserv-btns {
        > a {
          margin-left: 0;
          border-radius: 50em;
          border: 0;
          padding: 0;

          font-size: 15px;

          &.notyet {
            color: var(--gray-light);
          }
        }
      }
    }
  }
  /* 선택후 */
  .paying {
    &.full .detail::after {
      display: none;
    }
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    .gnb {
      .full & {
        display: block;
      }
    }

    /* .detail::after {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 49;
      background-color: rgba(0, 0, 0, 0.7);
    } */

    .reserv-ui {
      bottom: 0;
      overscroll-behavior: none;
      z-index: 140;
      max-height: 100vh;

      .close-ui {
        display: flex;
        z-index: 4;
        background-color: var(--white);
        color: var(--gray-dark);
        height: 30px;
        font-size: 1.4em;
        align-items: center;
        box-shadow: 0 -20px 20px rgba(0, 0, 0, 0.2);
        border-radius: 20px 20px 0 0;

        &::before {
          transform: rotate(0deg);
        }
      }
      .choose {
        width: 100%;
        flex-grow: 1;
        flex-shrink: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        max-height: 100vh;
        border-radius: 0;
        z-index: 1;
      }
      .reserv-btns {
        background-color: var(--white);
      }
      dl.total-payment {
        .total.pay {
          p:first-child {
            display: block;
          }
        }
      }
    }
  }

  .go-next {
    .reserv-ui .close-ui {
      background: #fff;
      color: var(--gray-dark);

      border-radius: 20px 20px 0 0;
      height: 40px;
      align-items: center;
      position: relative;
      z-index: 32;
      display: flex;

      &::before {
        opacity: 0.5;
        transform: rotate(180deg);
      }
    }

    &.paying .reserv-ui .close-ui::before {
      transform: rotate(0);
    }
  }

  .paying,
  .go-next {
    &.full,
    &.scrolled.ui-fix .full,
    &.scrolled .full {
      .reserv-ui {
        bottom: -1px;
        padding: 0;
        flex-direction: column;
        font-weight: bold;
        dl.total-payment {
          display: block;
          padding: 20px;
          border-top: 1px dashed var(--gray-border);
          border-bottom: 0;
          background-color: var(--white);
          ul.total.pay {
            line-height: 1;
            height: auto;
            min-height: auto;
          }
        }
      }
    }
  }
  .paying:has(.gnb .tabs) .reserv-ui {
    max-height: calc(100vh - var(--top-h) - var(--tab-h) - 2px);
  }
  /* 선택아이템 */

  .option {
    li {
      .price-area {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: initial;
      }
    }
  }
  .ui-item {
    &.prices {
      display: flex;
      flex-direction: column;
      li {
        &:has(.quantity) {
          padding: 15px;
        }
        .full & {
          flex-direction: row;
          flex-wrap: nowrap;
          &:has(.quantity) {
            padding-right: 10px;
          }
        }
        flex-wrap: nowrap;
        align-items: center;
        .item-name {
          width: 100%;
          .full & {
            padding: 0;
          }
          .price-multi {
            flex-direction: row;
            column-gap: 2em;
            justify-content: flex-start;
            .price {
              flex-wrap: wrap;
              row-gap: 0;
            }
          }
        }
        .quantity {
          padding: 5px;
          flex-grow: 0;
          height: fit-content;
          width: fit-content;
          flex-direction: column-reverse;
          input {
            width: 36px;
            height: 36px;
            max-width: initial;
          }
          a {
            width: 30px;
            height: 30px;
          }
        }
      }
    }
  }
}



/* ---- global/css/components/schedule.css ---- */
.sect.schedule {
  margin-top: 30px;
  .sect:first-of-type & {
    margin-top: 0;
  }
  margin: 0;
  &:last-child {
    margin-top: 60px;
  }
  &:only-child {
    padding-top: 0px;
  }
  & + &,
  &.sect + &.sect {
    margin-top: calc(3 * var(--padding));
  }
  &.sect .head {
    padding-bottom: 14px;
  }
  .head h3 {
    display: flex;
    align-items: center;
    font-weight: 700;
    margin-bottom: 0;
    font-size: 1.5em;
    padding-bottom: 0;
    margin-bottom: 0;
    &.complete {
      width: fit-content;
      background: var(--main-gra);
      color: transparent;
      -webkit-background-clip: text;
      flex-grow: 0;

      span {
        background: var(--main-gra-rev);
        color: #fff;
        margin-left: 10px;
        border: 0;
      }
    }
    &.waiting {
      color: var(--main-light);
      span {
        background: var(--main-light);
        color: #fff;
        margin-left: 10px;
        border: 0;
      }
    }
    span {
      font-size: 12px;
      color: var(--gray-mid);
      border: 1px solid var(--gray-mid);
      padding: 6px 10px;
      border-radius: 30px;
      margin-left: 10px;
      &::after {
        display: none;
      }
    }
  }
  h3.cancel {
    text-decoration: line-through;
    color: var(--gray-light);
    span {
      color: var(--gray-light);
      border-color: var(--gray-light);
    }
    + .list {
      filter: grayscale(0.7);
      .info {
        text-decoration: line-through;
      }
    }
  }
  .list {
    &.horizon {
      gap: 10px;
      li {
        &:not(:has(.thumb)) {
          padding: 0;
          .btnset {
            margin: 20px;
          }
          .infos {
            padding: 30px;
            .info {
              padding: 0;
              margin: 0;
            }
          }
        }
        .thumb {
          width: 220px;
          img {
            width: 100%;
            height: auto;
            object-fit: initial;
            border-radius: 8px;
          }
        }
        .infos {
          padding: 0;
          .info {
            padding: 0;
          }
        }
        &:has(.info-grid-set) {
          flex-direction: column;
          padding: 24px;
          .thumb {
            width: 220px;
          }
          .list-info {
            display: flex;
            width: 100%;
            align-items: center;
            gap: 20px;
          }
          .infos {
            .info-grid {
              margin-top: 8px;
            }
          }
          .info-grid-set {
            width: 100%;
            margin-top: 0;
          }
          .btnset {
            width: 100%;
            margin-top: 0;
            justify-content: flex-start;
            padding: 0;
            margin: 0;
            gap: 8px;
            margin-top: 20px;
            a {
              padding: 8px 12px;
              background-color: var(--white);
              border-radius: 8px;
              box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
            }
          }
          .info-grid-set {
            margin-top: 10px;
            display: flex;
            gap: 4em;
          }
          .info-grid {
            display: grid;
            grid-template-columns: max-content minmax(0, 1fr);
            row-gap: 4px;
            column-gap: 10px;
            align-content: start;
            color: var(--gray-mid);
            font-size: 0.9em;
            line-height: 1.2;
            :is(h4, .info-title) {
              grid-column: 1 / -1;
              font-size: 1.1em;
              font-weight: 700;
              color: var(--gray-dark);
              margin-top: 0;
            }
            .info-label {
              width: auto;
              font-weight: bold;
              white-space: nowrap;
              p {
                font-size: 1em;
              }
            }
            .info-value {
              width: auto;
            }
          }
          @media (max-width: 812px) {
            padding: 0;
            .list-info {
              padding: 10px 10px 0;
              flex-direction: column-reverse;
              .thumb {
                width: 100%;
                height: auto;
              }
              .infos {
                padding: 5px 14px;
                width: 100%;
              }
            }
            .info-grid-set {
              margin-top: 0;
              padding: 0 15px 0 24px;
              flex-wrap: wrap;
              gap: 1em;
              row-gap: 1em;
              justify-content: space-between;
            }
            .btnset {
              margin: 0;
              padding: 10px;
              justify-content: center;
              gap: 6px;
              width: 100%;
            }
          }
        }

        background-color: var(--gray-pale);
        padding: 10px;
        border-radius: 10px;
        border: 0;
        &.fail,
        &.cancel {
          .info {
            p {
              text-decoration: line-through;
            }
            .price {
              color: var(--gray-light);
            }
          }
          h3 {
            color: var(--gray-mid);
          }
          .thumb {
            filter: grayscale(0.8);
          }
        }
      }
    }
  }
}

@media (max-width: 812px) {
  .sect.schedule {
    & + & {
      margin-top: 0;
    }
    margin-bottom: 0;
    margin-top: 0;
    border-bottom: 1px solid var(--gray-border);
    .head {
      h3 {
        width: 100%;
        font-size: 1.4em;
        justify-content: space-between;
        span {
          font-size: 11px;
          padding: 6px 10px;
        }
      }
      padding-bottom: 12px;
    }
    .list.horizon li {
      border-bottom: 0;
      flex-wrap: wrap;
      &:has(.info-grid-set) {
        grid-template-columns: 1fr;
        grid-template-areas:
          'thumb'
          'infos'
          'info-grid-set'
          'btnset';
        row-gap: 10px;
      }
      &:not(:has(.thumb)) {
        flex-direction: column;
        .infos {
          padding: 0;
          width: 100%;
        }
        .btnset {
          margin: 0;
          width: 100%;
          justify-content: flex-start;
          a {
            background-color: var(--white);
            padding: 8px 12px;
            border-radius: 6px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
          }
        }
      }
      .infos {
        width: calc(100% - 120px);
      }
      .info {
        width: 100%;
        h3 {
          .label {
            font-size: 10px;
            padding: 5px 8px;
            line-height: 1;
          }
        }
        p {
          font-size: 12px;
        }
        .price {
          font-size: 16px;
        }
      }
      padding: 16px;
      gap: 20px;
      .btnset {
        margin: 0;
        white-space: nowrap;
        flex-wrap: wrap;
        row-gap: 10px;
        gap: 2em;
        width: fit-content;
      }
      .thumb {
        margin-right: 0;
        width: 80px;
        height: 80px;
      }
    }
    h3 span {
      padding: 5px 12px;
    }
  }
}


/* ---- global/css/components/schedule-overview.css ---- */



/* ---- global/css/components/search.css ---- */
/* 검색 */
.search {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: var(--gray-pale);
  border-radius: 10em;
  margin-bottom: 20px;
  padding: 5px;
  padding-left: 10px;
  --input-h: 46px;
  .selectbox {
    border: 0;
    .selector {
      border: 0;
    }
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--input-h);
    font-size: 1em;
    border-radius: 6px;
    min-width: 80px;
    padding: 0 var(--padding);
    background-color: var(--white);
    border-radius: 10em;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
    color: inherit;
    font-size: 0.9em;
    .ms-icon {
      font-size: 1.4em;
    }
  }

  select {
    width: auto;
    padding-right: var(--btn-h);
  }

  input {
    border: 0;
    flex-grow: 1;
    background-color: transparent;
    &:focus {
      outline: none;
      border: 0;
    }
  }

  + .list {
    margin-top: var(--padding);
  }
  @media (max-width: 812px) {
    --input-h: 40px;
    margin: 10px 20px;
    margin-bottom: 0;
    padding: 5px;
    gap: 0;
    .selectbox {
      padding-right: 0;
      white-space: nowrap;
      .selector {
        padding-right: 0;
      }
    }
    .btn {
      min-width: auto;
      width: auto;
      padding: 0 14px;
    }
  }
}

.search-adv {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border: 1px solid var(--gray-border);
  border-radius: 8px;
  position: relative;
  font-size: 0.9em;

  .btn {
    border-radius: 6px;
    min-width: auto;
    position: absolute;
    right: 10px;
    z-index: 3;
    height: auto;
    line-height: 1;
    padding: 14px 16px;
    font-size: 1em;

    i {
      font-size: 1.2em;
      vertical-align: middle;
    }
  }

  .inputs {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    position: relative;
    width: 50%;
    padding: 5px 10px;

    &.full {
      width: 100%;
      padding-right: 0 !important;

      h4 {
        width: 87px;
      }
    }

    h4 {
      width: 15%;
      padding-left: 10px;
      font-size: 1em;
    }

    .input {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-grow: 1;
      position: relative;

      + h4 {
        margin-left: 30px;
        margin-right: 15px;
        width: auto;
      }

      .placeholder {
        color: var(--gray-light);
      }

      input,
      select,
      .text {
        flex-grow: 1;
        height: 48px;
        padding-left: 15px;
        border: 1px solid var(--gray-border);
        border-radius: 3px;
      }

      .selectbox {
        flex-grow: 1;

        .selector {
          border-radius: 3px;
        }
      }

      .text {
        display: flex;
        align-items: center;
        gap: 5px;
        transition: 0.2s;

        .day {
          font-size: 0.9em;
          border: 1px solid var(--gray-dark);
          line-height: 1;
          height: fit-content;
          border-radius: 3px;
          padding: 8px;
        }

        &.valued {
          .placeholder {
            display: none;
          }
        }

        &.focus {
          border-color: var(--gray-dark);
        }
      }
    }

    &::after {
      content: '';
      border-bottom: 1px solid var(--gray-border);
      display: block;
      position: absolute;
      width: 100%;
      left: 0;
      bottom: 0;
      transform: scaley(1);
    }
  }
}

.search-bar {
  .search-adv {
    .inputs:last-of-type::after {
      display: none;
    }
  }
}



/* ---- global/css/components/seats.css ---- */
.huge-widget {
  &.bus-seats .ui-widget {
    width: var(--width);
    .bus-frame {
      border-radius: 20px;
      margin: 20px;
      --gap: 20px;
      display: flex;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      flex-grow: 1;
      background-color: var(--gray-pale);
      .front {
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        padding: 20px;
        li {
          writing-mode: vertical-lr;
          text-align: center;
          line-height: 1;
          display: flex;
          gap: 5px;
          align-items: center;
        }
      }
      .bottom {
        justify-content: space-between;
        display: flex;
        flex-direction: row;
        padding: 20px;
        li {
          text-align: center;
          line-height: 1;
          display: flex;
          gap: 5px;
          align-items: center;
          letter-spacing: 0;
        }
      }
      .seat-batch {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
        overscroll-behavior: none;
        gap: var(--gap);
        padding: 20px;
        > ul {
          --row: 7;
          display: flex;
          width: 100%;
          gap: var(--gap);
          position: relative;
          li {
            width: calc(100% / var(--row));
            height: 70px;
            position: relative;
            font-size: 1.1em;
            font-weight: bold;
            &.none {
              background: none;
              box-shadow: none;
              a {
                display: none;
              }
            }
            a {
              position: absolute;
              width: 100%;
              height: 100%;
              border: 1px solid var(--main-color);
              color: var(--main-color);
              display: flex;
              align-items: center;
              justify-content: center;
              box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.1);
              transition: 0.2s;
              border-radius: 6px;
              background-color: #fff;
              flex-direction: column;
              &.disabled {
                background-color: transparent;
                color: var(--gray-light);
                border: 2px dotted var(--gray-border);
                pointer-events: none;
                cursor: not-allowed;
                box-shadow: none;
              }
              &.reserved {
                background-color: transparent;
                border: 2px dotted var(--gray-dark);
                pointer-events: none;
                cursor: not-allowed;
                box-shadow: none;
                color: var(--gray-dark);
              }
              &.checked,
              &.on {
                background-color: var(--main-color);
                color: #fff;
                border-color: var(--main-color);
              }
            }
          }
        }
      }
    }
  }
  &.map-district {
    .ui-widget .ui-body {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .map-picker {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .map-area {
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;
          border-radius: 0;
          overflow-x: hidden;
        }
      }
    }
    .option.color-var {
      text-align: center;
      display: flex;
      justify-content: center;
      bottom: 10px;
      right: 10px;
      margin: 0;
      font-size: 0.7em;
      background-color: #fff;
      padding: 10px;
      border-radius: 5px;
    }
  }
  .option.color-var {
    margin: 20px;
  }
  div.max {
    width: calc(100vw - 20px) !important;
  }
  .btns {
    margin-top: 0;
  }
  .mask {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
}

.batchplan {
  .frame {
    border-radius: 20px;
    margin: 20px;
    --gap: 20px;
    display: flex;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex-grow: 1;
    background-color: var(--gray-pale);
    .contents & {
      margin: 0;
      border-radius: 12px;
      .batch {
        pointer-events: none;
        cursor: initial;
      }
    }
    &.vertical {
      flex-direction: column;
    }
    --gap: 10px;
    .front {
      justify-content: space-between;
      display: flex;
      flex-direction: column;
      padding: 20px;
      li {
        writing-mode: vertical-lr;
        text-align: center;
        line-height: 1;
        display: flex;
        gap: 5px;
        align-items: center;
      }
    }
    .bottom {
      justify-content: space-between;
      display: flex;
      flex-direction: row;
      padding: 20px;
      li {
        text-align: center;
        line-height: 1;
        display: flex;
        gap: 5px;
        align-items: center;
        letter-spacing: 0;
        &.bottom-txt {
          flex-direction: column;
          display: flex;
        }
      }
    }
    .batch {
      display: flex;
      flex-direction: column;
      width: 100%;
      overflow: hidden;
      overscroll-behavior: none;
      gap: var(--gap);
      padding: 20px;
      > ul {
        display: flex;
        width: 100%;
        gap: var(--gap);
        position: relative;
        li {
          &:first-child:nth-last-child(2) {
            width: calc(100% / 2);
            & ~ li {
              width: calc(100% / 2);
            }
          }
          &:first-child:nth-last-child(3) {
            width: calc(100% / 3);
            & ~ li {
              width: calc(100% / 3);
            }
          }
          &:first-child:nth-last-child(4) {
            width: calc(100% / 4);
            & ~ li {
              width: calc(100% / 4);
            }
          }
          &:first-child:nth-last-child(5) {
            width: calc(100% / 5);
            & ~ li {
              width: calc(100% / 5);
            }
          }
          &:first-child:nth-last-child(6) {
            width: calc(100% / 6);
            & ~ li {
              width: calc(100% / 6);
            }
          }
          &:first-child:nth-last-child(7) {
            width: calc(100% / 7);
            & ~ li {
              width: calc(100% / 7);
            }
          }
          &:first-child:nth-last-child(8) {
            width: calc(100% / 8);
            & ~ li {
              width: calc(100% / 8);
            }
          }
          &:first-child:nth-last-child(9) {
            width: calc(100% / 9);
            & ~ li {
              width: calc(100% / 9);
            }
          }
          &:first-child:nth-last-child(10) {
            width: calc(100% / 10);
            & ~ li {
              width: calc(100% / 10);
            }
          }
          &:first-child:nth-last-child(11) {
            width: calc(100% / 11);
            & ~ li {
              width: calc(100% / 11);
            }
          }
          &:first-child:nth-last-child(12) {
            width: calc(100% / 12);
            & ~ li {
              width: calc(100% / 12);
            }
          }
          &:first-child:nth-last-child(13) {
            width: calc(100% / 13);
            & ~ li {
              width: calc(100% / 13);
            }
          }
          &:first-child:nth-last-child(14) {
            width: calc(100% / 14);
            & ~ li {
              width: calc(100% / 14);
            }
          }
          &:first-child:nth-last-child(15) {
            width: calc(100% / 15);
            & ~ li {
              width: calc(100% / 15);
            }
          }
          &:first-child:nth-last-child(16) {
            width: calc(100% / 16);
            & ~ li {
              width: calc(100% / 16);
            }
          }
          width: 100%;
          height: 60px;
          position: relative;
          font-size: 1em;
          font-weight: bold;
          &.none {
            background: none;
            box-shadow: none;
            a {
              display: none;
            }
          }
          a {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px solid var(--main-color);
            color: var(--main-color);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 3px 3px 12px rgba(0, 0, 0, 0.1);
            transition: 0.2s;
            border-radius: 6px;
            background-color: #fff;
            flex-direction: column;
            span {
              display: block;
              width: 100%;
              justify-content: center;
              font-size: 1.4em;
              text-align: center;
            }
            &.disabled {
              background-color: transparent;
              color: var(--gray-light);
              border: 2px dotted var(--gray-border);
              pointer-events: none;
              cursor: not-allowed;
              box-shadow: none;
            }
            &.reserved {
              background-color: transparent;
              border: 2px dotted var(--gray-dark);
              pointer-events: none;
              cursor: not-allowed;
              box-shadow: none;
              color: var(--gray-dark);
            }
            &.checked,
            &.on {
              background-color: var(--main-color);
              color: #fff;
              border-color: var(--main-color);
            }
          }
        }
      }
    }
  }
  .option.color-var {
    margin: 0;
    margin-top: 20px;
    margin-left: 30px;
    justify-content: flex-start;
    .legend {
      justify-content: flex-start;
      font-size: 1rem;
    }
  }
}

@media (max-width: 812px) {
  .huge-widget {
    &.map-district {
      .ui-widget .ui-body {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .map-picker {
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .map-area {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            border-radius: 0;
            overflow-x: hidden;
          }
        }
      }
      .option.color-var {
        position: static;
        padding: 10px 0 10px 10px;
        display: flex;
        justify-content: flex-start;
        gap: 10px;
        font-size: 0.7em;
        background-color: #fff;
        border-radius: 5px;
        p {
          margin-right: 10px;
        }
      }
      &::after {
        content: '←→ 좌우로 스크롤 하세요';
        position: relative;
        z-index: 2;
        margin-top: 10px;
      }
    }
    .option.color-var {
      margin: 14px 0;
    }
    padding: 0;
    padding: 10px;
    width: 100%;
    visibility: visible;
  }
  .batchplan {
    .frame {
      flex-direction: column;
      margin: 10px;
      border-radius: 10px;
      --gap: 10px;
      .batch {
        flex-direction: row-reverse;
        padding: 10px;
        > ul {
          flex-direction: column;
          gap: 10px;
          a.disabled .txt {
            font-size: 0.6em;
          }
        }
      }
      .front {
        flex-direction: row-reverse;
        padding-bottom: 10px;
        li {
          writing-mode: horizontal-tb;
        }
      }
      &.vertical {
        flex-direction: row-reverse;
        .bottom li {
          letter-spacing: -3px;
        }
      }
    }
  }
}



/* ---- global/css/components/selectbox.css ---- */
/* 셀렉트박스 */
.selectbox {
  overflow: visible;
  transition: 0.2s;
  position: relative;

  .selector {
    padding: 0 15px 0 16px;
    height: var(--input-h);
    border: 1px solid var(--gray-border);
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    overflow: hidden;

    &.valued {
      padding-left: 5px;
      padding-right: 5px;
      padding-top: 10px;

      .placeholder {
        display: none;
      }

      + ul .btns a.submit {
        background-color: var(--main-color);
        font-size: 0;
        transition: 0s;
        width: 60%;
        pointer-events: all;

        &::before {
          font-size: 0.9rem;
          content: '선택완료';
        }
      }
    }

    &.red-txt {
      color: var(--red-color);
    }

    &.on {
      border-color: var(--gray-dark);

      &::after {
        transform: rotate(180deg);
      }
    }

    &::after {
      content: '\e941';
      font-family: 'xeicon';
      display: block;
      transition: 0.2s;
      font-size: 0.9em;
    }

    .value {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;

      ul {
        display: flex;
        align-items: center;
        gap: 5px;
        flex-wrap: wrap;

        li {
          display: none;

          &.on {
            display: block;
          }
        }
      }

      span {
        font-size: 0.9em;
        border: 1px solid var(--gray-dark);
        line-height: 1;
        height: fit-content;
        border-radius: 3px;
        padding: 8px;
      }
    }
  }

  > ul {
    display: none;
    margin-top: 10px;
    position: absolute;
    z-index: 40;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 6px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    width: 100%;
    min-width: fit-content;
    background-color: var(--white);

    li {
      padding: 15px;
      background-color: var(--white);
      cursor: pointer;
      transition: 0.2s;
      user-select: none;
      position: relative;
      display: flex;
      align-items: center;
      &.impo {
        font-weight: bold;
        color: var(--main-color);
      }

      &.on {
        color: var(--main-color);
        font-weight: bold;

        &:hover {
          background-color: var(--main-color);
          color: #fff;
        }

        &::after {
          content: 'check';
          font-family: 'material symbols sharp';
          position: static;
          margin-left: 20px;
          font-weight: 400;
          font-size: 1.2em;
        }
      }

      + li {
        border-top: 1px solid var(--gray-border);
      }
    }
  }

  &.bottom {
    > ul {
      top: auto;
      bottom: calc(100% + 10px);
      margin-top: 0;
      margin-bottom: 10px;
    }

    .selector::after {
      transform: rotate(180deg);
    }

    .selector.on::after {
      transform: rotate(0deg);
    }
  }

  .btns {
    margin-top: 0;
    display: flex;
    border-top: 1px solid var(--gray-border);

    a {
      flex-grow: 1;
      padding: 0;
      padding: 1em;
      text-align: center;
      font-size: 0.85em;
      background-color: var(--gray-dark);
      color: #fff;

      &.cancel {
        pointer-events: all;
        background-color: var(--gray-mid);
      }
    }
  }

  @media (max-width: 812px) {
    > ul {
      margin: 0 10px;
      width: calc(100% - 20px);
      z-index: 100;
    }
  }
}



/* ---- global/css/components/table.css ---- */
table {
  width: 100%;
  border-top: 1px solid var(--gray-dark);
  text-align: left;
  border-spacing: 0;
  border-collapse: collapse;

  thead th {
    border-bottom: 1px solid var(--gray-dark);
  }
  caption {
    font-size: 0;
  }
  th,
  td {
    vertical-align: top;
    padding: 20px 0;
    border-bottom: 1px solid var(--gray-border);
    line-height: 1.4;
    border-collapse: collapse;
    word-break: break-all;
  }

  td {
    color: var(--gray-mid);
    vertical-align: middle;
    &.align-right {
      text-align: right;
    }
    &:has(.inputs) {
      padding-top: 5px;
      padding-bottom: 5px;
    }
    &.bk p {
      color: var(--gray-dark) !important;
    }

    &.dd {
      font-size: 14px;
      color: var(--gray-light);
      padding-top: 20px;

      a {
        font-weight: bold;
        text-decoration: underline;
      }
    }

    &.with-btn {
      padding: 14px 0;
      width: 1%;
      white-space: nowrap;
      vertical-align: middle;
    }

    &.bk p.ext,
    p.ext {
      font-size: 0.85em;
      color: var(--gray-mid) !important;
    }

    h5 + table {
      margin-top: 16px;
    }

    table {
      border: 1px solid var(--gray-border);
      border-collapse: collapse;
      font-size: 0.9em;

      th,
      td {
        padding: 15px;
        border: 1px solid var(--gray-border);
        vertical-align: middle;
        text-align: center;
      }

      th.bk {
        color: var(--gray-dark);
      }

      th {
        background-color: var(--gray-pale);
      }
    }
  }

  tbody {
    td + th {
      padding-left: 20px;
    }

    th {
      font-weight: bold;
      padding-right: 40px;
    }

    tr.with-dd td,
    tr.with-dd th {
      border-bottom: 0;
      padding-bottom: 0;
    }
  }
}
.summary {
  table {
    border-top: 0;
    td,
    th {
      border: 0;
      padding: 4px 0;
      width: 1%;
      white-space: nowrap;
    }
    th {
      padding-right: 20px;
    }
    td {
      width: 40%;
    }
  }
}
.table.radius {
  border-radius: 8px;
  border: 1px solid var(--gray-border);
}

.table.course-table {
  + .table.course-table {
    margin-top: 10px;
  }

  table {
    td,
    th {
      padding: 12px 12px;
    }

    &.sect01 tr th.title {
      background-color: var(--type1);
      color: #fff;
      border-color: var(--type1);
    }

    &.sect02 tr th.title {
      background-color: var(--type2);
      color: #fff;
      border-color: var(--type2);
    }

    &.sect03 tr th.title {
      background-color: var(--type3);
      color: #fff;
      border-color: var(--type3);
    }

    &.sect04 tr th.title {
      background-color: var(--type4);
      color: #fff;
      border-color: var(--type4);
    }

    &.sect01 th {
      color: var(--type1);
    }

    &.sect02 th {
      color: var(--type2);
    }

    &.sect03 th {
      color: var(--type3);
    }

    &.sect04 th {
      color: var(--type4);
    }
  }
}
.allborder {
  table {
    border-radius: 12px;
    border-collapse: collapse;

    th {
      background-color: var(--gray-pale);
    }
    th,
    td {
      text-align: center;
      padding: 15px;
      border: 1px solid var(--gray-border);
      &:first-child {
        border-left: 0;
      }
      &:last-child {
        border-right: 0;
      }
    }
  }
}

.table.notice {
  border-radius: 8px;
  border: 1px solid var(--gray-border);
  overflow: hidden;

  table {
    border: 0;

    thead th {
      border-color: var(--gray-border);
      background-color: var(--gray-pale);
    }

    th,
    td {
      padding: 15px;
    }

    tbody th,
    tbody td {
      font-size: 0.9em;
    }

    tbody td {
      color: var(--gray-mid);

      &:first-child {
        border: 0;
      }
    }

    tbody td,
    thead th + th {
      border-left: 1px solid var(--gray-border);
    }
  }
}

.table.course-table + .table.course-table {
  margin-top: 10px;
}

.table.course-table table {
  td,
  th {
    padding: 12px 12px;
  }

  &.sect01 tr th.title {
    background-color: var(--type1);
    color: #fff;
    border-color: var(--type1);
  }

  &.sect02 tr th.title {
    background-color: var(--type2);
    color: #fff;
    border-color: var(--type2);
  }

  &.sect03 tr th.title {
    background-color: var(--type3);
    color: #fff;
    border-color: var(--type3);
  }

  &.sect04 tr th.title {
    background-color: var(--type4);
    color: #fff;
    border-color: var(--type4);
  }

  &.sect01 th {
    color: var(--type1);
  }

  &.sect02 th {
    color: var(--type2);
  }

  &.sect03 th {
    color: var(--type3);
  }

  &.sect04 th {
    color: var(--type4);
  }
}

/* 반응형 */
@media (max-width: 812px) {
  table {
    th,
    td {
      padding: 15px 0;
      position: relative;
      line-height: initial;
    }

    tbody th {
      padding-right: 15px;
      white-space: normal;
      width: auto;
      word-break: keep-all;
    }

    td.dd {
      font-size: 12px;
      padding-top: 0;
    }
  }
  .voucher {
    table {
      th,
      td {
        font-size: 12px;
      }
    }
  }
  .complete .detail {
    .voucher {
      table {
        th {
          padding-right: 0;
        }
        th::before {
          display: none;
        }
      }
    }
  }
  .summary {
    table {
      --gap: 12px;
      tbody {
        display: flex;
        flex-direction: column;
        gap: var(--gap);
      }
      tr {
        display: flex;
        flex-wrap: wrap;
        row-gap: var(--gap);
      }
      th {
        width: 20%;
      }
      td {
        width: 80%;
      }
      td,
      th {
        display: block;
        padding: 0;
        word-break: keep-all;
        white-space: initial;
      }
    }
  }
}



/* ---- global/css/components/tabs.css ---- */
/* 탭 콘텐츠 탭 레이아웃 */
.tab-contents {
  .tabs {
    gap: 0;
    width: auto;
    margin: 0;
    border-bottom: 1px solid var(--gray-border);
    display: flex;
    a,
    li {
      border: 1px solid var(--gray-border);
      border-bottom: 0;
      margin: 0;
      font-size: 1em;
      text-align: center;
      padding: 12px 30px;
      height: auto;
      position: relative;
      z-index: 1;
      margin-bottom: -1px;
      white-space: nowrap;

      &::after {
        display: none;
      }

      &.active,
      &.on {
        color: var(--main);
        font-weight: bold;
        z-index: 2;
        background-color: #fff;
      }

      & + & {
        margin-left: -1px;
      }
    }
  }

  .tab-content {
    padding-top: 24px;
    display: none;

    &#tab1 {
      display: block;
    }
  }

  .ul + .ul {
    margin-top: 0;
  }
}

.ui-sect {
  .tab-contents {
    .tabs {
      padding: 0 var(--padding);
      border-bottom: 0;

      a,
      li {
        flex-grow: 1;
        border-radius: 4px 4px 0 0;
        margin-bottom: 0;
        border-bottom: 1px solid var(--gray-border);

        &.active {
          border-bottom-color: transparent;
        }
      }
    }
  }
}
/* 반응형 스타일 */
@media (max-width: 812px) {
  .wrap {
    --tab-h: 36px;
    &:has(.tabs) .gnb {
      background-color: var(--white);
      -webkit-backdrop-filter: blur(0);
      backdrop-filter: blur(0);
    }
    &.scrolled {
      --tab-h: 36px;
    }
  }

  .tab-contents .tabs a {
    padding: 12px 10px 13px 10px;
    flex-grow: 1;
  }
}



/* ---- global/css/components/times.css ---- */
.time-range .notyet + .end .times::before {
  content: '←입실시간 선택';
  margin-left: 10px;
  margin-right: 5px;
}

.time-range .notyet + .end .times {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.time-range .notyet + .end .times li {
  display: none;
}

.times.times-multi {
  margin: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.times.times-multi h5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  margin-top: 5px;
  margin-left: 5px;
}

.times.times-multi h5 + ol {
  margin-top: 10px;
}

.times.times-multi h5 span {
  padding: 0;
}

.times.times-multi li {
  cursor: initial;
  background-color: var(--gray-pale);
  margin: 0;
  padding: 5px;
}

.times.times-multi ol li {
  display: flex;
  gap: 5px;
  cursor: pointer;
  color: initial;
}

.times.times-multi ol {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
}

.times.times-multi ol li {
  margin: 0;
  font-size: 0.9em;
  flex-grow: 1;
  transition: 0.2s;
  display: flex;
  align-items: center;
  background-color: #fff;
  /* width: calc(50% - 3px); */
}

.times.times-multi ol li.disable {
  background-color: transparent;
}

.times.times-multi ol li p.time {
  display: flex;
  align-items: center;
  gap: 2px;
  color: inherit;
}

.times.times-multi ol li.on {
  background-color: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}

.time-range h5 {
  margin-left: 10px;
  margin-bottom: 10px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 3px;
}

.times li {
  padding: 8px;
  border: 1px solid var(--gray-border);
  border-radius: 0;
  cursor: pointer;
  margin: -1px;
  transition: 0.2s;
  margin: 0 5px 5px 5px;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.9em;
  background-color: var(--white);
  color: initial;
}

.times li.holi {
  border: 1px dashed var(--red);
  color: var(--red);
  pointer-events: none;
  background-color: #fe5f570e;
}

.holiday .times li.holi,
.pause .times li {
  border: 0;
}

.times li.holi p,
.times li.holi p:first-child,
.times li.holi p + p:last-of-type {
  color: var(--red);
}

.times li.holi p:first-child::before {
  content: '';
}

.pause .times li p:first-child::before {
  content: '';
}

.week-time .times li {
  flex-wrap: nowrap;
  flex-direction: column;
}

.times li p {
  color: var(--gray-mid);
  display: flex;
  gap: 5px;
}

.times li p.remain {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color);
  border: 1px solid var(--main-color);
  font-size: 0.85em;
}

.times li.disable p.remain {
  border-color: var(--gray-lighter);
}

.times li p i {
  font-size: 1.2em;
}

.times li p:first-child {
  display: flex;
  color: var(--gray-dark);
  font-size: 1em;
  align-items: center;
}

.times li p:first-child::before {
  content: '';
  font-family: 'xeicon';
}

.times li h5 {
  display: flex;
  gap: 0.1em;
  align-items: center;
  font-size: 12px;
}

.times li {
  --sect: var(--sect01);
}

.times li h5:has(.count) {
  justify-content: space-between;
  width: 100%;
}

.times li:has(h5 .count) p + p:last-of-type {
  color: inherit;
}

.times li:has(h5 .count) {
  font-size: 1em;
}

.times li h5 .count {
  border: 1px solid var(--gray-border);
  border-radius: 5em;
  padding: 2px 4px;
  font-size: 10px;
  font-weight: normal;
  display: flex;
  align-items: center;
  gap: 0;
}

@media (max-width: 812px) {
  .times {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
  }
}

.times li.disable,
.times li.disable p:first-child,
.times li.disable p {
  text-decoration: line-through;
  color: var(--gray-light);
  pointer-events: none;
  background-color: var(--gray-pale);
}

.times li.selected,
.times li.selecteden {
  color: #fff !important;
  background-color: var(--main-color) !important;
  border-color: var(--main-color) !important;
}

.times li.selecteden.attended {
  background-color: var(--mint-deep) !important;
  border-color: var(--mint-deep) !important;
}

.times li.selecteden.absent {
  background-color: var(--red-deep) !important;
  border-color: var(--red-deep) !important;
}

.times li.selected p,
.times li.selecteden p {
  color: #fff !important;
}

.times li.selected p:first-child::before,
.times li.selecteden p:first-child::before,
.times li.attanded p:first-child::before {
  content: '\e92c';
  font-family: 'xeicon';
}

.times li.disable p:first-child::before,
.ui-body table td .times.times-multi ol li.disalbe p.time::before {
  content: '';
  font-family: 'xeicon';
}

.times li.selecteden.absent p:first-child::before,
.ui-body table td .times.times-multi ol li.on p.time::before {
  content: '';
  font-family: 'xeicon';
}



/* layouts */

/* ---- global/css/layouts/auth-login.css ---- */
/* 인증/로그인 페이지 레이아웃 */

.login-wrap {
  background-color: var(--gray-pale);
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - var(--top-h));
  width: 100%;
  position: absolute;
  flex-grow: 1;
  flex-direction: column;

  .btn-set {
    display: flex;
    gap: 2em;
    margin-top: 1em;

    .btn {
      background-color: transparent;
      border-radius: 5px;
      color: var(--gray-mid);
      flex-direction: column;
      padding: 0;

      &:hover {
        --gray-mid: var(--main-color);
      }

      &::after {
        content: '';
        width: 100%;
        border-bottom: 1px solid var(--gray-mid);
        display: block;
      }
    }
  }

  &.join {
    position: static;
    height: 100%;
    padding: 1em;
    flex-grow: 1;
  }
}

.login-form {
  display: flex;
  gap: 10px;
  flex-direction: column;
  border-radius: 20px;
  padding: 30px;

  .head {
    margin-bottom: 14px;
  }

  h1 {
    font-size: 2em;
    margin-bottom: 10px;
  }

  p {
    font-size: 0.9em;
    color: var(--gray-mid);

    + p {
      margin-top: 5px;
    }
  }

  .form {
    display: flex;
    flex-direction: column;
    gap: 10px;

    &:has(.inputs > label) {
      gap: 1.2em;
    }
  }

  .inputs {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;

    &:has(label) {
      flex-wrap: wrap;
    }

    label {
      font-size: 0.9em;
      color: var(--gray-light);
      margin-bottom: 0.3em;
      font-weight: bold;
      width: 100%;
      display: flex;
      justify-content: space-between;
    }

    & + .inputs {
      margin-top: 0px;
    }

    a {
      height: var(--input-h);
      background-color: var(--gray-light);
      color: #fff;
      font-weight: bold;
      font-size: 0.9em;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 0 10px;
    }
  }

  .btn {
    background: var(--main-gra);
    border-radius: 6px;
    font-size: 1em;
    height: var(--btn-h);
    line-height: var(--btn-h);
    padding: 0 !important;
    width: 100%;
    margin: 0;

    &.cancel {
      background: var(--white);
      color: var(--gray-light);
      border: 2px solid var(--gray-light);
    }
  }
}

@media (max-width: 812px) {
  .login-wrap {
    .btn-set {
      margin-top: 0;

      .btn {
        font-size: 0.9em;
      }
    }
  }
}



/* ---- global/css/layouts/error.css ---- */
/* 에러 */
.error-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 40px;
  width: var(--width);
  margin: auto;
}
.error-container .message {
  flex-grow: 0;
}
.error-container .message h1 {
  color: var(--red-color);
  font-size: 4em;
  line-height: 1.2;
}
.error-container .message h2 {
  color: var(--red-color);
  font-size: 2em;
  line-height: 1.4;
}
.error-container .message h3 {
  color: var(--gray-mid);
  font-size: 1em;
  margin-top: 10px;
}
.error-container .img {
  flex-grow: 1;
  background: url(/youthCenter/img/error.svg) no-repeat center;
  width: 100%;
  background-size: auto 70%;
}
.error-container .closed {
  width: 100%;
  margin: 50px 0;
}
.error-container .closed img {
  width: 30%;
  filter: hue-rotate(150deg);
}



/* ---- global/css/layouts/extra.css ---- */
.extra {
  margin-top: 20px;
}
.extra .ext {
  font-size: 0.85em;
  color: var(--gray-light);
}
.ext > h4 + .demical {
  margin-top: 10px;
}
.ext .demical li p::before {
  display: none;
}
/* Zoomed lock */
body.zoomed { overflow: hidden; position: relative; }



/* ---- global/css/layouts/cs.css ---- */
.sect:has(.cs-card) {
  .cs-card {
    background-color: var(--gray-pale);
    border-radius: 12px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
  }
}
.wrap.cs {
  .contents > div {
    padding-bottom: var(--padding);
  }
}
.cs {
  .sect {
    & + & {
      margin-top: 20px;
    }
    &.vs1 {
      border: 1px solid var(--gray-border);
      padding: 30px;
      border-radius: 12px;
      margin-bottom: 60px;
    }
  }
}
.faq.accordion {
  li {
    h2 {
      font-weight: bold;
      a::before {
        content: 'Q';
        color: var(--red-color);
        font-weight: bold;
        margin-right: 5px;
      }
    }
    &.active {
      .pull {
        background-color: var(--gray-pale);
        padding: var(--padding);
        border-radius: 10px;
        margin-bottom: 20px;
      }
    }
  }
}
@media (max-width: 812px) {
  .cs {
    .sect {
      & + & {
        margin-top: 0;
      }
      &.vs1 {
        padding: var(--padding);
        margin: 0 var(--padding);
        .sect + & {
          margin-top: 0;
        }
      }
    }
  }

  .sect.board {
    padding: 0 var(--padding);
  }
  .sect:has(.cs-card) {
    padding-top: 10px;
    padding-bottom: 0;
  }
}



/* ---- global/css/layouts/footer.css ---- */
/* 풋터 */
.footer {
  border-top: 1px solid var(--gray-border);
  background-color: #fff;
  padding: 30px 0;
  .full.reservation:has(.reserv-ui) & {
    padding-bottom: 110px;
  }
  .in {
    width: var(--width);
    margin: auto;
    color: var(--gray-light);
    font-size: 13px;
    text-transform: uppercase;
    line-height: 1.5;
    position: relative;
    display: flex;
    align-items: center;
    gap: 30px;
    row-gap: 10px;
    flex-wrap: wrap;
    a:hover {
      color: var(--main-color);
    }
    .info {
      flex-grow: 1;
    }
    .logo {
      filter: grayscale(1);
      opacity: 0.5;
      img {
        height: 24px;
      }
    }
    .legal {
      color: var(--gray-mid);
      font-weight: bold;
      width: 100%;
      a {
        margin-right: 30px;
      }
    }
    .slogo {
      display: none;
    }
  }
  .sns {
    display: flex;
    align-items: stretch;
    flex-grow: 1;
    justify-content: flex-end;
    gap: 10px;

    > li {
      a {
        width: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1/1;
        font-size: 2em;
        color: var(--gray-light);
        opacity: 0.5;
        &:hover {
          opacity: 1;
          color: var(--gray-dark);
        }
      }
    }
  }
}

@media (max-width: 812px) {
  .footer {
    margin-top: 0;
    margin-bottom: -1px;
    padding: var(--padding) var(--padding)
      calc(var(--padding) + env(safe-area-inset-bottom)) var(--padding);
    background-color: var(--gray-pale);
    position: relative;
    z-index: -100;
    font-size: 11px;
    .full.reservation:has(.reserv-ui) & {
      padding-bottom: 80px;
    }
    :has(.reserv-ui) & {
      padding-bottom: 90px;
    }
    .sns {
      justify-content: flex-start;
      margin-top: 10px;
      padding: 0;
    }
  }

  .go-next .footer {
    padding-bottom: 100px;
  }
  .footer .in {
    font-size: 11px;
    .legal {
      white-space: nowrap;
      width: 100%;
    }
    .legal a {
      margin-right: 10px;
    }
    .slogo {
      display: block;
      position: relative;
      margin-top: 20px;
      height: 30px;
      display: none;
      img {
        height: 100%;
      }
    }
  }
  .paying.sub.reservation .footer,
  .go-next.sub.reservation .footer {
    padding-bottom: 70px;
  }
}



/* ---- global/css/layouts/gnb.css ---- */
/* GNB (전역 내비게이션 바) 스타일 */
.gnb {
  --gnb-bg: color-mix(in srgb, var(--white) 90%, transparent);
  position: fixed;
  width: 100%;
  z-index: 29;
  transition: 0s;
  top: 0;
  left: 0;
  background-color: var(--white);
  --depth2Height: 160px;
  &:after {
    display: none;
  }
  .menu {
    max-width: var(--width);
    margin: auto;
    display: flex;
    align-items: flex-start;
    font-weight: bold;
    height: var(--top-h);
    flex-wrap: nowrap;
    flex-direction: row;
    position: relative;
    justify-self: center;
    flex-grow: 1;
    font-size: 18px;
    text-align: center;
    display: flex;
    width: 100%;

    .logo,
    .right-menu {
      height: var(--top-h);
      align-items: center;
      display: flex;
      flex-grow: 0;
    }
    .logo {
      margin-left: 0;
      height: var(--top-h);
      background-size: auto 40px;
      position: relative;
      flex-grow: 0;
      width: 15%;
      display: flex;
      align-items: center;
      font-family: "GangwonEduPowerExtraBold";
      -webkit-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      white-space: nowrap;
      flex-shrink: 0;

      .verified {
        border: 1px solid var(--main-color);
        font-family: "";
        display: none;
        align-items: center;
        font-size: 0.7em;
        border-radius: 3px;
        margin-left: 6px;
        padding: 4px 6px;
        gap: 3px;
        i {
          font-size: 1.2em;
        }
      }

      > a {
        width: 100%;
        height: 100%;
        position: absolute;
        display: flex;
        align-items: center;
        img {
          max-height: 30px;
        }
      }

      img {
        width: auto;
        max-height: 48px;
        display: inline-block;
        margin-right: 8px;
        -webkit-backface-visibility: hidden;
        -webkit-transform: translate3d(0, 0, 0);
        &.logo-w {
          display: none;
        }
      }

      .logo-w {
        display: none;
      }

      &.none {
        background: none;
        display: flex;
        align-items: center;
        font-family: "GangwonEduPowerExtraBold";
      }
    }
    .menu-all {
      flex-grow: 1;
      width: 100%;
      display: flex;
    }
    li {
      cursor: pointer;

      .status {
        font-size: 11px;
        border: 1px solid var(--green-color);
        background-color: var(--green-color);
        color: #fff;
        border-radius: 30px;
        padding: 0 10px;
        line-height: 2;

        &.closed {
          background-color: var(--red-color);
          border-color: var(--red-color);
        }
        &.disable {
          background-color: var(--red-color);
          color: #fff;
          border-color: transparent;
        }
      }

      &.member {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: url(../images/icon/user-w.svg) no-repeat center;
        background-size: auto 22px;
        position: relative;

        &.logout {
          background-image: url(../images/icon/logout-w.svg);
          background-size: auto var(--padding);
        }
      }

      &.ch {
        background: url(../images/icon/kakao-channel-w.svg) no-repeat center;
        background-size: auto 22px;
        width: 26px;
        height: 26px;
      }

      .active {
        color: var(--main-color);
      }
    }

    .menu-n {
      margin: 20px 0;
      flex-grow: 1;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      width: 70%;
      --menu-space: 60px;
      padding-left: var(--menu-space);
      user-select: none;
      > li {
        position: relative;
        padding-right: var(--menu-space);
        &.active,
        &:has(> .depth2 .active) {
          > a {
            color: var(--main-color);
          }
        }
        > a {
          height: calc(var(--top-h) - 40px);
          display: flex;
          align-items: center;
        }
        .depth2 {
          position: absolute;
          color: var(--gray-mid);
          font-weight: normal;
          text-align: left;
          font-size: 14.5px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          padding-top: 10px;
          padding-bottom: 20px;
          transition: 0.2s;
          opacity: 0;
          width: 100%;

          > li {
            transition: 0.3s;
            position: relative;
            &:hover {
              color: var(--main-color);
            }
          }
        }
      }

      .status {
        padding: 0 0.8em;
      }

      li.linkage {
        .icon {
          position: relative;
          width: var(--padding);
          height: var(--padding);
          margin: 1px;

          &::before,
          &::after {
            content: "";
            width: 18px;
            height: 18px;
            border: 2px solid #fff;
            border-radius: 50%;
            display: block;
            position: absolute;
            box-sizing: border-box;
            transition: 0.5s;
          }
          &::after {
            right: 0;
            bottom: 0;
          }
        }

        + li.member {
          margin-left: 20px;
        }

        &.unlink {
          .icon {
            &::before,
            &::after {
              opacity: 0.3;
            }
            &::after {
              width: 8px;
              height: 8px;
            }
          }

          &::before {
            content: "LINK";
            padding: 5px 10px;
            border-radius: 30px;
            background-color: var(--main-light);
            font-size: 10px;
            line-height: 1;
            position: absolute;
            z-index: 2;
            top: -70%;
            left: -12px;
            letter-spacing: 0;
            color: #fff !important;
          }

          &::after {
            position: absolute;
            border: 6px solid transparent;
            border-top: 8px solid var(--main-light);
            border-bottom: 0;
            content: "";
            top: 0px;
            left: 4px;
            z-index: 2;
          }
        }
      }
    }

    .right-menu,
    .menu-my {
      /*width: 15%;*/
    }

    .menu-my {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 20px;
      li a {
        display: flex;
        align-items: center;
        gap: 6px;
        i {
          font-size: 1.2em;
        }
      }
    }

    .right-menu {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 20px;
      font-size: 0.9em;
      .member-menu {
        display: flex;
        align-items: center;
        gap: 16px;
        font-size: 0.85em;
        opacity: 0.7;
        &:hover {
          opacity: 1;
        }
      }
      .download {
        font-size: 0.9em;
        color: var(--gray-mid);
        .main & {
          color: rgba(255, 255, 255, 0.5);
        }
        .material-symbols-sharp {
          font-size: 1.2em;
          font-weight: normal;
        }
      }
    }

    .lang {
      font-size: 0.8em;
      color: var(--gray-mid);

      .selector {
        display: flex;
        height: auto;
        padding-right: 20px;
        padding-left: 10px;
        text-align: left;
        font-weight: normal;
        gap: 6px;
        width: max-content;
        align-items: center;
        border: 0;
        font-weight: bold;
        .main & {
          color: rgba(255, 255, 255, 0.5);
        }
        > img {
          height: 18px;
        }
        &:hover {
          color: inherit;
          .main & {
            color: rgba(255, 255, 255, 1);
          }
        }
      }
      .selectbox {
        .selector::after {
          font-size: 0.85em;
          right: 0;
        }
        ul {
          width: 100%;
          border: 0;
          background-color: rgba(255, 255, 255, 0.8);
          backdrop-filter: blur(10px);
          .main & {
            background-color: rgba(0, 0, 0, 0.5);
          }
          li {
            text-align: left;
            width: 100%;
            padding: 10px;
            font-weight: normal;
            display: flex;
            gap: 6px;
            align-items: center;
            background-color: transparent;
            flex-wrap: nowrap;
            flex-direction: row;
            .main & {
              border-color: rgba(255, 255, 255, 0.1);
              color: #fff;
            }
            > img {
              height: 20px;
            }
            &:hover {
              background-color: var(--main-color);
              color: #fff;
            }
          }
          > li.on::after {
            display: none;
          }
        }

        .selector::after {
          transform: rotate(0deg);
        }

        .selector.on::after {
          transform: rotate(180deg);
        }
      }
    }

    a {
      display: flex;
      align-items: center;
      vertical-align: middle;
      white-space: nowrap;
      gap: 0.4em;
      .material-symbols-sharp {
        font-weight: 300;
        font-size: 1.4em;
      }
      img {
        vertical-align: middle;
      }
      &:hover {
        color: var(--main-color);
      }
      .now {
        background-color: var(--main-color);
        color: #fff;
        font-size: 0.7em;
        padding: 0.4em 0.7em;
        border-radius: 0.3em;
      }
      &.active {
        color: var(--main-color);
      }
    }
  }
  /* 스크롤 시 GNB */
  .scrolled & {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    .menu {
      a {
        &:hover,
        &.active {
          color: var(--main-color);
        }
      }
      li.logo {
        .logo-ori {
          display: block;
        }
        &.none {
          background: none;
          color: var(--main-deep);
        }
      }
      .menus {
        color: var(--gray-dark);
      }
      li.member {
        background-image: url(../images/icon/user-b.svg);
        font-size: 0;
        flex-shrink: 0;
        &.logout {
          background-image: url(../images/icon/logout.svg);
        }
      }
      li.linkage .icon {
        &::before,
        &::after {
          border-color: var(--gray-dark);
          flex-shrink: 0;
        }
      }
      li.ch {
        background-image: url(../images/icon/kakao-channel-b.svg);
        flex-shrink: 0;
      }
    }

    &.has-tab:after {
      top: calc(var(--top-h) + var(--tab-h));
    }
    /* 스크롤 시 탭 */
    --tab-h: 50px;
    .tab-menu {
      top: var(--top-h);
      z-index: 10;
      margin: 0 auto 0;
      left: 0;
      right: 0;
      overflow: visible;
      align-items: flex-start;

      .tabs {
        a,
        li {
          font-size: 1.15em;
          padding-bottom: 0;
          &.active {
            color: var(--main-color);
            font-weight: bold;
          }
          .label {
            min-width: 20px;
            height: 20px;
            line-height: 18px;
            font-size: 10px;
          }
          &::after {
            position: absolute;
            bottom: 0;
            left: 0;
            border-top-width: 4px;
            border-color: var(--main-color);
            opacity: 1;
          }
        }
      }
    }
  }
}

.now {
  .gnb .depth2 & {
    display: block;
    width: 4px;
    height: 4px;
    background-color: var(--green);
    border-radius: 50%;
    position: absolute;
    left: -10px;
    top: 50%;
    margin-top: -2px;
  }
  .tab-menu & {
    margin: 0 2px;
    min-width: 24px;
    height: 24px;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    background-color: var(--white);
    border: 1px solid var(--gray-border);
    color: var(--gray-light);
    position: relative;
    z-index: 3;
    border-radius: 50em;
    font-weight: bold;
    padding: 0 8px;
    margin-left: 4px;
    margin-top: -4px;
    .active & {
      color: #fff;
      border: 1px solid var(--main-color);
      background-color: var(--main-color);
    }
    &::before {
      content: "접수중";
    }
  }
}

/* 메인용 */
.main .gnb {
  color: #fff;
  background-color: transparent;
  overflow: initial;
  --gnb-bg: color-mix(in srgb, var(--black) 50%, transparent);
  .menu {
    .logo {
      img {
        &.logo-ori {
          display: none;
        }
        &.logo-w {
          display: block;
        }
      }
    }
  }
}
/* pc전용 */
@media (min-width: 813px) {
  body:has(.menu-n .depth2) {
    .gnb {
      .menu-all {
        .menu-n {
          margin: 0;
          margin: 20px 0;
        }
        .depth2 {
          pointer-events: none;
          opacity: 0;
        }
      }
      &:has(.menu-n > li:hover) {
        transition: 0.3s;
        height: calc(var(--top-h) + var(--depth2Height) + 10px);
        max-height: 100vh;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        background-color: var(--gnb-bg);
        backdrop-filter: blur(20px);
        --tab-h: 0;
        .menu-all {
          align-items: flex-start;
        }
        .menu {
          max-height: calc(var(--top-h) + var(--depth2Height) + 10px);
          height: calc(var(--top-h) + var(--depth2Height) + 10px);
          .menu-n {
            height: calc(var(--top-h) + var(--depth2Height) + 10px);
            margin: 0;
            padding-top: 20px;
            padding-bottom: 20px;
          }
          .depth2 {
            pointer-events: all;
            opacity: 1;
            height: var(--depth2Height);
          }
        }
        .tab-menu {
          display: none;
        }
      }
    }
  }
}

/* 탭 메뉴 스타일 */
.wrap {
  &:has(.gnb .tabs > a:only-of-type),
  &:not(:has(.gnb .tabs > a)) {
    --tab-h: 0px !important;
    .gnb .tabs {
      display: none;
    }
  }
}
.gnb {
  .tabs {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    width: var(--width);
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    height: var(--tab-h);
    white-space: nowrap;
    /* li 자식 요소가 하나만 있거나, 하나도 없을 때 숨김 */

    + .article {
      margin-top: 20px;
    }
    a,
    li {
      font-size: 1.5em;
      font-weight: bold;
      color: var(--gray-light);
      margin-right: 20px;
      position: relative;
      transition: 0.2s;
      padding-top: 10px;
      height: var(--tab-h);
      line-height: 1;

      .label {
        margin: 0 2px;
        min-width: 24px;
        height: 24px;
        font-size: 11px;
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        background-color: var(--white);
        border: 1px solid var(--gray-border);
        color: var(--gray-light);
        position: relative;
        z-index: 3;
        border-radius: 50em;
        font-weight: bold;
        padding: 0 5px;
        margin-left: 4px;
        margin-top: -4px;
        @media (max-width: 812px) {
          min-width: 20px;
          height: 20px;
          line-height: 18px;
          font-size: 10px;
        }
      }
      &:hover {
        color: var(--gray-dark);
      }

      &.active {
        color: var(--gray-dark);
        &::after {
          width: 100%;
        }
        .label {
          color: #fff;
          border: 1px solid var(--main-color);
          background-color: var(--main-color);
        }
      }

      &::after {
        content: "";
        border-top: 6px solid var(--main-color);
        opacity: 0.7;
        display: block;
        margin-top: -5px;
        z-index: 0;
        position: relative;
        mix-blend-mode: multiply;
        width: 0;
        transition: 0.5s;
      }
    }
    > li {
      margin: 0;
    }
    &.static > li > a {
      height: 50px;
      &.active {
        color: var(--main-color);
        &::after {
          position: absolute;
          bottom: 0;
          left: 0;
          border-top-width: 4px;
          border-color: var(--main-color);
          opacity: 1;
        }
      }
    }
  }
}

body:has(.contents .article > .tabs) {
  &.scrolled .gnb::after {
    bottom: calc(-1 * var(--tab-h));
  }
}
/* 반응형 스타일 */
@media (max-width: 812px) {
  .gnb {
    --tab-h: 36px;
    z-index: 40;
    padding: 0;

    .menu {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      height: auto;
      transition: right 0.3s;

      > li.logo {
        width: 80%;
        height: var(--top-h);
        padding: 0 var(--padding);
        display: flex;
        align-items: center;
        background: none;
        background-size: auto 30px;
        flex-grow: 0;
        font-size: 0.8em;
        .logo-ori {
          display: block;
        }

        img {
          max-height: 40%;
          max-width: 100%;
          object-fit: contain;
          object-position: left center;
        }
      }

      .menu-n,
      .menu-my,
      .right-menu {
        width: 100%;
        flex-direction: column;
        gap: 0;
        padding: 0;
        margin: 0;
        background-color: transparent;
      }

      .menu-my,
      .right-menu {
        padding: 20px;
      }

      .menu-my {
        justify-content: flex-start;
        align-items: flex-start;

        li {
          padding: 5px 30px;

          a i {
            display: none;
          }
        }
      }

      .menu-all {
        display: flex;
        flex-direction: column;
        transform-origin: top right;
        height: calc(100dvh - 10px);
        position: absolute;
        top: 5px;
        right: -100%;
        z-index: 5;
        width: fit-content;
        min-width: 60%;
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        transition: 0.3s;
        border-radius: 12px;
        background-color: var(--white);
        backdrop-filter: blur(10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        color: var(--gray-dark);
        .menu-n {
          padding: 10px 30px 24px;
          justify-content: flex-start;
          align-items: flex-start;
          flex-grow: 1;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;

          > li {
            width: 100%;
            padding: 20px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            text-align: left;

            > a {
              display: flex;
              justify-content: space-between;
              gap: 12px;
              margin: 0;
              height: auto;
              font-size: 1rem;
            }

            .depth2 {
              position: static;
              opacity: 1;
              margin-top: 8px;
              padding: 0;
              max-height: none;
              display: flex;
              flex-direction: column;
              gap: 6px;
              pointer-events: auto;

              > li {
                padding: 0;
                color: var(--gray-mid);
                font-size: 0.9rem;

                &.active {
                  color: var(--main-color);
                }
              }
            }
          }

          > li:last-child {
            border-bottom: 0;
          }
        }
      }

      .right-menu {
        width: 100%;
        flex-shrink: 0;
        margin: 0;
        color: var(--gray-mid);
        font-size: 14px;
        transform: initial;
        position: static;
        top: initial;
        height: auto;
        justify-content: flex-start;
        align-items: flex-start;

        li {
          width: auto;
          height: auto;
          padding: 5px;

          &.ch,
          &.member {
            background: none;
            margin-left: 0;
          }
        }

        li.ch::before {
          content: "카카오톡채널";
        }

        li.member::before {
          content: "로그인";
        }

        .lang {
          width: 100%;
          padding: 0;
          padding-top: 10px;

          margin: 0;
          .selector {
            width: 100%;
            padding: 20px 10px;
            font-size: 13px;
            padding: 0;
            color: var(--gray-dark);
          }

          ul {
            display: none;
            width: 100%;
            margin: 10px 0;
            border: 1px solid rgba(255, 255, 255, 0.2);
            top: auto;
            bottom: calc(100% + 10px);
            margin-top: 0;
            margin-bottom: 10px;

            li {
              background-color: transparent;
            }
          }

          .selectbox > ul li + li {
            border-color: rgba(255, 255, 255, 0.2);
          }
        }
        .member-menu {
          font-size: 14px;
        }
        .download {
          margin: 0;
          padding: 10px 0;
          color: var(--gray-light);
          font-size: initial;
        }
      }

      li.right-menu ul {
        display: none;
      }
    }

    .coll {
      position: absolute;
      right: 0;
      top: 0;
      width: 50px;
      height: var(--top-h);
      padding: 20px 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 200;
      z-index: 12;

      &::before {
        content: "menu";
        font-family: "Material Symbols Sharp";
        font-size: 1.8rem;
      }
    }

    &.active {
      .menu .menu-all {
        right: 5px;
      }
      .wrap:has(&) {
      }
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        width: 100vw;
        height: 100vh;
        z-index: 4;
        background-color: rgba(0, 0, 0, 0.8);
      }
      .coll {
        background-color: transparent;

        &::before {
          border-color: #fff;
        }

        &::after {
          background-color: #fff;
        }
      }

      .menu li.right-menu ul {
        display: flex;
        position: absolute;
        left: calc(50% + 30px);
        top: 20px;
        z-index: 10;

        li {
          &.member,
          &.ch {
            background: none;
            color: var(--gray-light);
            font-weight: bold;
          }

          &.member::before {
            content: "로그인";
          }

          &.member + .ch::before {
            content: "카카오채널";
          }
        }
      }
    }
  }

  .scrolled .gnb {
    .menu {
      height: var(--top-h);

      a {
        &:hover,
        &.active {
          color: var(--main-light);
        }
      }

      .menus .menu-n li.linkage {
        .icon::before,
        .icon::after {
          border-color: #fff;
        }
      }
    }

    &:after {
      width: 100%;
      transform: scaleY(0.34);
      transform-origin: left bottom;
    }

    &.has-tab:after {
      top: calc(100% + 36px);
    }

    &.paying {
      z-index: 13;
    }
  }

  body:has(.gnb.active) {
    overflow: hidden;
  }
  .gnb {
    .tab-menu {
      --tab-h: 36px;
      padding-left: var(--padding);
      padding-right: var(--padding);
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      align-items: flex-start;
      .tabs {
        a,
        li {
          font-size: 1rem;
          padding-top: 4px;
          padding-bottom: 0;
          .scrolled & {
            font-size: 1rem;
            padding-top: 4px;
          }
          &.active {
            color: var(--main-color);
            font-weight: bold;
            &::after {
              width: 100%;
              border-top-width: 3px;
            }
          }
          &::after {
            content: "";
            position: absolute;
            width: 0;
            left: 0;
            bottom: 0;
            margin-top: 0;
            border-top-width: 3px;
            border-color: var(--main-color);
            opacity: 1;
          }
        }
      }
    }
  }
}



/* ---- global/css/layouts/loading.css ---- */
/* 로딩 */
.loading {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  pointer-events: none;
  left: 0;
  top: 0;
  background-color: rgba(255, 255, 255, 0.7);
  animation-name: loading-baloon;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  display: none;
}
.loading .img {
  width: 120px;
  padding-top: 120px;
  background: url(/youthCenter/img/loading-face.svg) no-repeat center top;
  position: relative;
  animation-name: loading-blink;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.loading .img:before {
  width: 180px;
  height: 180px;
  content: '';
  background: url(/youthCenter/img/loading-rotate.svg) no-repeat center top;
  position: absolute;
  left: -30px;
  top: -30px;
  animation-name: loading-rotate;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: center;
}
.time h2 {
  font-weight: 200;
  margin-top: 4px;
  font-size: 1.7em;
  letter-spacing: 0;
}
.sight {
}
@keyframes loading-rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(359deg);
  }
}
@keyframes loading-blink {
  0% {
    background-image: url(/youthCenter/img/loading-face.svg);
  }
  98% {
    background-image: url(/youthCenter/img/loading-face.svg);
  }
  100% {
    background-image: url(/youthCenter/img/loading-face-close.svg);
  }
}
@keyframes loading-baloon {
  0% {
    padding-top: 15px;
  }
  50% {
    padding-top: 0;
  }
  100% {
    padding-top: 15px;
  }
}



/* ---- global/css/layouts/notice-area.css ---- */
.notice-area {
  margin-top: 0;
  padding-top: 0;
  position: relative;
  margin-bottom: 20px;
  overflow: hidden;

  .swiper-pagination-fraction {
    position: absolute;
    top: var(--padding);
    right: 20px;
    left: initial;
    text-align: right;
    opacity: 0.5;
    font-size: 0.8em;
    height: auto;
    width: auto;
  }
  li {
    border-radius: 8px;
    background-color: var(--gray-pale);
    padding: var(--padding);
    h4 {
      margin-bottom: 10px;
      font-size: 1em;
      &::before {
        content: '\e9ab';
        margin-right: 5px;
        font-size: 1.2em;
        font-weight: normal;
        vertical-align: middle;
        margin-top: -2px;
        display: inline-block;
        font-family: 'xeicon';
      }
    }
    p {
      padding-left: 0;
      font-size: 0.95em;
      color: var(--gray-mid);
      line-height: 1.4;
      &::before {
        display: none;
      }
    }

    .red {
      color: var(--red-color);
    }
  }
  .swiper-nav {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 1em;
    z-index: 22;
    display: flex;
    opacity: 0.7;
    gap: 10px;
    .swiper-pagination-fraction {
      position: static;
      opacity: 1;
      gap: 2px;
      font-size: 0.7em;
    }
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .swiper-button-disabled {
      opacity: 0.2;
    }
  }
}

.sub-detail {
  &:has(.notice-area) {
    padding-top: 0;
  }
}

@media (max-width: 812px) {
  .sect.notice-area {
    padding: 0;
    margin: 10px;
    width: calc(100% - 20px);
    overflow: hidden;
    li {
      padding: 20px;
      :has(.ui-sect) &.swiper-slide-active {
        background-color: var(--white);
      }
      h4 {
        font-size: 1.15em;
      }
    }
  }
}



/* ---- global/css/layouts/notice-layers.css ---- */
/* ── 공지 레이어 팝업 ─────────────────────────────────── */
.notice-layers {
  body:has(&.on) {
    overflow: hidden;
    &:has(.notice-layers.on[style="display: none;"]) {
      overflow-y: auto;
    }
  }
  body:has(.images &.on) {
    overflow-y: auto;
  }
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 51;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: 0s;
  display: flex;
  align-content: center;
  &.on {
    pointer-events: all;
    opacity: 1;

    + .visual .swiper-slide::before {
      background-color: rgba(0, 0, 0, 0.2);
    }
  }

  > .closes {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    a {
      display: flex;
      gap: 4px;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.15);
      border-radius: 10em;
      padding: 12px 20px;
      font-size: 0.9em;

      &:hover {
        background-color: var(--main-color);
      }
    }
  }
  /* 레이어팝업 삽입*/
  .notice-layer {
    --gap: 12px;
    --cell: 4;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    box-sizing: border-box;
    transition: 0.2s;
    flex-grow: 1;
    padding: var(--padding) var(--padding) 10px var(--padding);
    overflow-y: auto;
    align-content: center;
    align-content: flex-start;
    &:has(li:nth-child(9)) {
      --cell: 5;
    }
    li {
      /*aspect-ratio: 1/1;*/
      border-radius: 8px;
      overflow: hidden;
      position: relative;
      transform-origin: left top;
      flex-grow: 0;
      flex-shrink: 0;
      width: calc(
        (100% / var(--cell)) - var(--gap) + (var(--gap) / var(--cell))
      );
      height: fit-content;
      max-height: 70vh;
      img {
        width: 100%;
        height: auto;
        max-height: 70vh;
        object-fit: contain;
      }

      .closes {
        display: flex;
        position: absolute;
        width: 100%;
        justify-content: center;
        font-size: 0.7em;
        gap: 5px;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);

        a {
          display: flex;
          align-items: center;
          gap: 4px;
          padding: 10px;
          font-weight: bold;
          color: #fff;
        }
      }

      &.light {
        .closes a {
          color: #000;
          box-shadow: none;
        }
      }
    }
  }
  /* 메인일때 */
  .main &,
  &.filled {
    padding-top: var(--top-h);
    padding-bottom: var(--top-h);
    .notice-layer {
      align-items: center;
      justify-content: center;
      height: auto;
      flex-grow: 1;
      max-height: 100%;
    }
  }
  &.filled {
    position: fixed;
    & .notice-layer {
      --cell: 2;
      padding: 0;
      gap: 10px;
      width: 100%;
      padding: 10px;
      li {
        aspect-ratio: 1/1;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        transform-origin: left top;
        flex-shrink: 0;
        width: calc(
          (100% / var(--cell)) - var(--gap) + (var(--gap) / var(--cell))
        );
        height: auto;
        img {
          width: 100%;
          height: 100%;
        }

        .closes {
          display: flex;
          position: absolute;
          width: 100%;
          justify-content: center;
          font-size: 0.7em;
          gap: 5px;
          right: 0;
          bottom: 0;
          background-color: rgba(255, 255, 255, 0);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);

          a {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 10px;
            font-weight: bold;
            color: #fff;
          }
        }

        &.light {
          .closes a {
            color: #000;
            box-shadow: none;
          }
        }
      }
    }
  }
  /* 서브일때 */
  .images & {
    padding: 0;
    z-index: 2;
    position: absolute;
    .notice-layer {
      --cell: 5;
      width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      flex-wrap: nowrap;
      align-items: center;
      > li {
        height: 100%;
        width: auto;
      }
    }
    > .closes {
      font-size: 0.85em;
    }
  }
  /* 서브 꽉 채울때 */
}

/* 반응형 */
@media (max-width: 812px) {
  .notice-layers {
    flex-direction: column;
    width: 100%;
    height: 100%;

    > .closes {
      text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
      font-size: 1em;
      font-weight: bold;
      position: static;
      width: 100%;
      margin: 10px 0;
      .sub & {
        margin-top: 0;
        margin-bottom: 10px;
      }
      a {
        font-size: 0.8em;
      }
    }
    .notice-layer {
      --cell: 2;
      padding: 0;
      gap: 10px;
      width: 100%;
      padding: 10px;
      align-content: flex-start;
      li {
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        width: 100%;
        max-height: 60vh;
        img {
          max-height: 60vh;
        }
        .closes a {
          color: #fff;
        }
      }
    }
  }

  .dimed .notice-layers {
    display: none;
  }
}


/* ---- global/css/layouts/pagination.css ---- */
/* 페이징(페이지네이션) 스타일 */
.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 30px;

  &:not(:has(.paging)) {
    padding: 20px 0;
  }

  :where(.left, .right) {
    width: 20%;
  }

  .btn {
    min-width: auto;
  }

  .right {
    display: flex;
    justify-content: flex-end;
  }

  > .paging {
    flex-grow: 1;
    justify-content: center;
  }

  > div {
    display: flex;
    align-items: center;
    gap: 0.4em;
  }

  &:not(:has(.left)) > .paging {
    padding-left: 20%;
  }
  &:not(:has(.right)) > .paging {
    padding-right: 20%;
  }
}

.paging {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: var(--padding) 0;
  color: var(--gray-light);

  a {
    text-align: center;
    min-width: 24px;
  }

  i {
    font-size: 1.3em;
  }

  .active {
    font-weight: bold;
    color: var(--main-color);
  }

  .w_hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .first,
  .prev,
  .next,
  .last {
    position: relative;
  }
}



/* ---- global/css/layouts/promotion.css ---- */
  /* ==========================================================================
   프로모션 (Promotion) 배너 스타일
   ========================================================================== */

.promotion {
  background: no-repeat center/cover;
  height: 280px;
  border-radius: 10px;
  display: flex;
  color: #fff;
  flex-direction: column;
  padding: 60px 50px;
  justify-content: center;
  position: relative;
  overflow: hidden;
  overscroll-behavior: none;
  gap: 20px;

  /* 인접 요소 마진 */
  ul + & {
    margin-top: 80px;
  }
  ul.list.vertical + & {
    margin-top: 60px;
  }
  & + .guidance {
    margin-top: 50px;
  }

  > div {
    position: relative;
    z-index: 2;
    &.extra {
      margin-top: 0;
    }
  }

  .extra p,
  p {
    color: #fff;
  }

  .ment h2 span {
    color: var(--main-light);
    &::after {
      display: none;
    }
  }

  &::before {
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 70%);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }

  /* 배너 타입 프로모션 */
  &.banner {
    cursor: pointer;
    background-color: #e1f5f8;
    background-position: right center;
    background-size: auto 110%;
    transition: 1s ease-in-out;
    height: 220px;

    &:hover {
      background-size: auto 130%;
      transition: 3.4s ease-in-out;
    }

    &::before {
      display: none;
    }

    > img {
      max-width: 100%;
    }

    .ment {
      h2 {
        color: var(--main-color);
      }
      h3 {
        color: var(--main-deep);
        opacity: 0.7;
        font-size: 1.3em;
        + h2 {
          margin-top: 4px;
        }
      }
      i:first-child {
        margin-right: 5px;
        font-size: 1.2em;
        vertical-align: middle;
      }
    }

    .extra {
      margin-top: 12px;
      p {
        color: var(--gray-mid);
        mix-blend-mode: multiply;
      }
    }
  }
}

.sect.promotion.banner {
  margin-top: -50px;
  margin-bottom: 50px;
}

/* ==========================================================================
   관련 레이아웃 헬퍼 (프로모션과 직접 관련 없음)
   ========================================================================== */

.section {
  .split {
    display: flex;
    justify-content: space-between;
    li {
      flex-grow: 0;
      width: calc(50% - 50px);
    }
    ul.demical li {
      width: 100%;
    }
  }

  div + .guidance {
    margin-top: 50px;
  }

  .list + .guidance {
    margin-top: 60px;
  }
}

:has(.guidance + .guidance) .guidance .head {
  width: 15%;
}



/* ---- global/css/layouts/reserved-ticket.css ---- */
div + .reserved-my-ticket {
  margin-top: 24px;
}
.reserved-my-ticket h5 {
  color: var(--gray-mid);
  font-size: 0.85em;
  margin-bottom: 5px;
}
.reserved-my-ticket > li {
  font-size: 0.88em;
  line-height: 1.45;
}
.reserved-my-ticket > li .infos h3 {
  font-size: 1.2em;
}
.reserved-my-ticket > li .infos .day {
  font-size: 1em;
  color: var(--gray-mid);
}



/* ---- global/css/layouts/section.css ---- */


/* ==========================================================================
   예약 UI 섹션 (.ui-sect)
   - 예약/선택 UI 컨테이너 및 하위 요소
   ========================================================================== */

.full {
  .ui-sect {
    &.no-border {
      position: relative;
    }
  }
}

.wrap {
  min-height: 100%;
  background-color: #fff;
  word-break: keep-all;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  &.error {
    top: 0;
  }
}
.contents {
  flex-grow: 1;
}
.sub {
  .images + .detail.full {
    margin-top: 40px;
  }

  &.full {
    .detail {
      .detail-contents {
        width: 100%;
      }
    }
  }
}

.contents {
  padding-top: var(--top-h);
  position: relative;
  .head-title {
    width: var(--width);
    margin: auto;
    .header {
      word-break: keep-all;
    }

    h1 {
      font-size: 1.8em;
      width: initial;
    }

    > p {
      padding: 0 var(--padding);
    }

    &.nav {
      margin: 5px 0 20px 0;

      h1 {
        font-size: 1.55em;

        img {
          height: 20px;
        }
      }
    }
  }
  .header {
    margin: var(--padding) auto 40px;
    width: var(--width);
    box-sizing: content-box;

    h1 {
      font-size: 32px;
      width: 65%;
    }

    h1 + :where(p, h2, h3, h4, h5) {
      margin-top: 12px;
    }

    p {
      line-height: 1.4;
      color: var(--gray-mid);
    }

    &.nav,
    .nav {
      h1 {
        display: flex;
        align-items: center;
        gap: 10px;

        img {
          height: 30px;
        }
      }
    }
  }

  .detail {
    max-width: var(--width);
    margin: 3% auto;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
    padding-bottom: 20px;
    gap: 2em;

    .detail-contents {
      flex-grow: 1;
      width: 50%;
      padding-bottom: 60px;
    }
    .global-btns {
      position: fixed;
      bottom: 10px;
      z-index: 10;
      display: flex;
      width: 100%;
      justify-content: center;

      > a {
        height: var(--btn-h);
        background: var(--main-gra);
        color: #fff;
        border-radius: var(--btn-h);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 var(--padding);
        font-weight: bold;
      }
    }
  }
  .sub-detail {
    flex-grow: 1;
  }

  .static {
    display: flex;
    flex-direction: column;
    .images + & {
      padding-top: 30px;
    }

    padding-bottom: 80px;
    &:has(.sect:last-child:is(.contactus)) {
      padding-bottom: 0;
    }
    .irregular {
      display: flex;
      flex-wrap: wrap;
      gap: var(--gap);
      row-gap: 0;
      --gap: 8em;
      --col: 2;

      &:is(.tri) {
        --gap: 4em;
        --col: 3;

        > div {
          h2 {
            @media (min-width: 812px) {
              font-size: 1.7em;
            }
          }
          & + div + div {
            margin-top: -100px;
          }
          .head {
            padding-left: 0;
          }
        }
      }
      > div {
        position: relative;
        margin: 0;
        width: calc(100% / var(--col) - (var(--gap) - var(--gap) / var(--col)));
        display: flex;
        flex-direction: column;
        gap: 3em;
        &:has(.col:nth-child(3)) {
          .img {
            aspect-ratio: 1/1;
          }
        }
        & + div {
          margin-top: 120px;
        }
        .img {
          position: relative;
          aspect-ratio: 9/13;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: relative;
            z-index: 2;
            &.shadow {
              position: absolute;
              top: 6%;
              left: 6%;
              z-index: 1;
              filter: blur(30px);
              opacity: 0.4;
            }
          }
        }
        .head {
          position: relative;
          z-index: 5;
          padding: 36px;
          @media (max-width: 812px) {
            & {
              padding-right: 20px;
              padding-left: 0;
              padding-top: 24px;
              .feat {
                column-gap: 2em;
                > li {
                }
              }
            }
          }
        }
        &.last {
          .col {
            display: flex;
            align-items: flex-end;
          }
          display: flex;
          align-items: flex-end;
          width: 100%;
          .img {
            aspect-ratio: 12/8;
            width: calc(50% + var(--gap) / var(--col));
            .shadow {
              left: 0;
            }
          }
          .head {
            padding-left: 50px;
            padding-bottom: 0;
          }
        }
      }
      &.floor {
        --col: 1;
        flex-direction: column;
        > div {
          flex-direction: row;
          gap: 4em;
          .img {
            aspect-ratio: initial;
            width: 45%;
            flex-shrink: 0;
            img {
              border-radius: 0;
              object-fit: initial;
              height: auto;
            }
          }
          .head {
            padding: 0;
          }
          .text {
            display: flex;
            flex-direction: column;
            gap: 2em;
          }
          &:not(:has(.img)) .facility {
            --cell: 5;
          }
          .facility {
            --cell: 3;

            li {
              flex-grow: 0;
              .thumb {
                border-radius: 8px;
              }
            }
          }
        }
      }
      /* 순서대로 표시하는 구성 */
      &.straight {
        > div {
          --gap: 8em;
          --col: 2;
          display: flex;
          gap: var(--gap);
          width: 100%;
          flex-direction: row;
          flex-wrap: wrap;
          .col {
            position: relative;
            margin: 0;
            width: calc(
              100% / var(--col) - (var(--gap) - var(--gap) / var(--col))
            );
            display: flex;
            flex-direction: column;
          }
          & + div {
            margin-top: 0;
          }
          & + div + div {
            margin-top: 0;
          }
        }
        &.tri {
          > div {
            --col: 3;
            --gap: 3em;
            & + div + div {
              margin-top: 0;
            }
            .col {
              padding: 0 var(--sp);
              &:nth-child(n + 2) {
                margin-top: 100px;
              }
              &:nth-child(n + 3) {
                margin-top: -100px;
              }
            }
          }
        }
        @media (max-width: 812px) {
          &.tri {
            > div {
              --col: 0;

              .col {
                width: 100%;
                &:nth-child(n + 2) {
                  margin-top: 0px;
                }
                &:nth-child(n + 3) {
                  margin-top: 0px;
                }
              }
            }
          }
        }
      }
      @media (max-width: 812px) {
        padding: 0;
        border: 0;
        &.floor {
          gap: 10px;
          padding: 10px;
          background-color: var(--gray-pale);
          > div {
            background-color: var(--white);

            border-radius: 12px;
            flex-direction: column;
            gap: 2em;
            padding: var(--sp);
            & + & {
              margin-top: 0;
            }
            &:not(:has(.img)) .facility,
            .facility {
              --cell: 2;
            }
            .img {
              width: 100%;
              aspect-ratio: 16/9;
            }
          }
          + .sect {
            margin-top: 10px;
            border: 0;
          }
        }
        > div {
          overflow: visible;
          padding: 0;
          width: 100%;
          --sp: 32px;
          .col {
            width: 100%;
          }

          &:nth-child(odd) {
            .col {
              padding-left: var(--sp);
            }
            .img {
              aspect-ratio: 1/1;
            }
          }
          &:nth-child(even) {
            .col {
              padding-right: var(--sp);
              .head {
                padding-left: var(--sp);
              }
            }
            .img {
              aspect-ratio: 1/1;
            }
          }
          &.last {
            .col {
              flex-direction: column;
              width: 100%;
              .head {
                padding: var(--sp);
                padding-left: 0;
                width: 100%;
              }
            }
            .img {
              aspect-ratio: 1/1;
              width: 100%;
            }
          }
          & + & {
            border: 0;
            margin-top: 36px;
          }
        }
      }
    }
    .sect {
      width: 100%;
      max-width: var(--width);
      margin-left: auto;
      margin-right: auto;
      &.contactus {
        margin-bottom: 0;
      }
      &.full {
        padding: 0;
        width: 100%;
        max-width: 100%;
        .in {
          max-width: var(--width);
          margin: 0 auto;
        }
      }
    }
  }
}

body {
  &:has(.gnb .tabs) .contents {
    padding-top: calc(var(--top-h) + var(--tab-h));
  }
  &:has(.gnb .tabs > li:only-child) .contents {
    padding-top: calc(var(--top-h));
  }

  &:not(:has(.gnb)) .contents {
    padding-top: var(--padding);
  }

  &.static .contents {
    .images {
      .swiper-slide {
        height: 500px;
      }
    }
  }
}

.onestep {
  .ui-sect {
    .ui-sect-btns {
      display: none;
    }
  }
}

.option-added {
  display: flex;
  flex-wrap: wrap;
  color: var(--gray-mid);
  gap: 10px;
  font-size: 0.8em;
  margin-top: 4px;
  line-height: var(--padding);

  &::before {
    content: "OPTION";
    font-size: 10px;
    border: 1px solid var(--gray-border);
    padding: 0 10px;
    font-weight: bold;
    color: var(--gray-mid);
    border-radius: 3px;
  }
}

.subsect {
  margin-top: calc(2 * var(--padding));
}
.ui-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  > .sect {
    background-color: var(--gray-pale);
    border-radius: 12px;
    padding: var(--padding);
    .agreement,
    .accordion {
      background-color: var(--white);
      border: 0;
    }
    input,
    textarea,
    select {
      border: 0;
      border-radius: 8px;
      &:disabled {
        background-color: rgba(0, 0, 0, 0.05);
      }
    }
    select {
      background-color: var(--white);
    }
    & + & {
      margin-top: 0;
    }
    &:last-child {
      padding-bottom: var(--padding);
    }
  }
  .button {
    background-color: var(--white);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    border: 0;
    &:hover {
      background-color: var(--main-color);
    }
    &.disabled {
      pointer-events: none;
      box-shadow: none;
      background-color: rgba(0, 0, 0, 0.05);
      color: var(--gray-light);
    }
  }
  & + .sect {
    margin-top: 100px;
  }
}
.sect {
  &.over {
    /*margin-top: 20px;*/
    margin-bottom: 36px;
    .auth-banner + & {
      margin-top: 40px;
      @media (max-width: 812px) {
        margin-top: 0px;
      }
    }
  }
  &.pay-log {
    margin-top: 50px;
  }
  + & {
    margin-top: 100px;
    &.sm {
      margin-top: 50px;
    }
  }

  &.noti {
    margin: var(--padding) 0;
    .paying & {
      margin: 36px 0;
    }
    .notice {
      padding: var(--padding) 0;
      h3 {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 5px;
      }
    }
  }
  &.notice-area + .sect {
    margin-top: 40px;
  }
  .head {
    &:only-child:not(.cs-card) {
      padding-bottom: 0;
    }
    padding-bottom: var(--padding);
    &:has(h3 .btn) {
      padding-bottom: 10px;
    }
    &.copy {
      display: flex;
      flex-direction: column;
      :is(&:only-child) {
        padding-bottom: 0;
      }
      .reservation & {
        h1 {
          font-size: 1.8em;
        }
      }
      padding-bottom: calc(var(--padding) * 1.5);
      h4 {
        color: var(--gray-light);
        line-height: 1.35;
        &:first-of-type {
          margin-top: 12px;
        }
        a.underline {
          color: var(--gray-dark);
        }
      }
      h2 {
        font-size: 1.8em;
      }

      .feat {
        margin-top: 30px;
      }
      .btn {
        margin-top: 32px;
        font-size: 1rem;
        padding: 10px 0;
        &::after {
          content: "arrow_forward_ios";
          font-weight: 400;
          font-family: "Material Symbols Sharp";
        }
      }
    }
    span {
      position: relative;
      z-index: 1;

      &.none:after {
        display: none;
      }
    }

    h3 {
      margin-bottom: 8px;
      padding-bottom: 0;
      &:has(.btn) {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      img {
        height: 24px;
      }
      &:only-child {
        margin-bottom: 0;
      }
    }

    > p {
      color: var(--gray-mid);
      line-height: 1.4;
    }
  }

  h1.light {
    font-weight: 200;
  }

  .noti {
    ul + & {
      margin-top: 20px;
    }
    p,
    li {
      color: var(--gray-mid);
      line-height: 1.4;
      &::before {
        content: "•";
        opacity: 0.4;
      }
    }
  }

  .btn-set {
    display: flex;
    margin-top: var(--padding);
    justify-content: center;
    > a {
      font-size: 1.2em;
      height: auto;
      padding: 14px 24px;
    }
  }

  .split {
    display: flex;
    gap: 100px;

    > div {
      display: flex;
      flex-direction: column;
      gap: 8px;
      &.w40 {
        width: 40%;
      }

      &.w50 {
        width: 50%;
      }

      &.w60 {
        width: 60%;
      }
    }
  }

  &:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
  }

  &.shop-info {
    line-height: 1.4;
    h3 {
      margin-top: 30px;
      margin-bottom: 0;
    }

    h4 {
      font-weight: normal;
    }

    .introduction {
      margin-top: 15px;

      p {
        color: var(--gray-mid);
        line-height: 1.4;
      }
    }
    .map-area {
      .root_daum_roughmap .map_border {
        display: none !important;
      }
    }
  }

  &.spect {
    padding: 36px;
    background-color: var(--gray-pale);
    border-radius: 12px;
  }

  .sect-sub + .sect-sub {
    margin-top: 60px;
  }

  &.notifications {
    margin-bottom: var(--padding);
  }

  p .bk {
    color: var(--gray-dark);
  }
  .limits {
    margin-top: 40px;
    .head {
      display: flex;
      align-items: center;
      gap: 10px;
      .text {
        display: flex;
        flex-direction: column;
        gap: 3px;
        h4 {
          color: var(--orange);
        }
        p {
          color: var(--gray-mid);
          font-size: 0.95em;
        }
      }

      .ms-icon {
        font-size: 1.5em;
        font-weight: 300;
        aspect-ratio: 1/1;
        background-color: var(--orange);
        border-radius: 50%;
        padding: 10px;
        color: #fff;
      }
    }
    .feat {
      margin-top: 10px;
      .icon {
        font-weight: 300;
      }
    }
    .full & {
      margin: 0;
      padding: 0 30px 30px;
      .feat {
        margin: 0;
      }
    }
  }
}
.notion {
  background-color: var(--gray-pale);
  border-radius: 16px;
  .notification.vertical {
    padding: 0 10px;
    padding-bottom: calc(var(--padding) * 1.3);
    .icon {
      background-color: var(--white);
      color: var(--main-color);
    }
  }
  .head {
    padding: calc(var(--padding) * 1.3);
  }
}
.sub-sect {
  display: flex;
  flex-direction: column;
  gap: 3em;
  .head {
    h3 {
      font-size: 1.1em;
    }
    padding-bottom: 15px;
  }
}
.ui-sect {
  counter-reset: ui-sect-step;
  border: 1px solid var(--gray-border);
  border-radius: 12px;
  overflow: hidden;
  --padding: 30px;
  &.no-border {
    padding: 0;
    border: 0;
    overflow: visible;

    .sect {
      .head {
        padding: var(--padding) 0 0;
      }

      .head + div,
      .head + ul {
        padding: 0;
      }

      .map-area {
        .map > img {
          border-radius: 6px;
          overflow: hidden;
        }
      }
    }
  }

  + .sect {
    margin-top: 50px;
  }

  + .ui-sect {
    margin-top: 0;
  }

  .sect {
    counter-increment: ui-sect-step;
    margin-bottom: 0;

    > li.on::before {
      color: #fff;
    }

    & + .sect {
      margin-top: 0;
    }

    & + .sect:has(.head) {
      padding-top: 0;
    }

    &:last-of-type:has(.map-picker) {
      margin-bottom: 0;
    }

    .head {
      h3 {
        position: relative;

        &::before {
          content: counter(ui-sect-step) ".";
          margin-right: 0.4em;
          color: var(--main-color);
          font-weight: inherit;
        }
      }
    }

    .head + div,
    .head + ul {
      margin-top: var(--padding);
    }

    > .input-ui {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    > div.head {
      padding: var(--padding) var(--padding) 0;
      margin: 0;
    }
    /* &:has(.time-schedule) {
      & + .set-ea .ui-item {
        position: relative;
        background-color: var(--white);
        &::before {
          content: '이용하실 날짜와 프로그램을 선택하세요';
          color: var(--gray-mid);
          font-weight: bold;
          font-size: 1.3em;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background-color: rgba(255, 255, 255, 0.4);
          backdrop-filter: blur(12px);
          z-index: 10;
        }
      }
      &:has(.schedule.active) {
        & + .set-ea .ui-item::before {
          display: none;
        }
      }
    } */
    &.sight {
      margin-top: 0;
      padding: 0;

      &.notyet {
        .map {
          transition: 0.2s;
        }
      }
    }

    &.notyet {
      .map-area::before {
        content: "날짜를 선택하세요";
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        font-size: 1.2em;
        font-weight: bold;
        z-index: 10;
      }
    }

    &:first-child {
      margin-top: 0;
    }

    .prices.option-item {
      display: flex;
      flex-wrap: wrap;
      padding: var(--padding) var(--padding) 0;
      --gap: 10px;
      gap: var(--gap);
      row-gap: 1em;

      > li {
        display: flex;
        flex-direction: column;
        width: calc(25% - (var(--gap) - var(--gap) / 4));
        padding: 20px;
        border: 1px solid var(--gray-border);
        border-radius: 8px;

        .quantity {
          flex-grow: 1;
          margin-top: 15px;
          justify-content: flex-start;

          input {
            width: auto;
            height: 100%;
            font-size: 1.2em;
          }
        }

        .item-name {
          font-size: 1.2em;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 0.5em;

          .price {
            font-weight: bold;
          }
        }
      }

      &:has(> li:first-child:nth-last-child(2)) > li {
        width: calc(50% - var(--gap));
      }

      &:has(> li:first-child:nth-last-child(3)) > li {
        width: calc(33% - (var(--gap) - var(--gap) / 3));
      }

      &:has(> li:first-child:nth-last-child(4)) > li {
        width: calc(25% - (var(--gap) - var(--gap) / 4));
      }

      &:has(> li:first-child:nth-last-child(5)) > li {
        width: calc(20% - (var(--gap) - var(--gap) / 5));
      }
    }
  }

  + .ui-sect {
    margin-top: var(--padding);
  }

  .ui-sect-btns {
    display: flex;
    align-items: center;
    padding: var(--padding);
    justify-content: space-between;
    border-top: 1px solid var(--gray-border);

    .select-btns {
      display: flex;
      gap: 8px;

      a {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 24px;
        gap: 5px;
        border-radius: 6px;
        border: 1px solid var(--gray-border);
        transition: 0.2s;

        &.notyet {
          pointer-events: none;
        }

        &:hover {
          background-color: rgba(0, 0, 0, 0.1);
        }

        i {
          font-size: 1.2em;
        }

        &.submit {
          background: var(--main-gra-rev);
          color: #fff;
          font-weight: bold;
          border-color: transparent;
          box-shadow: 0 10px 20px rgba(239, 32, 0, 0.2);
          pointer-events: all;

          &:hover {
            box-shadow: 10px 20px 30px rgba(239, 32, 0, 0.2);
          }
        }
      }
    }

    .selected-info {
      display: flex;
      flex-direction: column;
      gap: 6px;
      color: var(--gray-mid);

      h4 {
        font-size: 0.9em;

        &.added {
          color: var(--gray-dark);
        }
      }

      h3 {
        font-size: 1.1em;
      }
    }
  }
}

/* ==========================================================================
   반응형 스타일
   ========================================================================== */

@media (max-width: 812px) {
  html,
  body {
    height: 100vh;
  }
  html {
    width: 100vw;
  }
  body {
    overflow-x: hidden;
  }
  .wrap {
    width: 100vw;
    overflow: hidden;
  }

  .content {
    .detail-contents {
      width: 100vw;
    }
  }

  .reservation.my {
    padding-bottom: 0;
    overflow: hidden;
  }
  .ui-form {
    margin: 0 10px;
    gap: 10px;
    & + .sect {
      margin-top: var(--padding);
    }
  }
  .sect {
    &:has(.selected-item) {
      overflow: visible;
      padding-top: 0;
    }
    &.over {
      margin-top: 0;
      margin-bottom: 0;
      &:first-child {
        padding-top: 24px;
      }
      & + .sect {
        border-top: 0;
      }
    }
    &.noti {
      margin: 0;
    }
    margin: 0;
    padding: var(--padding);
    position: relative;
    overflow: hidden;
    .head {
      padding-bottom: 10px;
      h4 {
        br {
          display: none;
          line-height: 1.4;
        }
      }
    }
    &:has(.time-clock) {
      overflow: visible;
    }
    & + & {
      margin-top: 0;
      border-top: var(--spector);
    }
    &.notice-area + .sect {
      margin-top: 0;
      border-top: 0;
    }
    .ui-sect + & {
      margin-top: 0;
    }
    .ui-sect & + & {
      margin-top: 0;
      border-top: 0;
    }
    .ui-sect & {
      padding: 0;
    }
    .split {
      flex-wrap: wrap;
      gap: var(--padding);
      justify-content: space-between;
    }

    &.flex {
      flex-direction: column;

      > div {
        width: 100%;
      }
    }
    &.pay-log {
      margin-top: 0;
    }
    &.noti {
      padding: var(--padding);
      border-radius: 0;

      &.strong {
        margin: 10px;
        padding: 20px;
      }

      .print,
      .print img {
        padding-left: var(--padding);
        padding-right: var(--padding);
      }
    }
    &.notion {
      margin-bottom: -8px;
      padding: 0;
      border-radius: 0;
      border-top: 0 !important;
      .head {
        padding: var(--padding);
      }
      .notification.vertical {
        --cell: 2;
        .head + & {
          margin-top: 0;
        }
        margin: 16px;
        padding: var(--padding) 0;
        background-color: var(--white);
        border-radius: 16px;
        .icon {
          background-color: var(--gray-pale);
        }
        p {
          font-size: 0.9em;
          line-height: 1.4;
        }
      }
    }
    &.sight {
      width: 100%;

      .head,
      .course-table {
        margin: 0 var(--padding);
      }
    }

    &.shop-info {
      padding: 0;
      margin-top: -1px;
      padding-bottom: var(--padding);

      > * {
        padding-left: var(--padding);
        padding-right: var(--padding);
      }

      .map {
        padding: 0;
        border-radius: 0;
        clip-path: inset(0% 0% 0% 0% round 0);
      }

      h4 {
        width: 100%;

        + h4 {
          margin-top: 2px;
        }
      }
    }
    .head.copy {
      .reservation & {
        h1 {
          font-size: 1.5em;
          & + h4:first-of-type {
            margin-top: 3px;
          }
        }
      }
    }
    &.collabo {
      .img {
        width: 100%;
        aspect-ratio: 16 / 9;
      }

      .info {
        h4 {
          font-size: 1.1em;
        }
      }
    }
    .split {
      flex-wrap: wrap;
      gap: var(--padding);
      justify-content: space-between;
    }

    table.span {
      tbody {
        display: table-row-group;
      }
    }

    .voucher {
      table {
        display: table;
      }

      tr {
        display: table-row;
      }

      th {
        width: auto;
        white-space: nowrap;
        padding-right: 20px;
      }

      th,
      td {
        display: table-cell;
      }
    }

    .overview-mm {
      table,
      table tbody {
        display: block;
      }

      table tr {
        display: block;
      }

      tr:first-child {
        border-top: 1px solid var(--gray-dark);

        th {
          padding-top: 20px;
        }
      }

      tr {
        th {
          width: 100%;
        }

        td:last-child {
          display: flex;
          position: absolute;
          align-items: center;
          right: 0;
          top: 20px;

          * {
            font-size: 0.8rem;
            font-weight: normal;
            color: var(--gray-mid);
          }

          h6 {
            margin-right: 3px;
          }
        }
      }
    }

    .map iframe {
      height: calc(170vw - 48px);
      margin-top: -50px;
    }

    &:not(.notice-area) + .sect {
      margin-top: 0;
    }

    /* nth-child z-index */
    &:nth-child(1) {
      z-index: 10;
    }
    &:nth-child(2) {
      z-index: 9;
    }
    &:nth-child(3) {
      z-index: 8;
    }
    &:nth-child(4) {
      z-index: 7;
    }
    &:nth-child(5) {
      z-index: 6;
    }
    &:nth-child(6) {
      z-index: 5;
    }
    &:nth-child(7) {
      z-index: 4;
    }
    &:nth-child(8) {
      z-index: 3;
    }
    &:nth-child(9) {
      z-index: 2;
    }
  }

  .my {
    .detail {
      .detail-contents {
        .sect:last-child {
          padding-bottom: var(--padding);
        }
      }
    }
  }

  .wrap {
    top: 0;
  }

  .contents {
    .static {
      gap: 0;
      padding-top: 0;
      padding-bottom: 30px;
      .sect {
        margin-bottom: 0;
        &.over {
          padding: 32px;
          margin-top: 0;
        }
        &.full {
          .in {
            padding: var(--padding);
          }
        }
      }
      > .sect:not(:has(.map-area)):last-child {
        padding-bottom: var(--padding);
      }
    }
    .detail {
      width: 100vw;
      padding-bottom: var(--padding);

      .detail-contents {
        width: 100%;
        padding-top: 0;
        margin-top: 0;
        padding-bottom: 0;
      }
      .sub-detail {
        &:has(.ui-sect) {
          .notice-area {
            margin: 0;
            width: 100%;
            margin-bottom: 0;
            background: var(--gray-pale);
            padding: 10px;
            padding-bottom: 0;
            overflow: hidden;
          }
        }

        &:has(.notification.card) {
          .notice-area {
            margin-bottom: 12px;
          }
        }

        &:has(.auth-banner) {
          .notice-area {
            margin-bottom: 10px;
          }
        }

        .log {
          h3 {
            padding: 0 var(--padding);
          }

          &.with-cal {
            .paging {
              font-size: 1em;
            }
          }
        }
      }
    }

    .article {
      margin: 0;
      position: static;
    }

    .header {
      margin: 12px var(--padding) var(--padding) var(--padding);
      width: 80%;
      .sect & {
        margin: 0;
        width: 100%;
      }
      h1 {
        font-size: 1.6em;
        width: initial;
        font-size: 1.5em;
        img {
          height: 20px;
        }
      }
      &.nav {
        margin: 5px 0 20px 20px;

        h1 {
          font-size: 1.55em;

          img {
            height: 20px;
          }
        }
      }
    }

    .head-title {
      margin: 0;
    }
  }

  body:has(.sub-detail > .ui-sect:only-child) {
    .wrap {
      padding-bottom: 0;
    }
  }

  body:has(.ui-sect) {
    .ui-sect {
      --padding: 20px;
      background-color: var(--gray-pale);
      padding: 10px;
      border-radius: 0;
      border: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      .sect.sight {
        .map {
          left: 0;
          width: 1024px;
        }
      }
      .sect {
        background-color: var(--white);
        border-radius: 10px;
        &.date {
          padding: 0;
          overflow: visible;
        }

        &.notice-area,
        .auth-banner {
          margin: 0 10px 10px;
          border-radius: 8px;
          width: calc(100% - 20px);
        }

        &.notice-area {
          li {
            background-color: var(--white);
            border-radius: 10px;
          }
        }

        &:has(.promotion) {
          background-color: transparent;
          padding: 10px;
          border: 0;
        }
      }
    }
  }

  .paying {
    &:has(.ui-sect:only-child) {
      overflow: hidden;
      height: 100dvh;
    }

    .contents:has(.ui-sect:only-child) {
      overflow: hidden;
      height: 100dvh;

      .detail {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        overflow: hidden;
        height: 100%;

        .detail-contents {
          flex-grow: 1;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
          overscroll-behavior: contain;

          .sub-detail {
            width: 100%;
            flex-grow: 1;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
          }
        }
      }
    }
  }
}

.notice-text {
    margin-top: 12px;
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-left: 4px solid #adb5bd;
    font-size: 15px;
    color: #495057;
    line-height: 1.5;
}

/* 변수에 */



/* ---- global/css/layouts/tab-content.css ---- */
/* Tab content styles moved to global/css/components/tabs.css */



/* ---- global/css/layouts/visual.css ---- */
/* =================================================================
<visual.css>
초기 화면 및 메인 비주얼 영역 스타일 (SCSS 중첩 구조)
================================================================= */

/* ========== 2. 비주얼 공통 (.visual) ========== */
.visual {
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  top: 0;
  left: 0;
  /* position: absolute; */
  /* height: 100%; */
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: visible;
  flex-grow: 1;
  overflow: hidden;
  flex: 1;
  position: relative;
  height: auto;
  z-index: 1;

  .ment {
    position: relative;
    z-index: 2;
  }

  .links {
    margin-top: 1em;
    display: flex;
    gap: 1em;
    &.circle {
      .btn {
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        aspect-ratio: 1/1;
        align-items: center;
        justify-content: center;
        font-size: 0.95em;
        width: 120px;
        height: 120px;
        padding: 0;
        .ms-icon {
          font-size: 2.2em;
          font-weight: 300;
        }
        @media (max-width: 812px) {
          width: 90px;
          height: 90px;
          font-size: 1em;
        }
      }
    }
    .btn {
      font-size: 1.1em;
      height: auto;
      padding: 0.85em 2em;
      transition: 0.5s ease-in-out;
      background: var(--color);
      border: 1px solid #fff;
      opacity: 0.8;
      transition: 0.15s;

      &:hover {
        --color: var(--main-light);
        border-color: transparent;
        opacity: 1;
        animation: pulse 0.3s ease-in-out;
      }
      .ms-icon {
        font-size: 1.3em;
        font-weight: 400;
      }
      &.gradient {
        opacity: 1;
        border: 0;
        --color: var(--main-gra);
        --color-size: 100% auto;
        &:hover {
          background-size: 130% auto;
          filter: brightness(1.2);
        }
      }
      &.primary {
        opacity: 1;
        border: 0;
        --color: var(--main-color);
      }
      &.secondary {
        opacity: 1;
        border: 0;
        --color: var(--main-light);
      }
    }
    &.card {
      padding: 0;
      .btn {
        opacity: 1;
        transition: 0.2s ease-in-out;
        z-index: 1;
        position: relative;
        &:hover {
          z-index: 2;
          animation: none;
          transform: scale(1.05);
        }
      }
      .icon {
        height: 200px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          height: auto;
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
  }
  .swiper-slide {
    background: #fff no-repeat center center;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
    overflow: hidden;

    &.no-dimed::before,
    &.only::before {
      display: none;
    }

    .btnset {
      transform-origin: center center;
      margin-top: 30px;
      display: flex;
      gap: 10px;
      justify-content: center;
      a {
        background-color: transparent;
        border: 1px solid #fff;
        height: auto;
        line-height: 1;
        padding: 15px;
        transition: 0.2s;
        &:hover {
          background-color: var(--main-color);
          border-color: transparent;
        }
        i {
          font-size: 1.2em;
        }
      }
    }

    /* ========== 3. 장소 선택 영역 (.all-place) ========== */
    .all-place {
      display: flex;
      width: 100%;
      height: 100%;
      pointer-events: all;

      &::before {
        content: "";
        width: 100%;
        height: 50%;
        position: absolute;
        top: 0;
        z-index: 0;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
      }

      &:has(> div:nth-child(2)) > div {
        width: 50%;
      }

      > div {
        flex-grow: 1;
        background-position: center;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        transition: 0.2s;
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        z-index: 1;
        cursor: pointer;
        position: relative;

        &:hover {
          /* 스타일 비활성화
          width: 50%;
          box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
          z-index: 2;
          */
        }

        &::before {
          content: "";
          width: 100%;
          height: 100%;
          position: absolute;
          background-color: rgba(0, 0, 0, 0);
          transition: 0.2s;
        }

        &.other {
          filter: brightness(0.5);
          &::before {
            background-color: rgba(0, 0, 0, 0.5);
            transition: 0s;
          }
        }

        .place {
          > .infos {
            padding: 60px 30px 40px 30px;
            text-align: left;
            width: 100%;
            filter: brightness(1);
            background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));

            h2 {
              font-size: 2.2em;
              white-space: nowrap;
            }
            h3 {
              font-size: 1.2em;
              color: #fff;
              text-align: center;
              span {
                color: inherit;
              }
            }
            span {
              color: inherit;
            }

            .btns {
              margin-top: 12px;
              display: flex;
              gap: 24px;
              font-size: 1.2em;
              a {
                display: flex;
                gap: 5px;
                align-items: center;
                padding-bottom: 7px;
                position: relative;
                font-weight: bold;
                &.disable {
                  color: #fff;
                  opacity: 0.5;
                  border-color: transparent;
                  pointer-events: none;
                }
              }
            }

            .days {
              display: flex;
              flex-wrap: wrap;
              gap: 1.2em;
              row-gap: 0.3em;
              margin-top: 1.2em;
              justify-content: center;
              p {
                display: flex;
                gap: 0.3em;
                &.not {
                  color: #fff;
                  display: block;
                  text-align: center;
                  strong {
                    color: var(--main-light);
                  }
                }
              }
              strong {
                color: var(--red-color);
              }
            }
          }

          .noti {
            padding: 0 30px;
            position: relative;
          }
        }

        > div .btns a {
          &:hover::after {
            width: 100%;
          }
          &::after {
            content: "";
            position: absolute;
            border-bottom: 2px solid #fff;
            bottom: 0;
            width: 0;
            transition: 0.2s;
          }
        }
      }
    }

    /* ========== 4. 알림 슬라이드 (.notice) ========== */
    &.notice {
      justify-content: space-between;
      text-align: left;
      position: relative;

      &:not(:has(.place)) .noti {
        width: var(--width);
        margin: auto;
        display: flex;
        justify-content: space-between;
        position: relative;
        align-items: center;
      }

      .noti {
        .ment {
          flex-shrink: 0;
          padding-right: 10%;
          p {
            margin-top: 0;
            line-height: 1.6;
            &:first-of-type {
              margin-top: 30px;
            }
            strong {
              color: var(--red-color);
            }
          }
        }
        span {
          color: inherit;
        }
        .right {
          flex-grow: 0;
          width: 50%;
        }
        h1 {
          margin-bottom: 4px;
          color: var(--main-light);
        }
        h2 {
          font-size: 1.4em;
        }
        .cal-huge.ui-widget.ui-widget-content .ui-body table td a::after {
          display: none !important;
        }
      }

      .status {
        background-color: var(--main-color);
        font-size: 0.7em;
        border-radius: 2em;
        padding: 8px 15px;
        display: inline-block;
        vertical-align: middle;
        line-height: 1;
        margin-top: -4px;
        margin-left: 5px;
        color: #fff;
      }

      .able .status {
        animation: able 2s infinite;
        &.closed {
          background-color: var(--red-color);
        }
      }

      .disable {
        color: var(--red-color);
        .status {
          color: #fff !important;
          background-color: var(--red-color);
        }
      }

      .temp {
        color: var(--orange);
        .status {
          color: #fff;
          animation: temp 1.2s infinite;
        }
      }

      .cal-huge-full {
        display: block;
        right: 0;
        top: 0;
        opacity: 1;
        visibility: visible;
        width: 100%;
        position: relative;
        .cal-huge.ui-widget.ui-widget-content {
          width: 100%;
          height: auto;
          top: 0;
          left: 0;
          position: relative;
          border: 0;
          .ui-body {
            width: 100%;
            max-height: initial;
            table {
              th {
                color: var(--gray-light);
              }
              td {
                font-size: 0.85em;
                .ui-state-default {
                  border: none;
                  background: none;
                  font-weight: normal;
                }
              }
              .ui-state-disabled {
                opacity: 1;
                background-color: var(--gray-pale);
                a {
                  color: var(--red-color);
                  font-weight: bold;
                }
                .event {
                  color: var(--red-color);
                  padding-top: 0;
                  margin-top: 0;
                }
              }
            }
          }
          .ui-widget-header {
            height: auto;
            padding: 10px;
            color: #fff;
            border-radius: 0;
          }
        }
      }
    }
  }
}
.visual,
.images {
  .text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-grow: 1;
    background-color: rgba(0, 0, 0, 0.65);
    width: 100%;
    position: relative;
    z-index: 1;
    padding: 2em 2em 4em;
    word-break: keep-all;
    color: var(--white);
    gap: 1em;

    .boke {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      mix-blend-mode: screen;
      background-image: url("/global/images/img/boke.png");
      background-repeat: no-repeat;
      background-size: 150% 100%;

      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
      animation: bokemove 10s linear infinite alternate,
        blink 3s infinite alternate;
    }
    h1 {
      font-size: 4em;
      font-weight: 800;
      position: relative;
      line-height: 1;
    }

    h2 {
      font-size: 2.8em;

      @media (max-width: 768px) {
        font-size: 3.2em;
      }
    }

    h3 {
      font-size: 2em;
      h2 + & {
        margin-top: -0.3em;
      }
    }
    p {
      color: #fff;
      opacity: 0.85;
      font-size: 1.1em;
      line-height: 1.5;
      text-align: center;
      @media (max-width: 768px) {
        font-size: 1em;
      }
    }
  }
}
.video-player {
  animation: fade 2s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: calc(constant(safe-area-inset-top) * -1);
  margin-top: calc(env(safe-area-inset-top) * -1);
  margin-bottom: calc(constant(safe-area-inset-bottom) * -1);
  margin-bottom: calc(env(safe-area-inset-bottom) * -1);
  flex-grow: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none; /* 클릭 비활성화 */
  background: #000; /* 영상 로딩 전 배경 */
  .background-video {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
  }
}

/* ========== 7. 추첨 배너 (.lottery-banner) ========== */
.swiper-slide.lottery-banner {
  position: relative;
  overflow: hidden;
  .bg {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url("/global/images/img/bg2.png") no-repeat center / cover;
    z-index: 0;
    opacity: 0.5;
    filter: brightness(1.1);
  }
  .ment {
    width: var(--width);
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    position: relative;
    z-index: 2;
    padding: 2em 0;
    .text {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 1em;
      color: rgba(0, 0, 0, 1);
      h1 {
        color: var(--main-deep);
      }
      dl {
        dt {
          font-weight: bold;
          font-size: 1.1em;
          opacity: 0.6;
        }
        dd {
          font-weight: bold;
          font-size: 1.6em;
        }
      }
    }
    .ext {
      margin-top: 0.8em;
      font-size: 0.9em;
      opacity: 0.5;
    }
    .img {
      width: 300px;
      transform-origin: center bottom;
      img {
        transform: rotate(-10deg);
      }
    }
  }
}
.swiper-pagination-progres:only-child {
  visibility: hidden;
  display: none;
  margin-top: 12px;
}

.swiper-pagination-progressbar {
  bottom: 0;
  width: 100%;
  height: 6px;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  font-family: "xeicon";
  color: #fff;
  pointer-events: all;
  z-index: 10;
  font-size: 3em;
}

.swiper-button-next:after,
.swiper-container-rtl .swiper-button-prev:after {
  content: "\e940";
}

.swiper-button-prev:after,
.swiper-container-rtl .swiper-button-next:after {
  content: "\e93d";
}
/* ========== 8. 이미지 스와이퍼/페이지네이션 ========== */
.images {
  position: relative;
  margin: 0;
  --img-h: 360px;
  margin-bottom: 20px;
  .video-player {
    position: static;
    height: var(--img-h);
  }
  .page & {
    --img-h: 500px;
  }
  .swiper-slide {
    height: var(--img-h);
    background-size: cover;
    background-position: center;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  .swiper-pagination.swiper-pagination-bullets {
    .swiper-pagination-bullet {
      background: #fff;
      opacity: 1;
    }
    .swiper-pagination-bullet-active {
      background: var(--main-color);
      opacity: 1;
    }
  }

  .swiper-pagination-progressbar {
    background-color: var(--gray-border);
    .swiper-pagination-progressbar-fill {
      background: var(--main-color);
    }
  }

  &:has(li:only-child) .swiper-pagination-progressbar {
    background: none;
    span {
      display: none;
    }
  }

  &.swiper-container-horizontal > .swiper-pagination-progressbar,
  &.swiper-container-vertical
    > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    position: relative;
    height: 1px;
    width: var(--width);
    margin: 20px auto 0;
  }

  .visual.swiper-container-horizontal > .swiper-pagination-progressbar,
  .visual.swiper-container-vertical
    > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    background-color: rgba(255, 255, 255, 0);
    margin: 0;
    margin-top: -5px;
    z-index: 10;
    height: 4px;
    width: 100%;
    .swiper-pagination-progressbar-fill {
      background-color: var(--main-light);
    }
  }

  + .section {
    padding-top: var(--padding);
  }
}

/* ========== 9. 기타 및 전역 스타일 ========== */
body.dimed {
  position: relative;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -ms-touch-action: none;
  .gnb,
  .floating {
    z-index: 1;
  }
  .floating {
    display: none;
  }
}

.ui-datepicker .ui-datepicker-header {
  height: auto;
  padding: 10px;
  color: #fff;
  border-radius: 0;
}

/* ========== 10. 애니메이션 (@keyframes) ========== */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
@keyframes pulse2 {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

@keyframes temp {
  0% {
    background-color: rgb(239, 167, 0, 1);
  }
  50% {
    background-color: rgba(239, 32, 0, 1);
  }
  100% {
    background-color: rgba(239, 167, 0, 1);
  }
}
@keyframes bokemove {
  0% {
    background-size: 100% auto;
    background-position: 0% 60%;
  }
  100% {
    background-size: 150% auto;
    background-position: 100% 50%;
  }
}
@keyframes blink {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1.2);
  }
}
@keyframes wave {
  0%,
  50%,
  60%,
  100% {
    transform: rotate(0deg);
  }
  52% {
    transform: rotate(5deg);
  }
  54% {
    transform: rotate(0deg);
  }
  56% {
    transform: rotate(-5deg);
  }
  58% {
    transform: rotate(0deg);
  }
}

/* ========== 11. 반응형 (@media) ========== */
@media (max-width: 812px) {
  .images {
    overflow: hidden;
    width: 100vw;
    --img-h: 60vw;

    .page & {
      --img-h: 70vw;
    }
    .swiper-slide {
      background-size: cover;
      background-position: center;
      height: 70vw;
      max-height: 500px;
    }

    .swiper-slide.lottery-banner {
      padding: 30px var(--padding);
      height: initial;
    }

    .swiper-pagination {
      margin: 20px auto;
      position: static;
    }
  }

  .visual {
    overflow: hidden;
    overscroll-behavior-y: contain; /* iOS에서 아래로 당겨 새로고침 방지 */
    overscroll-behavior-x: none;

    .swiper-slide {
      height: 100%;
      min-height: 100vw;
      .all-place {
        flex-direction: column;
        > div {
          width: 100% !important;
        }
      }
      &.notice .cal-huge.ui-widget .ui-widget-header {
        font-size: 0.85em;
      }
      &.lottery-banner {
        .ment {
          .text {
            z-index: 2;
            h1 {
              font-size: 1.7em;
              width: 60%;
            }
            dl dd {
              font-size: 1.4em;
            }
          }
          .ext {
            margin: 0;
          }
          .img {
            position: absolute;
            width: 130px;
            right: -10px;
            top: 0;
            z-index: 0;
          }
        }
      }
    }
    &::before,
    &::after {
      content: "";
      width: 100%;
      height: 80px;
      position: absolute;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0)
      );
      z-index: 1;
      left: 0;
      top: 0;
    }
    &::after {
      top: initial;
      bottom: 0;
      background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 1)
      );
    }
    .text {
      text-align: center;
      gap: 0.6em;
      h1 {
        font-size: 4.8em;
        line-height: 1.1;
      }
      h2 {
        font-size: 1.9em;
      }
    }
  }
  .facility .swiper-slide {
    height: 60vw;
  }

  .swiper-container.images:has(li:only-child) .swiper-pagination-progressbar {
    margin-bottom: 0;
  }
  &.swiper-container-horizontal > .swiper-pagination-progressbar,
  &.swiper-container-vertical
    > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
    margin: 12px 20px;
  }
  .images,
  .visual {
    margin-bottom: 0;
    &.swiper-container {
      .swiper-pagination {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: var(--padding);
        margin-right: var(--padding);
      }
    }
  }
  .full {
    .images {
      background-color: var(--gray-pale);
    }
  }
  .images .video-player {
    position: static;
  }

  body:has(.wrap.full) {
    .contents {
      .images {
        background-color: var(--gray-pale);
      }
    }
  }
}



/* ---- global/css/layouts/receipt.css ---- */
.receipt {
  width: fit-content;
  min-width: 400px;
  max-width: 100%;
  &.ordersheet {
    padding: 0;
    .receipt_contents .receipt_body {
      .section li > div span {
        align-self: stretch;
        flex-grow: 1;
        flex-shrink: 1;
        text-align: right;
        &:first-child {
          align-self: stretch;
          flex-grow: 0;
          margin-left: 0;
          text-align: left;
        }
      }
      .sectionsub strong {
        font-size: 14px;
        margin-bottom: 3px;
        display: inline-block;
      }
    }
  }
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.receipt_contents {
  position: relative;

  &:after {
    transform: rotate(180deg);
  }
  .close-this {
    position: absolute;
    right: 24px;
    top: 24px;
  }
  .download {
    position: absolute;
    right: 55px;
    top: 24px;
    font-size: 24px;
    line-height: 1;
  }
  > div {
    background-color: #fff;
  }
}
.receipt_head {
  padding: 24px 30px;
  h1 {
    font-size: 14px;
    text-transform: uppercase;
    margin-top: -5px;
    margin-bottom: 10px;
  }
  h2,
  .popup.full.receipt_head h3 {
    font-size: 24px;
    font-weight: 900;
  }
  h3 {
  }
  p {
    line-height: 1.4;
    &:first-of-type {
      margin-top: 10px;
    }
  }
}
.receipt_body {
  padding: 0 30px;
  h4 {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .bill {
    border-top: 1px solid #000;
    /* border-bottom: 1px solid #000; */
  }
  .total {
    margin-top: 1.5em;
    display: flex;
    justify-content: space-between;
  }
  .section {
    position: relative;
    padding: 1em 0;
    border-bottom: 1px dashed #000;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    &:last-of-type {
      border-bottom: 0;
    }
    li {
      &:last-of-type {
        margin-bottom: 0;
      }
      > div {
        display: flex;
        justify-content: space-between;
        gap: 2em;
        flex-direction: row;
        &:last-child {
          margin-bottom: 0;
        }
        span {
          align-self: stretch;
          flex-grow: 0;
          flex-shrink: 0;
          text-align: right;
          &:first-child {
            align-self: stretch;
            flex-grow: 1;
            margin-left: 0;
            text-align: left;
            font-weight: 600;
          }
          &.item_quan {
            align-self: stretch;
            flex-basis: 10%;
          }
          &:last-child {
          }
        }
        &.option {
          flex-wrap: wrap;
          line-height: 1.4;
          span:first-child {
            padding-left: 5px;
          }
        }
      }
      .option {
        flex-wrap: wrap;
        line-height: 1.4;
      }
    }
    &.total {
      font-weight: bold;
      font-size: 18px;
    }
  }
  .sectionsub {
    font-size: 0.85em;
    line-height: 1.4;
    border-top: 1px solid #000;
    padding: 24px 0;
    &.footer {
      font-size: 10px;
    }
  }
}
@media (max-width: 812px) {
  .receipt {
    min-width: auto;
    width: 100%;
  }
}
@media (min-width: 812px) {
  .receipt {
    .receipt_body {
      .bill {
        display: flex;
        flex-wrap: wrap;
        gap: 2em;
        row-gap: 0;
        .section {
          flex-grow: 1;
        }
        .section:nth-child(3) {
          width: 100%;
        }
      }
    }
  }
}



/* ---- global/css/layouts/org.css ---- */
/* 조직도 */
.org-re {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  --gap: 1%;
  --n: 10;
  --oh: 90px;
  --padd: 20px;
  --ratio-sp: 1;
  --rep: calc(100 / var(--n));

  --border: 2px dotted #ccc;
  /* 공통 반복 폭 */
  .rep {
    width: calc(var(--rep) * 1%);
  }
  .rep-half {
    width: calc(var(--rep) * 0.5%);
  }
  .lv1 {
    --level: var(--type1);
  }
  .lv2 {
    --level: var(--type2);
  }
  .lv3 {
    --level: var(--type3);
  }
  .lv4 {
    --level: var(--type4);
  }
  > ul {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    gap: 0;
    height: var(--oh);
    &:has(> li .circle) {
      height: auto;
      dl {
        width: auto;
        margin: auto;
        border: 0;
        background-color: color-mix(in srgb, var(--level) 20%, transparent);
        .circle {
          aspect-ratio: 1/1;
          width: calc(var(--oh) * 2);
          height: calc(var(--oh) * 2);
          border-radius: 50%;
          img {
            height: 30%;
            margin-bottom: 0.8em;
          }
        }
      }
    }
    &.spacing {
      height: calc(var(--oh) * ratio-sp);
      justify-content: flex-start;
      dl {
        padding: 0;
        margin: 0;
        width: 100%;
        border: 0;
        dt {
          width: 100%;
        }
      }
    }
    > li {
      width: calc(100% / var(--n));
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-shrink: 0;
      flex-grow: 0;
      word-break: break-all;
      background-color: #fff;
      position: relative;
      .h-through {
        width: calc(100% * var(--ratio-h));
        border-top: var(--border);
        position: absolute;
        top: 50%;
      }
      > dl {
        height: 100%;
        border-radius: 12px;
        width: 100%;
        flex-grow: 0;
        background-color: #fff;
        z-index: 20;
        position: relative;
        box-sizing: border-box;
        border: 2px solid var(--level);
        border-radius: 30em;
        > dt {
          height: var(--oh);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          position: relative;
          z-index: 2;
          gap: 0.2em;
          padding: 0 15px;
          text-align: center;
          word-break: keep-all;
          &.circle {
            aspect-ratio: 1/1;
          }
          strong {
            font-size: 1.3em;
            color: var(--level);
          }
          &.bh {
            &::after {
              content: "";
              position: absolute;
              display: block;
              border-top: var(--border);
              width: calc(100% * var(--ratio-h));
              top: calc(50% + 1px);
              z-index: 0;
            }
            &.r::after {
              right: calc(-100% * var(--ratio-h));
            }
            &.l::after {
              left: calc(-100% * var(--ratio-h));
            }
          }
          &.bv {
            &::before {
              content: "";
              position: absolute;
              display: block;
              border-left: var(--border);
              height: calc(var(--oh) * var(--ratio-v));
              left: 50%;
              margin-top: -1px;
              z-index: 0;
            }
            &.t::before {
              top: calc(-100% * var(--ratio-v));
            }
            &.b::before {
              bottom: calc(-100% * var(--ratio-v));
            }
            &.b.t::after {
              content: "";
              position: absolute;
              display: block;
              border-left: var(--border);
              height: calc(100% * var(--ratio-v));
              left: calc(50%);
              z-index: 0;
              bottom: calc(-100% * var(--ratio-v));
            }
          }
        }
      }
    }
    & {
      > li {
        > dl {
          height: 100%;
          margin: 0 var(--padd);
          width: calc(100% - var(--padd) * 2);
          .rep & {
            margin: 0;
            width: 100%;
          }
        }
      }
    }
  }
  @media (max-width: 812px) {
    --padd: 5px;
    --n: 3;
    --oh: 80px;
    & > ul {
      & > li {
        & > dl {
          border-radius: 12px;
          &:has(.circle) {
            border-radius: 50%;
          }
          & > dt {
            strong {
              font-size: 1.1em;
              color: var(--level);
            }
          }
        }
      }
    }
  }
}



/* pages */

/* ---- global/css/pages/rental.css ---- */
/* [from list.css] Rental page list styles */
@media (max-width: 812px) {
  .rental .list .info .head + .list li {
    align-items: flex-end;
  }
  .rental .list.horizon li .info dl.price {
    line-height: 1.6;
  }
  .rental .list.horizon li .info dl.price dd {
    width: 60%;
    flex-grow: 1;
    font-weight: normal;
  }
  .rental .list.horizon li .info dl.price dt {
    font-weight: normal;
  }
  .rental .list.horizon li .info dl.price dd + dt {
    margin-left: 0;
  }
}



/* ---- global/css/pages/route.css ---- */
.route {
  margin-top: var(--padding);
}
.route-map {
  display: flex;
  flex-direction: column;
  --photo-w: 120px;
  --cycle-gap: 70px;
  --angle: 24px;
  ul {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: flex-end;
    align-content: space-between;
    flex-grow: 1;
    flex-wrap: wrap;

    & + ul {
      align-items: flex-start;
    }

    &::after {
      content: '';
      border-top: 4px dotted var(--gray-lighter);
      width: 100%;
      display: block;
      position: absolute;
      bottom: 10px;
      z-index: -1;
    }

    &:first-of-type {
      li {
        .infos {
          display: flex;
          flex-direction: column-reverse;
          margin: auto;
        }
      }
    }

    li {
      position: relative;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 10px;
      justify-content: space-between;
      align-items: flex-start;
      align-content: baseline;
      width: 20%;
      &:has(.time) {
        padding-bottom: 30px;
        margin-bottom: -30px;
        .time {
          position: absolute;
          bottom: 0;
          font-size: 1.1em;
          left: 0;
        }
      }
      p {
        width: 100%;
        flex-grow: 1;
        line-height: 1.2;
      }

      &.transfer {
        p {
          color: var(--main-color);
        }

        .dot {
          i {
            color: var(--main-color);
          }

          > div {
            border-color: var(--main-color);

            &::after {
              content: '환승';
              display: block;
              position: absolute;
              font-weight: bold;
              bottom: -25px;
              text-align: center;
              color: var(--main-color);
            }
          }
        }
      }

      .dot {
        position: relative;
        margin: auto;
        width: 100%;

        > div {
          width: var(--angle);
          height: var(--angle);
          margin: auto;
          line-height: 1;
          background-color: #fff;
          border-radius: 50%;
          border: 2px solid var(--gray-dark);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          z-index: 3;
        }

        i {
          z-index: 2;
          font-size: 0.8em;
          display: inline-block;
          line-height: 1;
          font-weight: bold;
        }

        .point {
          width: 16px;
          height: 16px;
          margin: auto;
          background-color: #fff;
          border-radius: 50%;
          border: 4px solid var(--gray-dark);
          position: relative;
          z-index: 2;
        }
      }

      .infos {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: auto;
      }

      .photo {
        background: no-repeat center/cover;
        width: var(--photo-w);
        height: var(--photo-w);
        margin: auto;
        border-radius: 50%;
        flex-shrink: 0;
        flex-grow: 0;
        transition: background-size 1s;
      }

      &:first-child .dot::before,
      &:last-child .dot::after {
        content: '';
        height: 100%;
        width: 50%;
        position: absolute;
        background-color: #fff;
        display: block;
        z-index: 0;
        top: 0;
      }

      &:first-child .dot::before {
        left: 0;
      }

      &:last-child .dot::after {
        right: 0;
      }
      &.collabo {
        .infos {
          background-color: var(--main-color);
          border-radius: 50em;
          padding: 10px 10px 40px 10px;
          color: #fff;
          font-weight: bold;
        }
      }
    }

    & + ul {
      li {
        &:first-child .dot::before {
          left: auto;
          right: 0;
        }

        &:last-child .dot::after {
          right: auto;
          left: 0;
        }

        .dot {
          i {
            transform: rotate(180deg);
          }
        }

        &.transfer {
          .dot > div::after {
            top: -20px;
            bottom: initial;
          }
        }
      }
    }
  }

  &.terminal {
    display: flex;
    align-items: center;
    flex-direction: row;

    .start,
    .rotate {
      flex-grow: 0;
      display: flex;
      flex-direction: row;
      position: relative;
    }

    .start li,
    .rotate li {
      width: auto;
    }

    .start li {
      flex-direction: row;
    }

    .rotate li {
      flex-direction: row-reverse;
    }

    .start li .infos p,
    .rotate li .infos p {
      display: flex;
      justify-content: center;
    }

    .start:after,
    .rotate:after {
      content: '';
      border: 4px dotted var(--gray-lighter);
      border-right-width: 0;
      width: 80px;
      border-radius: 50px 0 0 50px;
      height: 94px;
      display: block;
      z-index: 1;
      left: 90%;
      top: 50%;
      transform: translateY(-50%);
      position: absolute;
    }

    .rotate:after {
      border-right-width: 4px;
      border-left-width: 0;
      border-radius: 0 50px 50px 0;
      right: 90%;
      left: initial;
    }

    ul.start li .dot > div::after {
      bottom: initial;
      right: -26px;
    }

    ul.start li .infos {
      flex-direction: column;
    }

    .body {
      flex-grow: 1;
    }

    ul + ul li p {
      flex-grow: 1;
    }

    ul li p {
      white-space: nowrap;
    }
  }

  &.cycle {
    ul + ul {
      flex-direction: row-reverse;
      margin-top: var(--cycle-gap);

      li {
        flex-direction: column-reverse;

        p {
          flex-grow: 1;
        }
      }

      &::after {
        top: 10px;
        bottom: initial;
      }

      li:first-child::before,
      li:last-child::before {
        content: '';
        border: 4px dotted var(--gray-lighter);
        border-left: 0;
        width: calc((var(--cycle-gap) + var(--angle)) / 2);
        height: calc(var(--cycle-gap) + var(--angle));
        display: block;
        border-radius: 0 100em 100em 0;
        position: absolute;
        left: 50%;
        top: calc(-1 * (var(--cycle-gap) + var(--angle) / 2) - 2px);
        z-index: 1;
      }
      li:last-child::before {
        border-radius: 100em 0 0 100em;
        border-left: 4px dotted var(--gray-lighter);
        border-right: 0;
        left: calc(50% - (var(--cycle-gap) + var(--angle)) / 2);
      }
    }
    &.once {
      li:last-child::before {
        display: none;
      }
    }

    &.circular {
      ul + ul li:last-child::before {
        content: '';
        border: 4px dotted var(--gray-lighter);
        border-right: 0;
        width: 30px;
        border-radius: 50px 0 0 50px;
        height: var(--photo-w);
        display: block;
        position: absolute;
        left: 25%;
        top: -72px;
        z-index: 1;
      }
    }

    &.terminal {
      ul + ul li:first-child::before {
        display: none;
      }

      &.circular {
        ul + ul li:last-child::before {
          display: none;
        }
      }
    }
  }
}

.time-table {
  margin-top: 30px;
  border: 1px solid var(--gray-border);
  border-radius: 6px;
  overflow: hidden;
  overscroll-behavior: none;

  table {
    border: 0;
    width: 100%;

    caption {
      font-size: 0;
    }
    tr.highlight {
      position: relative;
      border-color: var(--main-color);
      th {
        color: var(--main-color);
      }
      td.this {
        background-color: var(--main-color);
        color: #fff;
        font-weight: bold;
      }
      th::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        content: '';
        top: 0;
        left: 0;
        border: 3px solid var(--main-color);
        box-sizing: border-box;
      }
    }
    td,
    th {
      padding: 15px;
      font-size: 0.9em;
      line-height: 1.3;
      vertical-align: middle;
      text-align: center;
      border-bottom: 0;
      border-top: 1px solid var(--gray-border);
      p {
        font-weight: normal;
        &.loc {
          font-size: 0.95em;
          margin-top: 3px;
          display: flex;
          align-items: center;
          gap: 3px;
          &::before {
            content: 'location_on';
            font-family: 'Material Symbols Sharp';
          }
        }
      }
    }

    thead th {
      border: 0;
    }

    th.row {
      background-color: var(--gray-pale);
      text-align: left;
      border-right: 1px solid var(--gray-border);
    }

    td {
      color: var(--gray-mid);
      font-size: 1em;
    }

    th span.loc {
      display: block;
      font-weight: normal;
      font-size: 0.9em;
      color: var(--gray-mid);
      margin-top: 3px;
    }
  }
}
@media (max-width: 812px) {
  .route-map-wrap {
    display: flex;
    justify-content: center;
  }
  .route-map {
    --photo-w: 90px;
    --cycle-gap: 50px;
    flex-direction: row;
    gap: 50px;
    ul {
      flex-direction: column;
      gap: 30px;

      &:first-of-type {
        li {
          .infos {
            flex-direction: column;
          }
        }
      }
      &:has(.time) {
        gap: 40px;
      }
      li {
        width: 100%;
        flex-direction: row;
        &:has(.time) {
          margin-bottom: 0;
          padding-bottom: 0;

          .time {
            position: static;
            margin-bottom: -10px;
            margin-top: -10px;
            font-size: 1em;
          }
        }

        .infos {
          gap: 10px;
          width: 120px;
        }

        .dot {
          margin: 0;
          padding-top: calc(var(--photo-w) / 2 - var(--angle) / 2);
          width: auto;
          height: 100%;

          > div {
            margin: 0;
          }

          i {
            transform: rotate(90deg);
          }
        }

        &.transfer {
          .dot > div::after {
            background-color: #fff;
            padding: 3px;
          }
        }

        &:first-child .dot::before,
        &:last-child .dot::after {
          width: 100%;
          height: calc(100% - ((var(--photo-w) / 2)));
        }
        &:first-child .dot::before {
          height: calc(var(--photo-w) / 2);
        }
        &:last-child .dot::after {
          top: calc(var(--photo-w) / 2 + (var(--angle) / 2));
        }
      }

      &::after {
        width: auto;
        height: 100%;
        border-top: 0;
        border-right: 4px dotted var(--gray-lighter);
        bottom: 0;
        right: 10px;
      }

      & + ul {
        &::after {
          right: initial;
          left: 10px;
        }

        li {
          .dot i {
            transform: rotate(-90deg);
          }

          &.transfer {
            .dot > div::after {
              top: initial;
              bottom: -20px;
            }
          }

          &:first-child .dot::before {
            top: calc(var(--photo-w) / 2);
            height: calc(100% - (var(--photo-w) / 2));
          }
          &:last-child .dot::after {
            top: 0;
            height: calc(100% / 2);
          }
        }
      }
    }

    &.cycle {
      justify-content: center;
      --photo-w: 90px;
      ul + ul {
        flex-direction: column-reverse;
        padding-top: 0;
        margin-top: 0;

        li {
          flex-direction: row-reverse;
        }

        &::after {
          top: 0;
        }

        li:first-child::before {
          border-radius: 0 0 200px 200px;
          border: 4px dotted var(--gray-lighter);
          border-top: 0;
          width: calc(var(--cycle-gap) + var(--angle));
          height: calc(var(--cycle-gap));
          top: calc(var(--photo-w) / 2);
          left: calc((-50% + var(--angle) / 2));
        }
        li:last-child::before {
          top: 0;
          left: calc((-50% + var(--angle) / 2));
          border-radius: 200px 200px 0 0;
          border: 4px dotted var(--gray-lighter);
          border-bottom: 0;
          width: calc(var(--cycle-gap) + var(--angle));
          height: calc(var(--cycle-gap));
        }
      }

      &.circular {
        ul + ul li:last-child::before {
          border-radius: 200px 200px 0 0;
          border: 4px dotted var(--gray-lighter);
          border-bottom: 0;
          width: calc(var(--cycle-gap) + var(--angle));
          height: calc(var(--cycle-gap) / 2);
          top: 0;
          left: calc((-50% + var(--angle) / 2));
        }
      }
    }

    &.terminal {
      flex-direction: column;
      gap: 0;

      .rotate {
        margin-top: -26px;

        li {
          flex-direction: column-reverse;
          align-items: center;
          margin-top: 10px;

          .dot > div i {
            transform: rotate(-135deg);
          }
        }
      }

      .body {
        display: flex;
        gap: 40px;
      }

      .start {
        li {
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-bottom: 10px;

          .dot > div {
            i {
              transform: rotate(-135deg);
            }

            &::after {
              bottom: -20px;
              right: 0;
            }
          }
        }
      }

      .start,
      .rotate {
        li {
          .dot {
            padding-top: 0;
          }
        }

        &::after {
          right: 0;
          bottom: 0;
          width: 70px;
          height: 70px;
          border-radius: 50px 50px 0 0;
          border-top-width: 4px;
          border-left-width: 4px;
          border-right-width: 4px;
          border-bottom-width: 0;
          transform: translateX(-50%);
          top: initial;
          bottom: -50px;
          left: 50%;
        }
      }

      .rotate::after {
        border-bottom-width: 4px;
        border-radius: 0 0 50px 50px;
        border-top-width: 0;
        bottom: initial;
        top: -52px;
      }

      ul:first-child li:last-child .dot::after,
      ul:last-child li:first-child .dot::before {
        height: 100%;
      }

      ul li:first-child .dot::before,
      ul li:last-child .dot::after {
        height: calc(100% - 72px);
      }

      ul li:last-child .dot::after {
        height: calc(100% - 72px);
      }

      ul.start li .infos p,
      ul.rotate li .infos p {
        position: static;
        width: 100%;
      }

      ul:first-of-type li .infos {
        flex-direction: column;
      }
    }
  }
  .time-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    thead {
      display: none;
    }

    tbody {
      display: block;
      width: 100%;

      tr {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        padding: 16px;
        border-bottom: 1px dotted var(--gray-border);
        &.highlight {
          border: 2px solid var(--main-color);
          th::before {
            display: none;
          }
          td.this {
            background-color: transparent;
            color: var(--main-color);
            border-bottom: 2px solid var(--main-color);
          }
        }
        th.row {
          width: 100%;
          display: block;
          background: none;
          border: 0;
          padding: 0;
          margin-bottom: 0;
          font-size: 1.1em;
          line-height: 1.4;
          margin-bottom: 10px;

          span {
            color: inherit;
            margin-bottom: 10px;
          }
          p.loc {
            font-size: 0.85em;
            align-items: flex-start;
          }
        }

        &:last-of-type {
          border-bottom: 0;
        }

        th.row::after,
        td::after {
          display: none;
        }

        td {
          border: 0;
          padding: 0;
          font-size: 1.2em;
          font-weight: 300;
          width: calc(100% / 5);
          text-align: left;
          letter-spacing: 0;
        }
      }
    }
  }
}


/* Responsive at the end */