@charset "UTF-8";

@layer picjeju.tokens, picjeju.base, picjeju.layout, picjeju.components, picjeju.utilities, picjeju.bridge;

@layer picjeju.tokens {
  :root {
    color-scheme: only light;

    --pj-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
    --pj-font-guide: Inter, Mulish, var(--pj-font-sans);

    --pj-color-primary: #ff6633;
    --pj-color-primary-dark: #dd572b;
    --pj-color-primary-light: #ffb299;
    --pj-color-primary-tint: rgba(255, 102, 51, 0.18);

    --pj-color-secondary: #00cc66;
    --pj-color-secondary-dark: #01bf60;
    --pj-color-secondary-light: #99ebc2;
    --pj-color-secondary-vivid: #00ff80;

    --pj-color-dark-1: #222222;
    --pj-color-dark-2: #8c8c8c;
    --pj-color-dark-3: #bdbdbd;
    --pj-color-dark-4: #e3e3e3;
    --pj-color-light-1: #ffffff;
    --pj-color-light-2: #f9f9f9;
    --pj-color-guide-bg: #fafafc;
    --pj-color-guide-line: #f2f2f5;
    --pj-color-guide-text: #3a3a3c;
    --pj-color-gray-100: #12131a;
    --pj-color-gray-60: #696c80;

    --pj-color-error: #ff3b3b;
    --pj-color-warning: #ffcc00;
    --pj-color-info: #0063f7;
    --pj-color-success: #06c270;

    --pj-color-category-performance: #7538b5;
    --pj-color-category-festival: #df3b67;
    --pj-color-category-exhibition: #0089d2;
    --pj-color-category-market: #0a9500;
    --pj-color-category-experience: #f99100;
    --pj-color-category-youth: #0644b8;
    --pj-color-category-news: #3c4356;

    --pj-text-h1: clamp(42px, calc(42px + 0.1464vw), 46px);
    --pj-text-h2: clamp(30px, calc(30px + 0.1464vw), 34px);
    --pj-text-h3: clamp(26px, calc(26px + 0.1464vw), 30px);
    --pj-text-h4: clamp(22px, calc(22px + 0.1464vw), 26px);
    --pj-text-lead: clamp(19px, calc(19px + 0.0732vw), 21px);
    --pj-text-body-lg: clamp(17px, calc(17px + 0.0732vw), 19px);
    --pj-text-body-md: clamp(15px, calc(15px + 0.0732vw), 17px);
    --pj-text-body-sm: clamp(13px, calc(13px + 0.0732vw), 15px);
    --pj-text-caption: clamp(12px, calc(11.5px + 0.0366vw), 13px);
    --pj-text-13: clamp(12px, calc(12px + 0.0732vw), 14px);
    --pj-text-22: clamp(21px, calc(21px + 0.0732vw), 23px);
    --pj-text-icon-lg: clamp(30px, calc(30px + 0.1464vw), 34px);
    --pj-text-icon-xl: clamp(36px, calc(36px + 0.1464vw), 40px);
    --pj-text-icon-xxl: clamp(46px, calc(46px + 0.1464vw), 50px);
    --pj-line-heading: 1.3;
    --pj-line-body: 1.3;

    --pj-space-0: 0;
    --pj-space-1: 0.25rem;
    --pj-space-2: 0.5rem;
    --pj-space-3: 1rem;
    --pj-space-4: 1.5rem;
    --pj-space-5: 2rem;
    --pj-space-6: 3rem;
    --pj-space-7: 4rem;
    --pj-space-8: 4.5rem;

    --pj-container-max: 1280px;
    --pj-container-lg: 1140px;
    --pj-gutter: 2rem;

    --pj-radius-xs: 4px;
    --pj-radius-sm: 8px;
    --pj-radius-md: 10px;
    --pj-radius-lg: 15px;
    --pj-radius-xl: 30px;
    --pj-radius-pill: 999px;
    --pj-radius-image: var(--pj-radius-lg);
    --pj-radius-textarea: var(--pj-radius-lg);

    --pj-shadow-sm: 0 6px 18px rgba(18, 19, 26, 0.08);
    --pj-shadow-md: 4px 8px 24px rgba(242, 242, 245, 0.95);
    --pj-focus-ring: 0 0 0 4px rgba(255, 102, 51, 0.22);
  

    --pj-icon-sm: 16px;
    --pj-icon-md: 24px;
    --pj-icon-lg: 32px;
    --pj-icon-xl: 40px;
    --pj-icon-safe-padding: 2px;

    /* Existing project token aliases. Keep these until legacy classes are fully migrated. */
    --dark1: var(--pj-color-dark-1);
    --dark2: var(--pj-color-dark-2);
    --dark3: var(--pj-color-dark-3);
    --dark4: var(--pj-color-dark-4);
    --light1: var(--pj-color-light-1);
    --light2: var(--pj-color-light-2);

    --cate-pu: var(--pj-color-category-performance);
    --cate-pi: var(--pj-color-category-festival);
    --cate-bl: var(--pj-color-category-exhibition);
    --cate-gr: var(--pj-color-category-market);
    --cate-ye: var(--pj-color-category-experience);
    --cate-in: var(--pj-color-category-youth);
    --cate-dk: var(--pj-color-category-news);

    --heading1: var(--pj-text-h1);
    --heading2: var(--pj-text-h2);
    --heading3: var(--pj-text-h3);
    --heading4: var(--pj-text-h4);
    --lead: var(--pj-text-lead);
    --body-lg: var(--pj-text-body-lg);
    --body-md: var(--pj-text-body-md);
    --body-mo: var(--pj-text-body-sm);
    --body-sm: var(--pj-text-caption);

    --gap72: var(--pj-space-8);
    --gap64: var(--pj-space-7);
    --gap56: 3.5rem;
    --gap48: var(--pj-space-6);
    --gap40: 2.5rem;
    --gap32: var(--pj-space-5);
    --gap24: var(--pj-space-4);
    --gap16: var(--pj-space-3);
    --gap8: var(--pj-space-2);
    --gap4: var(--pj-space-1);
    --gap2: 2px;

    /* DesignSystem compatibility aliases. These are intentionally not DesignSystem. */
    --pj-legacy-primary: var(--pj-color-primary);
    --pj-legacy-primary-dakger: var(--pj-color-primary-dark);
    --pj-legacy-primary-dark: var(--pj-color-primary-dark);
    --pj-legacy-primary-light: var(--pj-color-primary-light);
    --pj-legacy-primary-lighter: var(--pj-color-primary-tint);
    --pj-legacy-primary-rgb: 255, 102, 51;
    --pj-legacy-secondary: var(--pj-color-secondary);
    --pj-legacy-secondary-dakger: var(--pj-color-secondary-dark);
    --pj-legacy-secondary-dark: var(--pj-color-secondary-dark);
    --pj-legacy-secondary-light: var(--pj-color-secondary-vivid);
    --pj-legacy-secondary-rgb: 0, 204, 102;
    --pj-legacy-white: var(--pj-color-light-1);
    --pj-legacy-white-rgb: 255, 255, 255;
    --pj-legacy-dark: var(--pj-color-dark-1);
    --pj-legacy-dark-rgb: 34, 34, 34;
    --pj-legacy-orange: var(--pj-color-primary);
    --pj-legacy-gray-50: var(--pj-color-guide-line);
    --pj-legacy-body-font-family: var(--pj-font-sans);
    --pj-legacy-body-font-size: var(--body-md);
    --pj-legacy-body-font-weight: 400;
    --pj-legacy-body-line-height: var(--pj-line-body);
    --pj-legacy-body-color: var(--pj-color-dark-1);
    --pj-legacy-body-bg: var(--pj-color-light-1);
    --pj-legacy-border-width: 1px;
    --pj-legacy-border-style: solid;
    --pj-legacy-border-color: var(--pj-color-dark-3);
    --pj-legacy-border-radius: var(--pj-radius-xl);
    --pj-legacy-border-radius-mo: var(--pj-radius-md);
    --pj-legacy-border-radius-sm: var(--pj-radius-lg);
    --pj-legacy-border-radius-lg: 1rem;
    --pj-legacy-border-radius-pill: var(--pj-radius-pill);
    --pj-legacy-link-color: var(--pj-color-primary);
    --pj-legacy-link-hover-color: var(--pj-color-primary-dark);
    --pj-legacy-focus-ring-color: rgba(255, 102, 51, 0.22);
    --pj-legacy-form-invalid-color: var(--pj-color-error);
    --pj-legacy-form-invalid-border-color: var(--pj-color-error);
  }
}

@layer picjeju.components {
  .store-empty {
    box-sizing: border-box;
    width: 100%;
    margin: 32px 0;
    padding: 24px 0;
    border: 0;
    background: transparent;
    color: var(--dark2);
    text-align: center;
    font-size: var(--body-md);
    line-height: 1.6;
  }

  .store-empty::before {
    content: "";
    display: none;
  }

  .store-empty p {
    margin: 0;
  }

  .pj-toast-region {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 12000;
    display: grid;
    gap: 8px;
    pointer-events: none;
  }

  .pj-toast {
    min-width: 240px;
    max-width: min(360px, calc(100vw - 32px));
    padding: 14px 16px;
    border: 1px solid var(--dark4);
    border-radius: var(--pj-legacy-border-radius-mo);
    color: var(--dark1);
    background: var(--light1);
    box-shadow: var(--pj-shadow-sm);
    font-size: var(--body-mo);
    line-height: 1.35;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: auto;
  }

  .pj-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .action-bell,
  [data-pj-action="notifications"] {
    position: relative;
  }

  .notification-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px; 
    border-radius: 999px;
    background: var(--pj-color-secondary);
    color: var(--light1); 
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
  }

  .notification-badge[hidden] {
    display: none !important;
  }

  .notification-badge--menu {
    top: 2px;
    right: 16px;
    border-color: var(--light1);
  }

  .pj-notification-panel {
    position: fixed;
    top: 82px;
    right: max(24px, calc((100vw - var(--pj-container-max)) / 2 + 8px));
    z-index: 11000;
    width: min(392px, calc(100vw - 32px));
    max-height: calc(100vh - 106px);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(34, 34, 34, 0.08);
    border-radius: 18px;
    background: var(--light1);
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.18);
    color: var(--dark1);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .pj-notification-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    visibility: visible;
  }

  .pj-notification-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding: 20px 20px 14px;
    border-bottom: 1px solid #f4ebe5;
    background: linear-gradient(180deg, #fff7f2 0%, #ffffff 100%);
  }

  .pj-notification-kicker {
    margin: 0 0 4px;
    color: var(--pj-color-primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
  }

  .pj-notification-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.22;
  }

  .pj-notification-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(34, 34, 34, 0.06);
    color: var(--dark1);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }

  .pj-notification-close:hover {
    background: rgba(34, 34, 34, 0.1);
  }

  .pj-notification-summary {
    display: grid;
    gap: 4px;
    padding: 16px 20px 12px;
  }

  .pj-notification-summary strong {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
  }

  .pj-notification-summary span {
    color: var(--dark2);
    font-size: 13px;
    line-height: 1.45;
  }

  .pj-notification-actions {
    display: flex;
    gap: 8px;
    padding: 0 20px 14px;
  }

  .pj-notification-actions .pj-button {
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
  }

  .pj-notification-list {
    display: block;
    max-height: 340px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
  }

  .pj-notification-item {
    margin: 0;
    border-top: 1px solid #f1f1f1;
  }

  .pj-notification-link {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 20px;
    color: inherit;
    text-decoration: none;
    transition: background-color .15s ease;
  }

  .pj-notification-link:hover {
    background: #f7fff9;
  }

  .pj-notification-link.is-read {
    color: #7a7a7a;
  }

  .pj-notification-dot {
    width: 8px;
    height: 8px;
    margin-top: 8px;
    border-radius: 50%;
    background: var(--pj-color-secondary);
  }

  .pj-notification-link.is-read .pj-notification-dot {
    background: var(--dark4);
  }

  .pj-notification-copy {
    display: grid;
    min-width: 0;
    gap: 6px;
  }

  .pj-notification-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .pj-notification-category {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: #effff6;
    color: #009653;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
  }

  .pj-notification-link--shop .pj-notification-category {
    background: #fff2eb;
    color: var(--pj-color-primary-dark);
  }

  .pj-notification-link--community .pj-notification-category {
    background: #f0f5ff;
    color: #315fc5;
  }

  .pj-notification-link--letter .pj-notification-category {
    background: #f8f2ff;
    color: #7c3ab5;
  }

  .pj-notification-time {
    flex: 0 0 auto;
    color: var(--dark2);
    font-size: 12px;
    font-weight: 600;
  }

  .pj-notification-link strong {
    overflow-wrap: anywhere;
    color: var(--dark1);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.36;
  }

  .pj-notification-body {
    color: var(--dark2);
    font-size: 13px;
    line-height: 1.45;
  }

  .pj-notification-link.is-read strong,
  .pj-notification-link.is-read .pj-notification-body {
    color: #7a7a7a;
  }

  .notification-page {
    min-height: calc(100vh - 320px);
    padding: 56px 0 72px;
    background: #f8f8f8;
  }

  .notification-page-container {
    max-width: 960px;
  }

  .notification-page-loading {
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dark2);
    font-size: 16px;
  }

  .notification-page-state {
    display: grid;
    justify-items: center;
    gap: 10px;
    min-height: 280px;
    padding: 52px 28px;
    color: var(--dark2);
    text-align: center;
  }

  .pj-notification-panel .notification-page-state {
    min-height: 180px;
    padding: 28px 20px 30px;
  }

  .notification-page-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #effff6;
    color: var(--pj-color-secondary);
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
  }

  .notification-page-state--anonymous .notification-page-state-icon,
  .notification-page-state--loading .notification-page-state-icon {
    background: #fff7f2;
    color: var(--pj-color-primary);
  }

  .notification-page-state--error .notification-page-state-icon {
    background: #fff1f0;
    color: #d9363e;
  }

  .notification-page-state strong {
    color: var(--dark1);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.35;
  }

  .pj-notification-panel .notification-page-state strong {
    font-size: 16px;
  }

  .notification-page-state p {
    max-width: 440px;
    margin: 0;
    color: var(--dark2);
    font-size: 15px;
    line-height: 1.55;
  }

  .pj-notification-panel .notification-page-state p {
    font-size: 13px;
  }

  .notification-page-state-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
  }

  .notification-page-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 36px 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
  }

  .notification-page-alert--error {
    border: 1px solid #ffd1d1;
    background: #fff7f7;
    color: #b42318;
  }

  .notification-page-alert--success {
    border: 1px solid #c9f3dc;
    background: #f3fff8;
    color: #007a43;
  }

  .notification-page-card {
    overflow: hidden;
    border: 1px solid rgba(34, 34, 34, 0.08);
    border-radius: 22px;
    background: var(--light1);
    box-shadow: 0 18px 42px rgba(17, 24, 39, 0.1);
  }

  .notification-page-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 34px 36px 30px;
    border-bottom: 1px solid #f4ebe5;
    background: linear-gradient(135deg, #fff7f2 0%, #ffffff 54%, #f0fff6 100%);
  }

  .notification-page-kicker {
    margin: 0 0 8px;
    color: var(--pj-color-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }

  .notification-page-title {
    margin: 0;
    color: var(--dark1);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.08;
  }

  .notification-page-copy {
    max-width: 520px;
    margin: 14px 0 0;
    color: var(--dark2);
    font-size: 16px;
    line-height: 1.55;
  }

  .notification-page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 36px;
    border-bottom: 1px solid #f1f1f1;
  }

  .notification-page-toolbar div {
    display: grid;
    gap: 4px;
  }

  .notification-page-toolbar strong {
    color: var(--dark1);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
  }

  .notification-page-toolbar span {
    color: var(--dark2);
    font-size: 14px;
    line-height: 1.45;
  }

  .notification-page-toolbar .pj-button {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    font-weight: 700;
  }

  .notification-page-list {
    max-height: none;
  }

  .notification-page-card .pj-notification-item:first-child {
    border-top: 0;
  }

  .notification-page-card .pj-notification-link {
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 16px;
    padding: 22px 36px;
  }

  .notification-page-card .pj-notification-link strong {
    font-size: 18px;
  }

  .notification-page-card .pj-notification-body {
    font-size: 15px;
  }

  @media only screen and (max-width: 767px) {
    .pj-toast-region {
      right: 16px;
      bottom: 16px;
      left: 16px;
    }

    .pj-toast {
      width: 100%;
      max-width: none;
    }

    .notification-badge {
      top: -3px;
      right: -3px;
    }

    .notification-badge--menu {
      top: 2px;
      right: 14px;
    }

    .pj-notification-panel {
      top: 72px;
      right: 16px;
      left: 16px;
      width: auto;
      max-height: calc(100vh - 96px);
      border-radius: 18px;
    }

    .pj-notification-head {
      padding: 18px 18px 12px;
    }

    .pj-notification-title {
      font-size: 20px;
    }

    .pj-notification-summary,
    .pj-notification-actions {
      padding-right: 18px;
      padding-left: 18px;
    }

    .pj-notification-list {
      max-height: calc(100vh - 304px);
    }

    .pj-notification-link {
      padding: 14px 18px;
    }

    .notification-page-state {
      min-height: 240px;
      padding: 40px 20px;
    }

    .notification-page-state-actions,
    .notification-page-alert {
      align-items: stretch;
      flex-direction: column;
      width: auto;
    }

    .notification-page-state-actions .pj-button {
      width: 100%;
    }

    .notification-page {
      padding: 24px 0 48px;
      background: var(--light1);
    }

    .notification-page-container {
      padding-right: 16px;
      padding-left: 16px;
    }

    .notification-page-card {
      border-radius: 18px;
      box-shadow: none;
      overflow: visible;
    }

    .notification-page-hero {
      display: grid;
      align-items: flex-start;
      gap: 16px;
      padding: 24px 20px 22px;
    }

    .notification-page-title {
      font-size: 32px;
    }

    .notification-page-copy {
      max-width: none;
      margin-top: 10px;
      font-size: 14px;
    }

    .notification-page-toolbar {
      align-items: flex-start;
      flex-direction: column;
      padding: 18px 20px;
    }

    .notification-page-toolbar .pj-button {
      width: 100%;
    }

    .notification-page-alert {
      margin: 14px 20px 0;
    }

    .notification-page-list {
      max-height: none;
      overflow: visible;
    }

    .notification-page-card .pj-notification-link {
      padding: 18px 20px;
    }

    .notification-page-card .pj-notification-link strong {
      font-size: 16px;
    }

    .notification-page-card .pj-notification-body {
      font-size: 14px;
    }
  }
}

@layer picjeju.bridge {
  hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 1px solid var(--dark4);
  }

  .h1,
  .h2,
  .h3,
  .h4,
  .h5,
  .h6,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.25;
    color: var(--pj-legacy-heading-color);
  }

  .h1,
  h1 {
    font-size: var(--heading3);
  }

  .h2,
  h2 {
    font-size: var(--lead);
  }

  .h3,
  h3 {
    font-size: var(--body-lg);
  }

  .h4,
  h4 {
    font-size: var(--body-md);
  }

  .h5,
  h5 {
    font-size: var(--body-mo);
  }

  .h6,
  h6 {
    font-size: var(--pj-text-13);
  }

  p {
    margin: 0;
  }

  ol,
  ul {
    padding: 0;
  }

  ul,
  li {
    list-style: none;
  }

  dl,
  ol,
  ul {
    margin: 0;
  }

  ol ol,
  ol ul,
  ul ol,
  ul ul {
    margin: 0;
  }

  address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
  }

  dt {
    font-weight: 500;
  }

  dd {
    margin-bottom: .5rem;
    margin-left: 0;
  }

  blockquote {
    margin: 0 0 1rem;
  }

  b,
  strong {
    font-weight: bolder;
  }

  .small,
  small {
    font-size: var(--body-md);
    color: var(--dark2);
    font-weight: 400;
  }

  a {
    color: var(--dark1);
    text-decoration: none;
  }

  a:not([href]):not([class]),
  a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none;
  }

  img,
  svg {
    vertical-align: middle;
  }

  table {
    caption-side: bottom;
    border-collapse: collapse;
  }

  caption {
    padding-top: .5rem;
    padding-bottom: .5rem;
    color: var(--pj-legacy-secondary-color);
    text-align: left;
  }

  th {
    text-align: inherit;
    text-align: -webkit-match-parent;
  }

  tbody,
  td,
  tfoot,
  th,
  thead,
  tr {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
  }

  label {
    display: inline-block;
    font-size: var(--body-md);
    font-weight: 500;
  }

  .pj-label {
    margin-bottom: 1rem;
  }

  button:focus:not(:focus-visible) {
    outline: 0;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  button,
  select {
    text-transform: none;
  }

  [role="button"] {
    cursor: pointer;
  }

  select {
    word-wrap: normal;
  }

  select:disabled {
    opacity: 1;
  }

  [type="button"],
  [type="reset"],
  [type="submit"],
  button {
    -webkit-appearance: button;
  }

  [type="button"]:not(:disabled),
  [type="reset"]:not(:disabled),
  [type="submit"]:not(:disabled),
  button:not(:disabled) {
    cursor: pointer;
  }

  ::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }

  textarea {
    resize: vertical;
  }

  fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
  }

  legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    line-height: inherit;
    font-size: var(--heading4);
  }

  legend + * {
    clear: left;
  }

  output {
    display: inline-block;
  }

  iframe {
    border: 0;
  }

  summary {
    display: list-item;
    cursor: pointer;
  }

  progress {
    vertical-align: baseline;
  }

  [hidden] {
    display: none !important;
  }
}

@layer picjeju.base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    background: var(--pj-legacy-body-bg);
    color-scheme: only light;
  }

  body {
    margin: 0;
    font-family: var(--pj-font-sans);
    font-size: var(--pj-legacy-body-font-size);
    font-weight: var(--pj-legacy-body-font-weight);
    line-height: var(--pj-legacy-body-line-height);
    color: var(--pj-legacy-body-color);
    background: var(--pj-legacy-body-bg);
    color-scheme: only light;
  }

  body.pj-page-loading {
    overflow: hidden;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font: inherit;
  }

  button {
    border: 0;
  }

  a {
    color: inherit;
  }

  :focus-visible {
    outline: 0;
    box-shadow: var(--pj-focus-ring);
  }

  [hidden] {
    display: none !important;
  }
}

@layer picjeju.layout {
  .pj-container,
  .pj-container-fluid,
  .pj-container-sm,
  .pj-container-md,
  .pj-container-lg,
  .pj-container-xl,
  .pj-container-xxl {
    --pj-legacy-gutter-x: var(--pj-gutter);
    --pj-legacy-gutter-y: 0;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    padding-right: calc(var(--pj-legacy-gutter-x) * 0.5);
    padding-left: calc(var(--pj-legacy-gutter-x) * 0.5);
  }

  @media (min-width: 768px) {
    .pj-container,
    .pj-container-sm,
    .pj-container-md {
      max-width: 100%;
      padding-right: 1rem;
      padding-left: 1rem;
    }
  }

  @media (min-width: 992px) {
    .pj-container,
    .pj-container-sm,
    .pj-container-md,
    .pj-container-lg {
      max-width: 100%;
      padding-right: 0;
      padding-left: 0;
    }
  }

  @media (min-width: 1200px) {
    .pj-container,
    .pj-container-sm,
    .pj-container-md,
    .pj-container-lg,
    .pj-container-xl {
      max-width: var(--pj-container-lg);
    }
  }

  @media (min-width: 1400px) {
    .pj-container,
    .pj-container-sm,
    .pj-container-md,
    .pj-container-lg,
    .pj-container-xl,
    .pj-container-xxl {
      max-width: var(--pj-container-max);
    }
  }

  .pj-stack {
    display: flex;
    flex-direction: column;
    gap: var(--pj-stack-gap, var(--pj-space-4));
  }

  .pj-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pj-cluster-gap, var(--pj-space-3));
  }

  .pj-row {
    --pj-legacy-gutter-x: 1.5rem;
    --pj-legacy-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--pj-legacy-gutter-y));
    margin-right: calc(-0.5 * var(--pj-legacy-gutter-x));
    margin-left: calc(-0.5 * var(--pj-legacy-gutter-x));
  }

  .pj-row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--pj-legacy-gutter-x) * 0.5);
    padding-left: calc(var(--pj-legacy-gutter-x) * 0.5);
    margin-top: var(--pj-legacy-gutter-y);
  }

  .pj-row-cols-1 > * { flex: 0 0 auto; width: 100%; }
  .pj-row-cols-2 > * { flex: 0 0 auto; width: 50%; }
  .pj-row-cols-3 > * { flex: 0 0 auto; width: 33.333333%; }
  .pj-row-cols-4 > * { flex: 0 0 auto; width: 25%; }

  .pj-col {
    flex: 1 0 0;
  }

  .pj-col-auto {
    flex: 0 0 auto;
    width: auto;
  }

  .pj-col-1 { flex: 0 0 auto; width: 8.333333%; }
  .pj-col-2 { flex: 0 0 auto; width: 16.666667%; }
  .pj-col-3 { flex: 0 0 auto; width: 25%; }
  .pj-col-4 { flex: 0 0 auto; width: 33.333333%; }
  .pj-col-5 { flex: 0 0 auto; width: 41.666667%; }
  .pj-col-6 { flex: 0 0 auto; width: 50%; }
  .pj-col-7 { flex: 0 0 auto; width: 58.333333%; }
  .pj-col-8 { flex: 0 0 auto; width: 66.666667%; }
  .pj-col-9 { flex: 0 0 auto; width: 75%; }
  .pj-col-10 { flex: 0 0 auto; width: 83.333333%; }
  .pj-col-11 { flex: 0 0 auto; width: 91.666667%; }
  .pj-col-12 { flex: 0 0 auto; width: 100%; }

  @media (min-width: 768px) {
    .pj-row-cols-md-1 > * { flex: 0 0 auto; width: 100%; }
    .pj-row-cols-md-2 > * { flex: 0 0 auto; width: 50%; }
    .pj-row-cols-md-3 > * { flex: 0 0 auto; width: 33.333333%; }
    .pj-row-cols-md-4 > * { flex: 0 0 auto; width: 25%; }
    .pj-col-md-4 { flex: 0 0 auto; width: 33.333333%; }
    .pj-col-md-6 { flex: 0 0 auto; width: 50%; }
    .pj-col-md-8 { flex: 0 0 auto; width: 66.666667%; }
    .pj-col-md-12 { flex: 0 0 auto; width: 100%; }
  }

  @media (min-width: 992px) {
    .pj-col-lg-3 { flex: 0 0 auto; width: 25%; }
    .pj-col-lg-6 { flex: 0 0 auto; width: 50%; }
    .pj-col-lg-9 { flex: 0 0 auto; width: 75%; }
    .pj-col-lg-12 { flex: 0 0 auto; width: 100%; }
  }

  @media (min-width: 1200px) {
    .pj-col-xl-6 { flex: 0 0 auto; width: 50%; }
  }
}

@layer picjeju.components {
  .pj-page-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 102, 51, 0.08), transparent 34%),
      rgba(255, 255, 255, 0.96);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.36s ease, visibility 0.36s ease;
  }

  .pj-page-loaded .pj-page-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .pj-page-loader__mark {
    position: relative;
    display: grid;
    place-items: center;
    width: 128px;
    height: 128px;
  }

  .pj-page-loader__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 4px solid rgba(255, 102, 51, 0.14);
    border-top-color: var(--pj-color-primary);
    border-right-color: var(--pj-color-secondary);
    animation: pj-page-loader-spin 0.9s linear infinite;
  }

  .pj-page-loader__ring::after {
    position: absolute;
    top: 10px;
    right: 14px;
    width: 10px;
    height: 10px;
    content: "";
    border-radius: 50%;
    background: var(--pj-color-primary);
    box-shadow: 0 0 0 6px rgba(255, 102, 51, 0.12);
  }

  .pj-page-loader__logo {
    position: relative;
    z-index: 1;
    width: 86px;
    height: auto;
    filter: drop-shadow(0 12px 20px rgba(255, 102, 51, 0.16));
    animation: pj-page-loader-pulse 1.25s ease-in-out infinite;
  }

  @keyframes pj-page-loader-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes pj-page-loader-pulse {
    0%,
    100% {
      transform: scale(1);
      opacity: 1;
    }

    50% {
      transform: scale(0.96);
      opacity: 0.86;
    }
  }

  @media (max-width: 767.98px) {
    .pj-page-loader__mark {
      width: 104px;
      height: 104px;
    }

    .pj-page-loader__logo {
      width: 72px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pj-page-loader,
    .pj-page-loader__ring,
    .pj-page-loader__logo {
      animation: none;
      transition: none;
    }
  }

  .pj-button {
    --pj-btn-color: var(--pj-color-dark-1);
    --pj-btn-bg: transparent;
    --pj-btn-border: transparent;
    --pj-btn-hover-color: var(--pj-btn-color);
    --pj-btn-hover-bg: transparent;
    --pj-btn-hover-border: var(--pj-btn-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pj-space-2);
    min-height: var(--pj-control-height-md);
    padding: 0.5rem 1rem;
    font-size: var(--pj-text-body-lg);
    font-weight: 400;
    line-height: 1.3;
    color: var(--pj-btn-color);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--pj-btn-border);
    background: var(--pj-btn-bg);
    transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .pj-button:hover {
    color: var(--pj-btn-hover-color);
    background: var(--pj-btn-hover-bg);
    border-color: var(--pj-btn-hover-border);
  }

  .pj-button:disabled,
  .pj-button.disabled {
    pointer-events: none;
    opacity: 0.65;
  }

  .pj-button--primary {
    --pj-btn-color: var(--pj-color-light-1);
    --pj-btn-bg: var(--pj-color-primary);
    --pj-btn-border: var(--pj-color-primary);
    --pj-btn-hover-color: var(--pj-color-primary);
    --pj-btn-hover-bg: var(--pj-color-light-1);
    --pj-btn-hover-border: var(--pj-color-primary);
    border-radius: var(--pj-radius-xl);
  }

  .pj-button--primary.pressed,
  .pj-button--primary.is-pressed,
  .pj-button--primary[aria-pressed="true"],
  .pj-button--primary:active {
    --pj-btn-color: var(--pj-color-light-1);
    --pj-btn-bg: var(--pj-color-primary-dark);
    --pj-btn-border: var(--pj-color-primary-dark);
    --pj-btn-hover-color: var(--pj-color-light-1);
    --pj-btn-hover-bg: var(--pj-color-primary-dark);
    --pj-btn-hover-border: var(--pj-color-primary-dark);
    color: var(--pj-btn-color);
    background: var(--pj-btn-bg);
    border-color: var(--pj-btn-border);
  }

  .pj-button--secondary {
    --pj-btn-color: var(--pj-color-light-1);
    --pj-btn-bg: var(--pj-color-secondary);
    --pj-btn-border: var(--pj-color-secondary);
    --pj-btn-hover-color: var(--pj-color-light-1);
    --pj-btn-hover-bg: var(--pj-color-secondary-dark);
    --pj-btn-hover-border: var(--pj-color-secondary-dark);
  }

  .pj-button--success {
    --pj-btn-color: var(--pj-color-success);
    --pj-btn-bg: #e8f8ef;
    --pj-btn-border: #b8e4ca;
    --pj-btn-hover-color: var(--pj-color-success);
    --pj-btn-hover-bg: #d7f1e2;
    --pj-btn-hover-border: #9ed9b8;
  }

  .pj-button--info {
    --pj-btn-color: var(--pj-color-info);
    --pj-btn-bg: #eaf2ff;
    --pj-btn-border: #b9d4ff;
    --pj-btn-hover-color: var(--pj-color-info);
    --pj-btn-hover-bg: #dbeaff;
    --pj-btn-hover-border: #9dc2ff;
  }

  .pj-button--warning {
    --pj-btn-color: #b56b00;
    --pj-btn-bg: #fff6d6;
    --pj-btn-border: #ffe39a;
    --pj-btn-hover-color: #9a5a00;
    --pj-btn-hover-bg: #fff0bd;
    --pj-btn-hover-border: #ffd972;
  }

  .pj-button--dark {
    --pj-btn-color: var(--pj-color-light-1);
    --pj-btn-bg: var(--pj-color-dark-1);
    --pj-btn-border: var(--pj-color-dark-1);
    --pj-btn-hover-color: var(--pj-color-light-1);
    --pj-btn-hover-bg: #000000;
    --pj-btn-hover-border: #000000;
  }

  .pj-button--gray,
  .pj-button--light {
    --pj-btn-color: var(--pj-color-dark-1);
    --pj-btn-bg: var(--dark3);
    --pj-btn-border: var(--dark3);
    --pj-btn-hover-color: var(--pj-color-dark-1);
    --pj-btn-hover-bg: var(--pj-color-dark-4);
    --pj-btn-hover-border: var(--pj-color-dark-4);
    border-radius: var(--pj-radius-xl);
  }

  .pj-button--white {
    --pj-btn-color: var(--pj-color-dark-2);
    --pj-btn-bg: var(--pj-color-light-1);
    --pj-btn-border: var(--pj-color-light-1);
    --pj-btn-hover-color: var(--pj-color-dark-1);
    --pj-btn-hover-bg: var(--pj-color-light-1);
    --pj-btn-hover-border: var(--pj-color-light-1);
  }

  .pj-button--outline-primary {
    --pj-btn-color: var(--pj-color-primary);
    --pj-btn-bg: var(--pj-color-light-1);
    --pj-btn-border: var(--pj-color-primary);
    --pj-btn-hover-color: var(--pj-color-light-1);
    --pj-btn-hover-bg: var(--pj-color-primary);
    --pj-btn-hover-border: var(--pj-color-primary);
  }

  .pj-button--outline-secondary {
    --pj-btn-color: var(--pj-color-dark-1);
    --pj-btn-bg: var(--pj-color-light-1);
    --pj-btn-border: var(--pj-color-dark-3);
    --pj-btn-hover-color: var(--pj-color-primary);
    --pj-btn-hover-bg: var(--pj-color-light-1);
    --pj-btn-hover-border: var(--pj-color-primary);
  }

  .pj-button--outline-light {
    --pj-btn-color: var(--pj-color-dark-1);
    --pj-btn-bg: transparent;
    --pj-btn-border: var(--pj-color-dark-4);
    --pj-btn-hover-color: var(--pj-color-dark-1);
    --pj-btn-hover-bg: var(--pj-color-light-2);
    --pj-btn-hover-border: var(--pj-color-dark-3);
  }

  .pj-button--danger {
    --pj-btn-color: var(--pj-color-light-1);
    --pj-btn-bg: var(--pj-color-error);
    --pj-btn-border: var(--pj-color-error);
    --pj-btn-hover-color: var(--pj-color-light-1);
    --pj-btn-hover-bg: #dc2626;
    --pj-btn-hover-border: #dc2626;
    border-radius: var(--pj-radius-xl);
  }

  .pj-button--link {
    --pj-btn-color: inherit;
    --pj-btn-bg: transparent;
    --pj-btn-border: transparent;
    --pj-btn-hover-color: var(--pj-color-primary);
    --pj-btn-hover-bg: transparent;
    --pj-btn-hover-border: transparent;
    min-height: auto;
    padding: 0;
    border-radius: 0;
    text-decoration: none;
  }

  .pj-button--text,
  .pj-button--text-under {
    min-height: auto;
    gap: var(--pj-space-2);
    padding: 0;
    font-size: var(--pj-text-body-sm);
    line-height: 1.3;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .pj-button--sm { 
    padding: 0.25rem 1rem;
    font-size: var(--pj-text-body-sm);
    line-height: 1.3;
  }

  .pj-button--md { 
    padding: 0.5rem 1rem;
    font-size: var(--pj-text-body-lg);
    line-height: 1.3;
  }

  .pj-button--lg { 
    padding: 1rem 1.5rem;
    font-size: var(--pj-text-body-md);
    line-height: 1.3;
  }

  .pj-button--xlg { 
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: var(--pj-text-body-md);
    font-weight: 700;
  }

  .pj-button--pill,
  .pj-u-rounded-pill {
    border-radius: var(--pj-radius-pill);
  }

  .pj-button-close {
    width: 2rem;
    height: 2rem;
    padding: 0;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.391 5.724c.521-.521 1.365-.521 1.886 0 .52.521.52 1.365 0 1.886L17.886 16l8.391 8.391c.52.521.52 1.365 0 1.886-.521.52-1.365.52-1.886 0L16 17.886l-8.391 8.391c-.521.52-1.365.52-1.886 0-.521-.521-.521-1.365 0-1.886L14.114 16 5.723 7.61c-.521-.521-.521-1.365 0-1.886.521-.521 1.365-.521 1.886 0L16 14.114l8.391-8.39Z' fill='%23222222'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.5rem;
    border: 0;
    border-radius: var(--pj-radius-pill);
  }

  .pj-field {
    display: block;
    width: 100%;
    min-height: var(--pj-field-height);
    padding: 0.875rem 1rem;
    font-size: var(--pj-text-body-md);
    font-weight: 400;
    line-height: 1.3;
    color: var(--pj-color-dark-1);
    background: var(--pj-color-light-1);
    border: 1px solid var(--pj-color-dark-3);
    border-radius: var(--pj-radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }

  .pj-field::placeholder {
    color: var(--pj-color-dark-2);
  }

  .pj-field:focus {
    border-color: var(--pj-color-primary);
    outline: 0;
    box-shadow: var(--pj-focus-ring);
  }

  textarea.pj-field {
    min-height: 143px;
    padding: 1.5rem;
    font-size: var(--pj-text-body-lg);
    border-radius: var(--pj-radius-textarea);
    resize: vertical;
  }

  .pj-textfield {
    display: block;
    width: 100%;
    min-height: 32px;
    padding: 0 2rem 0.5rem 0;
    font-size: var(--pj-text-body-lg);
    line-height: 1.3;
    color: var(--pj-color-dark-1);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--pj-color-dark-3);
    border-radius: 0;
  }

  .pj-textfield:focus {
    border-bottom-color: var(--pj-color-primary);
    outline: 0;
    box-shadow: none;
  }

  .pj-label {
    display: inline-block;
    margin-bottom: var(--pj-space-2);
  }

  .pj-select {
    display: block;
    width: 100%;
    min-height: var(--pj-field-height);
    padding: 1rem 2.75rem 1rem 1rem;
    font-size: var(--pj-text-body-md);
    font-weight: 400;
    line-height: 1.3;
    color: var(--pj-color-dark-1);
    background-color: var(--pj-color-light-1);
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.25rem;
    border: 1px solid var(--pj-color-dark-3);
    border-radius: var(--pj-radius-md);
    appearance: none;
  }

  .pj-select:focus {
    border-color: var(--pj-color-primary);
    outline: 0;
    box-shadow: var(--pj-focus-ring);
  }

  .pj-input-group {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 100%;
  }

  .pj-input-group > .pj-field,
  .pj-input-group > .pj-select {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
  }

  .pj-input-group > .pj-button {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .pj-input-group > :not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .pj-input-group > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .pj-invalid-feedback {
    display: none;
    width: 100%;
    margin-top: var(--pj-space-2);
    color: var(--pj-color-error);
    font-size: var(--pj-text-body-sm);
  }

  .pj-form-text {
    margin-top: var(--pj-space-2);
    color: var(--pj-color-dark-2);
    font-size: var(--pj-text-body-sm);
  }

  .is-invalid ~ .pj-invalid-feedback,
  .was-validated :invalid ~ .pj-invalid-feedback {
    display: block;
  }

  .pj-check {
    display: flex;
    align-items: center;
    gap: var(--pj-space-2);
    min-height: 1.5rem;
  }

  .pj-check-inline {
    display: inline-flex;
    margin-right: var(--pj-space-3);
  }

  .pj-check-input {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    appearance: none;
    background: var(--pj-color-light-1);
    border: 1px solid var(--pj-color-dark-3);
    border-radius: var(--pj-radius-xs);
    cursor: pointer;
  }

  .pj-check-input[type="radio"] {
    border-radius: 50%;
  }

  .pj-check-input:checked {
    border-color: var(--pj-color-primary);
    background-color: var(--pj-color-primary);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.9rem;
  }

  .pj-check-input[type="radio"]:checked {
    background-image: radial-gradient(circle, var(--pj-color-light-1) 0 35%, transparent 38%);
  }

  .pj-check-label {
    cursor: pointer;
  }

  .pj-card {
    background: var(--pj-color-light-1);
    border: 1px solid var(--pj-color-guide-line);
    border-radius: var(--pj-radius-md);
  }

  .pj-card-header,
  .pj-card-body,
  .pj-card-footer {
    padding: var(--pj-space-4);
  }

  .pj-card-header {
    border-bottom: 1px solid var(--pj-color-guide-line);
  }

  .pj-card-footer {
    border-top: 1px solid var(--pj-color-guide-line);
  }

  .pj-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    padding: 0.25rem 0.5rem;
    font-size: var(--pj-text-caption);
    font-weight: 700;
    line-height: 1;
    color: var(--pj-color-light-1);
    white-space: nowrap;
    border-radius: var(--pj-radius-xs);
    background: var(--pj-color-dark-1);
  }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pj-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--pj-color-dark-2);
    font-size: var(--pj-text-body-sm);
  }

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

  .breadcrumb a:hover {
    color: var(--pj-color-primary);
  }

  .pj-table {
    width: 100%;
    margin-bottom: var(--pj-space-3);
    color: var(--pj-color-dark-1);
    vertical-align: top;
    border-collapse: collapse;
  }

  .pj-table th,
  .pj-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--pj-color-guide-line);
  }

  .alert {
    position: relative;
    padding: var(--pj-space-3) var(--pj-space-4);
    color: var(--pj-color-dark-1);
    border: 1px solid var(--pj-color-guide-line);
    border-radius: var(--pj-radius-md);
    background: var(--pj-color-light-2);
  }

  .pj-modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
  }

  .pj-modal.show {
    display: block;
  }

  .pj-modal.fade {
    opacity: 0;
    transition: opacity 0.15s linear;
  }

  .pj-modal.fade.show {
    opacity: 1;
  }

  .pj-modal-dialog {
    position: relative;
    width: auto;
    margin: 1rem;
    pointer-events: none;
  }

  .pj-modal-dialog--centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 2rem);
  }

  .pj-modal-dialog--scrollable {
    height: calc(100% - 2rem);
  }

  .pj-modal-dialog--scrollable .pj-modal-content {
    max-height: 100%;
    overflow: hidden;
  }

  .pj-modal-dialog--scrollable .pj-modal-body {
    overflow-y: auto;
  }

  @media (min-width: 576px) {
    .pj-modal-dialog {
      max-width: 500px;
      margin: 1.75rem auto;
    }

    .pj-modal--sm {
      max-width: 300px;
    }

    .pj-modal--lg {
      max-width: 800px;
    }

    .pj-modal--xl {
      max-width: 960px;
    }
  }

  @media (min-width: 1200px) {
    .pj-modal--xl {
      max-width: 1140px;
    }
  }

  .pj-modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    color: var(--pj-color-dark-1);
    pointer-events: auto;
    background: var(--pj-color-light-1);
    border: 0;
    border-radius: var(--pj-radius-xl);
    box-shadow: var(--pj-shadow-sm);
  }

  .pj-modal-header,
  .pj-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pj-space-3);
    padding: var(--pj-space-4);
  }

  .pj-modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--pj-space-4);
  }

  .pj-modal-title {
    margin: 0;
  }

  .pj-modal-backdrop,
  .pj-offcanvas-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.15s linear;
  }

  .pj-modal-backdrop.show,
  .pj-offcanvas-backdrop.show {
    opacity: 1;
  }

  .pj-offcanvas-backdrop {
    z-index: 1040;
    background: rgba(0, 0, 0, 0.9);
  }

  body.pj-modal-open,
  body.pj-offcanvas-open {
    overflow: hidden;
  }

  .pj-offcanvas {
    position: fixed;
    z-index: 1045;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--pj-color-dark-1);
    visibility: hidden;
    background: var(--pj-color-light-1);
    outline: 0;
    transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
  }

  .pj-offcanvas.show {
    visibility: visible;
    transform: none;
  }

  .pj-offcanvas--start {
    top: 0;
    bottom: 0;
    left: 0;
    width: 400px;
    transform: translateX(-100%);
  }

  .pj-offcanvas--end {
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    transform: translateX(100%);
  }

  .pj-offcanvas--top {
    top: 0;
    right: 0;
    left: 0;
    min-height: 30vh;
    transform: translateY(-100%);
  }

  .pj-offcanvas--bottom {
    right: 0;
    bottom: 0;
    left: 0;
    min-height: 30vh;
    transform: translateY(100%);
  }

  .pj-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pj-space-4);
  }

  .pj-offcanvas-title {
    margin: 0;
  }

  .pj-offcanvas-body {
    flex-grow: 1;
    padding: var(--pj-space-4);
    overflow-y: auto;
  }

  .pj-offcanvas-footer {
    padding: var(--pj-space-4);
    border-top: 1px solid var(--pj-color-guide-line);
  }

  .pj-dropdown {
    position: relative;
  }

  .pj-dropdown-toggle::after {
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    margin-left: 0.55em;
    vertical-align: 0.16em;
    content: "";
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-0.18em);
  }

  .pj-dropdown-menu {
    position: absolute;
    z-index: 1000;
    display: none;
    min-width: 10rem;
    padding: var(--pj-space-2);
    margin: 0.25rem 0 0;
    color: var(--pj-color-dark-1);
    list-style: none;
    background: var(--pj-color-light-1);
    border: 1px solid var(--pj-color-guide-line);
    border-radius: var(--pj-radius-md);
    box-shadow: var(--pj-shadow-sm);
  }

  .pj-dropdown-menu.show {
    display: block;
  }

  .pj-dropdown-item {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    clear: both;
    color: inherit;
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    border: 0;
    border-radius: var(--pj-radius-sm);
  }

  .pj-dropdown-item:hover,
  .pj-dropdown-item:focus,
  .pj-dropdown-item.active {
    color: var(--pj-color-primary);
    background: var(--pj-color-light-2);
  }

  .pj-nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
    list-style: none;
  }

  .pj-nav-item {
    display: block;
  }

  .pj-nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    color: var(--pj-color-dark-2);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 100%;
    transition: .3s;
  }

  .pj-nav-link.active,
  .pj-nav-link:hover {
    color: var(--pj-color-primary);
  }

  .pj-nav-tabs {
    border-bottom: 1px solid var(--pj-color-guide-line);
  }
  .pj-nav-tabs .pj-nav-item {
    flex:1;
  }
  .pj-nav-tabs .pj-nav-link {
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
  }

  .pj-nav-tabs .pj-nav-link.active, .pj-nav-tabs .pj-nav-link:hover {
    border-color: var(--pj-color-primary);
  }

  .pj-tab-content > .pj-tab-pane {
    display: none;
  }

  .pj-tab-content > .active {
    display: block;
  }

  .pj-fade:not(.show) {
    opacity: 0;
  }

  .pj-collapse:not(.show) {
    display: none;
  }

  .collapsing {
    height: 0;
    overflow: hidden;
    transition: height 0.2s ease;
  }

  .pj-accordion {
    --pj-accordion-border: var(--pj-color-guide-line);
    width: 100%;
  }

  .pj-accordion-item {
    color: var(--pj-color-dark-1);
    background: var(--pj-color-light-1);
    border-bottom: 1px solid var(--pj-accordion-border);
  }

  .pj-accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: var(--pj-space-4) 0;
    color: var(--pj-color-dark-1);
    text-align: left;
    background: transparent;
    cursor: pointer;
  }

  .pj-accordion-button::after {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%23222222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.25rem;
    transition: transform 0.2s ease;
  }

  .pj-accordion-button:not(.pj-collapsed)::after,
  .pj-accordion-button[aria-expanded="true"]::after {
    transform: rotate(180deg);
  }

  .pj-accordion-body {
    padding: 0 0 var(--pj-space-4);
  }

  @media (max-width: 767.98px) {
    :root {
      --pj-radius-image: var(--pj-radius-md);
      --pj-radius-textarea: var(--pj-radius-md);
    }

    .pj-button {
      font-size: var(--pj-text-body-md);
    }

    .pj-button--sm { 
      padding: 0.5rem 1rem;
      font-size: var(--pj-text-body-sm);
    }

    .pj-button--md { 
      padding: 1rem 1.5rem;
      font-size: var(--pj-text-body-md);
    }

    .pj-button--text,
    .pj-button--text-under {
      font-size: var(--pj-text-caption);
    }

    textarea.pj-field { 
      padding: 1rem;
      font-size: var(--pj-text-body-sm);
    }

    .pj-textfield {
      font-size: var(--pj-text-body-md);
    }

    .pj-select {
      min-height: 50px;
      font-size: var(--pj-text-body-sm);
    }
  }
}

@layer picjeju.utilities {
  .pj-u-w-100 { width: 100% !important; }
  .pj-u-h-100 { height: 100% !important; }
  .pj-u-mx-auto { margin-right: auto !important; margin-left: auto !important; }
  .pj-u-ms-auto { margin-left: auto !important; }
  .pj-u-me-auto { margin-right: auto !important; }

  .pj-u-d-none { display: none !important; }
  .pj-u-d-block { display: block !important; }
  .pj-u-d-inline-block { display: inline-block !important; }
  .pj-u-d-flex { display: flex !important; }
  .pj-u-d-inline-flex { display: inline-flex !important; }

  .pj-u-flex-column { flex-direction: column !important; }
  .pj-u-flex-wrap { flex-wrap: wrap !important; }
  .pj-u-align-items-center { align-items: center !important; }
  .pj-u-align-items-start { align-items: flex-start !important; }
  .pj-u-align-items-end { align-items: flex-end !important; }
  .pj-u-justify-content-start { justify-content: flex-start !important; }
  .pj-u-justify-content-center { justify-content: center !important; }
  .pj-u-justify-content-end { justify-content: flex-end !important; }
  .pj-u-justify-content-between { justify-content: space-between !important; }

  .pj-u-text-start { text-align: left !important; }
  .pj-u-text-center { text-align: center !important; }
  .pj-u-text-end { text-align: right !important; }
  .pj-u-text-primary { color: var(--pj-color-primary) !important; }
  .pj-u-text-danger { color: var(--pj-color-error) !important; }
  .pj-u-text-dark { color: var(--pj-color-dark-1) !important; }
  .pj-u-text-muted,
  .pj-u-text-body-secondary,
  .pj-u-text-muted-soft { color: var(--pj-color-dark-2) !important; }

  .pj-u-fw-normal { font-weight: 400 !important; }
  .pj-u-fw-bold { font-weight: 700 !important; }
  .pj-u-fw-semibold { font-weight: 600 !important; }
  .small { font-size: var(--pj-text-body-sm) !important; }
  .pj-u-fs-1 { font-size: var(--pj-text-h1) !important; }
  .pj-u-fs-5 { font-size: var(--pj-text-lead) !important; }

  .pj-u-rounded { border-radius: var(--pj-radius-md) !important; }
  .pj-u-rounded-circle { border-radius: 50% !important; }
  .pj-u-border { border: 1px solid var(--pj-color-dark-4) !important; }
  .pj-u-bg-light { background: var(--pj-color-light-2) !important; }
  .pj-u-bg-transparent { background: transparent !important; }
  .pj-u-position-relative { position: relative !important; }

  .pj-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .pj-u-m-0 { margin: 0 !important; }
  .pj-u-m-6 { margin: var(--pj-space-6) !important; }
  .pj-u-m-7 { margin: var(--pj-space-7) !important; }
  .pj-u-m-8 { margin: var(--pj-space-8) !important; }

  .pj-u-mt-0 { margin-top: 0 !important; }
  .pj-u-mt-6 { margin-top: var(--pj-space-6) !important; }

  .pj-u-mb-0 { margin-bottom: 0 !important; }

  .pj-u-p-0 { padding: 0 !important; }
  .pj-u-pb-0 { padding-bottom: 0 !important; }
  .pj-u-pb-8 { padding-bottom: var(--pj-space-8) !important; }

  .pj-u-gap-6 { gap: var(--pj-space-6) !important; }

  .pj-u-g-0 { --pj-legacy-gutter-x: 0; --pj-legacy-gutter-y: 0; }
  .pj-u-g-6 { --pj-legacy-gutter-x: var(--pj-space-6); --pj-legacy-gutter-y: var(--pj-space-6); }

  .pj-u-m-1 { margin: .25rem !important; }
  .pj-u-m-2 { margin: .5rem !important; }
  .pj-u-m-3 { margin: 1rem !important; }
  .pj-u-m-4 { margin: 1.5rem !important; }
  .pj-u-m-5 { margin: 3rem !important; }
  .pj-u-mx-1 { margin-right: .25rem !important; margin-left: .25rem !important; }
  .pj-u-mx-2 { margin-right: .5rem !important; margin-left: .5rem !important; }
  .pj-u-mx-3 { margin-right: 1rem !important; margin-left: 1rem !important; }
  .pj-u-mx-4 { margin-right: 1.5rem !important; margin-left: 1.5rem !important; }
  .pj-u-mx-5 { margin-right: 3rem !important; margin-left: 3rem !important; }
  .pj-u-my-1 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
  .pj-u-my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
  .pj-u-my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
  .pj-u-my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
  .pj-u-my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }
  .pj-u-mt-1 { margin-top: .25rem !important; }
  .pj-u-mt-2 { margin-top: .5rem !important; }
  .pj-u-mt-3 { margin-top: 1rem !important; }
  .pj-u-mt-4 { margin-top: 1.5rem !important; }
  .pj-u-mt-5 { margin-top: 2.5rem !important; }
  .pj-u-me-1 { margin-right: .25rem !important; }
  .pj-u-me-2 { margin-right: .5rem !important; }
  .pj-u-me-3 { margin-right: 1rem !important; }
  .pj-u-me-4 { margin-right: 1.5rem !important; }
  .pj-u-me-5 { margin-right: 3rem !important; }
  .pj-u-mb-1 { margin-bottom: .25rem !important; }
  .pj-u-mb-2 { margin-bottom: .5rem !important; }
  .pj-u-mb-3 { margin-bottom: 1rem !important; }
  .pj-u-mb-4 { margin-bottom: 1.5rem !important; }
  .pj-u-mb-5 { margin-bottom: 3rem !important; }
  .pj-u-mb-6 { margin-bottom: 3.5rem !important; }
  .pj-u-ms-1 { margin-left: .25rem !important; }
  .pj-u-ms-2 { margin-left: .5rem !important; }
  .pj-u-ms-3 { margin-left: 1rem !important; }
  .pj-u-ms-4 { margin-left: 1.5rem !important; }
  .pj-u-ms-5 { margin-left: 3rem !important; }
  .pj-u-p-1 { padding: .25rem !important; }
  .pj-u-p-2 { padding: .5rem !important; }
  .pj-u-p-3 { padding: 1.25rem !important; }
  .pj-u-p-4 { padding: 1.5rem !important; }
  .pj-u-p-5 { padding: 3rem !important; }
  .pj-u-px-1 { padding-right: .25rem !important; padding-left: .25rem !important; }
  .pj-u-px-2 { padding-right: .5rem !important; padding-left: .5rem !important; }
  .pj-u-px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
  .pj-u-px-4 { padding-right: 1.25rem !important; padding-left: 1.25rem !important; }
  .pj-u-px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
  .pj-u-py-1 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
  .pj-u-py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
  .pj-u-py-3 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
  .pj-u-py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
  .pj-u-py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .pj-u-py-6 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
  .pj-u-pt-1 { padding-top: .25rem !important; }
  .pj-u-pt-2 { padding-top: .5rem !important; }
  .pj-u-pt-3 { padding-top: 1rem !important; }
  .pj-u-pt-4 { padding-top: 1.5rem !important; }
  .pj-u-pt-5 { padding-top: 3rem !important; }
  .pj-u-pt-6 { padding-top: 4rem !important; }
  .pj-u-pe-1 { padding-right: .25rem !important; }
  .pj-u-pe-2 { padding-right: .5rem !important; }
  .pj-u-pe-3 { padding-right: 1rem !important; }
  .pj-u-pe-4 { padding-right: 1.5rem !important; }
  .pj-u-pe-5 { padding-right: 3rem !important; }
  .pj-u-pb-1 { padding-bottom: .25rem !important; }
  .pj-u-pb-2 { padding-bottom: .5rem !important; }
  .pj-u-pb-3 { padding-bottom: 1rem !important; }
  .pj-u-pb-4 { padding-bottom: 1.5rem !important; }
  .pj-u-pb-5 { padding-bottom: 3rem !important; }
  .pj-u-pb-6 { padding-bottom: 6rem !important; }
  .pj-u-ps-1 { padding-left: .25rem !important; }
  .pj-u-ps-2 { padding-left: .5rem !important; }
  .pj-u-ps-3 { padding-left: 1rem !important; }
  .pj-u-ps-4 { padding-left: 1.5rem !important; }
  .pj-u-ps-5 { padding-left: 3rem !important; }
  .pj-u-gap-1 { gap: .25rem !important; }
  .pj-u-gap-2 { gap: .5rem !important; }
  .pj-u-gap-3 { gap: 1rem !important; }
  .pj-u-gap-4 { gap: 1.5rem !important; }
  .pj-u-gap-5 { gap: 3rem !important; }
  .row-gap-1 { row-gap: .25rem !important; }
  .row-gap-2 { row-gap: .5rem !important; }
  .row-gap-3 { row-gap: 1rem !important; }
  .row-gap-4 { row-gap: 1.5rem !important; }
  .row-gap-5 { row-gap: 3rem !important; }
  .column-gap-1 { column-gap: .25rem !important; }
  .column-gap-2 { column-gap: .5rem !important; }
  .column-gap-3 { column-gap: 1rem !important; }
  .column-gap-4 { column-gap: 1.5rem !important; }
  .column-gap-5 { column-gap: 3rem !important; }
  .pj-u-g-1,
  .pj-u-gx-1 { --pj-legacy-gutter-x: .25rem; }
  .pj-u-g-1,
  .pj-u-gy-1 { --pj-legacy-gutter-y: .25rem; }
  .pj-u-g-2,
  .pj-u-gx-2 { --pj-legacy-gutter-x: .5rem; }
  .pj-u-g-2,
  .pj-u-gy-2 { --pj-legacy-gutter-y: .5rem; }
  .pj-u-g-3,
  .pj-u-gx-3 { --pj-legacy-gutter-x: 1rem; }
  .pj-u-g-3,
  .pj-u-gy-3 { --pj-legacy-gutter-y: 1rem; }
  .pj-u-g-4,
  .pj-u-gx-4 { --pj-legacy-gutter-x: 1.5rem; }
  .pj-u-g-4,
  .pj-u-gy-4 { --pj-legacy-gutter-y: 1.5rem; }
  .pj-u-g-5,
  .pj-u-gx-5 { --pj-legacy-gutter-x: 3rem; }
  .pj-u-g-5,
  .pj-u-gy-5 { --pj-legacy-gutter-y: 3rem; }

  @media (min-width: 768px) {
    .pj-u-d-md-flex { display: flex !important; }
    .pj-u-d-md-block { display: block !important; }
    .pj-u-d-md-none { display: none !important; }
  }

  @media (min-width: 992px) {
    .pj-u-d-lg-none { display: none !important; }
    .pj-u-d-lg-flex { display: flex !important; }
    .pj-u-d-lg-block { display: block !important; }
  }
}

@layer picjeju.bridge {
  .pj-type-heading-1 { font-size: var(--pj-text-h1); font-weight: 700; line-height: var(--pj-line-heading); }
  .pj-type-heading-2 { font-size: var(--pj-text-h2); font-weight: 700; line-height: var(--pj-line-heading); }
  .pj-type-heading-3 { font-size: var(--pj-text-h3); font-weight: 700; line-height: var(--pj-line-heading); }
  .pj-type-heading-4 { font-size: var(--pj-text-h4); font-weight: 700; line-height: var(--pj-line-heading); }
  .pj-type-lead { font-size: var(--pj-text-lead); font-weight: 400; line-height: var(--pj-line-body); }
  .pj-type-body-lg { font-size: var(--pj-text-body-lg); line-height: var(--pj-line-body); }
  .pj-type-body-md { font-size: var(--pj-text-body-md); line-height: var(--pj-line-body); }
  .pj-type-body-sm { font-size: var(--pj-text-body-sm); line-height: var(--pj-line-body); }
  .pj-type-caption { font-size: var(--pj-text-caption); line-height: var(--pj-line-body); }

  .pj-icon {
    width: var(--pj-icon-md);
    height: var(--pj-icon-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pj-icon--16 { width: var(--pj-icon-sm); height: var(--pj-icon-sm); }
  .pj-icon--24 { width: var(--pj-icon-md); height: var(--pj-icon-md); }
  .pj-icon--32 { width: var(--pj-icon-lg); height: var(--pj-icon-lg); }
  .pj-icon--40 { width: var(--pj-icon-xl); height: var(--pj-icon-xl); }

  .pj-image {
    display: block;
    overflow: hidden;
    border: 1px solid var(--pj-color-light-2);
    border-radius: var(--pj-radius-image);
  }

  .pj-image > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@layer picjeju.components {
  .mypage-activity-link {
    display: grid;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
  }

  .mypage-activity-link p {
    margin: 0;
    color: var(--dark2);
    line-height: 1.5;
  }

  .mypage-activity-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .75rem;
    color: var(--dark2);
    font-size: var(--pj-text-caption);
    line-height: 1.4;
  }

  .mypage-activity-meta span + span::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    margin: 0 .55rem 0 0;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
  }

  .mypage-activity-cta {
    color: var(--pj-color-primary);
    font-size: var(--pj-text-caption);
    font-weight: 700;
  }

  .mypage-activity-link:not(.mypage-activity-link--static):hover strong,
  .mypage-activity-link:not(.mypage-activity-link--static):focus-visible strong {
    color: var(--pj-color-primary);
  }

  .mypage-activity-link:focus-visible {
    outline: none;
    box-shadow: var(--pj-focus-ring);
    border-radius: var(--pj-radius-xs);
  }

  .mypage-post-panel {
    --mypage-post-line: #e3e3e3;
    --mypage-post-muted: #8c8c8c;
    --mypage-post-page-muted: #bdbdbd;
    --mypage-post-search-border: #bdbdbd;
    min-height: 1286px;
    color: var(--dark1, #222);
  }

  .mypage-post-panel .mypage-post-title {
    margin: 0;
    color: var(--dark1, #222);
    font-size: 18px;
    font-weight: 700;
    line-height: 23.4px;
  }

  .mypage-post-search {
    display: flex;
    align-items: center;
    width: 100%;
    height: 53px;
    margin: 24px 0 0;
    padding: 0 16px;
    border: 1px solid var(--mypage-post-search-border);
    border-radius: 10px;
    background: #fff;
  }

  .mypage-post-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    padding: 0;
    color: var(--dark1, #222);
    background: transparent;
    font-size: 16px;
    font-weight: 400;
    line-height: 20.8px;
    outline: none;
  }

  .mypage-post-search input::placeholder {
    color: var(--mypage-post-muted);
    opacity: 1;
  }

  .mypage-post-search button {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border: 0;
    padding: 0;
    color: var(--mypage-post-muted);
    background: transparent;
    cursor: pointer;
  }

  .mypage-post-search button span {
    display: block;
    width: 20px;
    height: 20px;
    background: currentColor;
    mask: url("/assets/images/svg/icon_search.svg") center / contain no-repeat;
    -webkit-mask: url("/assets/images/svg/icon_search.svg") center / contain no-repeat;
  }

  .mypage-post-search:focus-within {
    border-color: var(--dark1, #222);
  }

  .mypage-post-list {
    margin-top: 24px;
  }

  .mypage-post-panel .mypage-post-item {
    box-sizing: border-box;
    min-height: 71px;
    margin: 0;
    border: 0;
    border-bottom: 1px solid var(--mypage-post-line);
    border-radius: 0;
    padding: 0;
  }

  .mypage-post-panel .mypage-post-item:first-child {
    min-height: 47px;
  }

  .mypage-post-link {
    display: grid;
    grid-template-columns: 48px 78px minmax(0, 1fr) 73px 44px 44px;
    column-gap: 32px;
    align-items: start;
    min-height: 70px;
    padding: 24px 0 0;
    color: inherit;
    text-decoration: none;
  }

  .mypage-post-item:first-child .mypage-post-link {
    min-height: 46px;
    padding-top: 0;
  }

  .mypage-post-number,
  .mypage-post-category,
  .mypage-post-subject {
    font-size: 16px;
    line-height: 20.8px;
  }

  .mypage-post-number {
    color: var(--dark1, #222);
    font-weight: 400;
  }

  .mypage-post-category {
    overflow: hidden;
    color: var(--dark1, #222);
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mypage-post-subject {
    overflow: hidden;
    color: var(--dark1, #222);
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .mypage-post-date,
  .mypage-post-stat {
    color: var(--mypage-post-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 18.2px;
  }

  .mypage-post-date {
    margin-top: 2.5px;
    white-space: nowrap;
  }

  .mypage-post-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    margin-top: 2.5px;
    white-space: nowrap;
    text-align: right;
  }

  .mypage-post-stat-icon {
    display: inline-block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background: var(--mypage-post-page-muted);
  }

  .mypage-post-stat--views .mypage-post-stat-icon {
    mask: url("/assets/images/svg/icon_eye_on.svg") center / 16px 16px no-repeat;
    -webkit-mask: url("/assets/images/svg/icon_eye_on.svg") center / 16px 16px no-repeat;
  }

  .mypage-post-stat--comments .mypage-post-stat-icon {
    mask: url("/assets/images/svg/icon_chat.svg") center / 16px 16px no-repeat;
    -webkit-mask: url("/assets/images/svg/icon_chat.svg") center / 16px 16px no-repeat;
  }

  .mypage-post-link:not(.mypage-activity-link--static):hover .mypage-post-subject,
  .mypage-post-link:not(.mypage-activity-link--static):focus-visible .mypage-post-subject {
    color: var(--dark1, #222);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .mypage-post-link:focus-visible {
    outline: none;
    box-shadow: var(--pj-focus-ring);
  }

  .mypage-post-footer {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 120px;
    padding-top: 48px;
  }

  .mypage-post-pagination {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    gap: 24px;
    min-width: 247px;
  }

  .mypage-post-pagination button {
    appearance: none;
    position: relative;
    border: 0;
    padding: 0;
    color: var(--mypage-post-page-muted);
    background: transparent;
    font-size: 18px;
    font-weight: 400;
    line-height: 23.4px;
    cursor: pointer;
  }

  .mypage-post-pagination button[aria-current="page"] {
    color: var(--dark1, #222);
    font-weight: 700;
  }

  .mypage-post-pagination button[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(100% + 2px);
    width: 8px;
    height: 3px;
    border-radius: 999px;
    background: var(--dark1, #222);
    transform: translateX(-50%);
  }

  .mypage-post-pagination button:disabled:not([aria-current="page"]) {
    cursor: default;
  }

  .mypage-post-pagination button:first-child,
  .mypage-post-pagination button:last-child {
    width: 24px;
    height: 24px;
    color: var(--mypage-post-page-muted);
    font-size: 34px;
    font-weight: 300;
    line-height: 22px;
    transform: translateY(-1px);
  }

  .mypage-inquiry-panel {
    --mypage-inquiry-line: #e5e5e5;
    --mypage-inquiry-muted: #8c8c8c;
    --mypage-inquiry-page-muted: #bdbdbd;
    --mypage-inquiry-answer: #00cc66;
    --mypage-inquiry-accent: #ff6633;
    min-height: 1286px;
    color: var(--dark1, #222);
  }

  .mypage-inquiry-panel .mypage-inquiry-title {
    margin: 0;
    color: var(--dark1, #222);
    font-size: 18px;
    font-weight: 700;
    line-height: 23.4px;
  }

  .mypage-inquiry-list {
    display: flex;
    flex-direction: column;
  }

  .mypage-inquiry-item {
    border-bottom: 1px solid var(--mypage-inquiry-line);
    margin: 0;
    padding: 0;
  }

  .mypage-inquiry-item:not(.mypage-inquiry-item--with-reply) {
    min-height: 164px;
  }

  .mypage-inquiry-item--with-reply:not(.mypage-inquiry-item--with-product) {
    min-height: 222px;
  }

  .mypage-inquiry-item--with-reply.mypage-inquiry-item--with-product {
    min-height: 278px;
  }

  .mypage-inquiry-row {
    display: flex;
    position: relative;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    min-height: 108px;
    padding-top: 24px;
  }

  .mypage-inquiry-item--with-product .mypage-inquiry-row {
    min-height: 164px;
  }

  .mypage-inquiry-main {
    min-width: 0;
    flex: 1 1 auto;
  }

  .mypage-inquiry-headline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
  }

  .mypage-inquiry-kind,
  .mypage-inquiry-reply-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 26px;
    padding: 3px 15px;
    border: 1px solid var(--mypage-inquiry-muted);
    border-radius: 999px;
    color: var(--mypage-inquiry-muted);
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 18.2px;
    white-space: nowrap;
  }

  .mypage-inquiry-question {
    min-width: 0;
    color: var(--dark1, #222);
    font-size: 18px;
    font-weight: 700;
    line-height: 23.4px;
    word-break: keep-all;
  }

  .mypage-inquiry-product {
    display: grid;
    gap: 4px;
    margin: 16px 0 16px;
    color: var(--mypage-inquiry-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 18.2px;
    white-space: pre-line;
  }

  .mypage-inquiry-date {
    display: block;
    color: var(--mypage-inquiry-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 18.2px;
  }

  .mypage-inquiry-actions {
    display: inline-flex;
    position: absolute;
    right: 0;
    bottom: 24px;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    color: var(--mypage-inquiry-muted);
    font-size: 14px;
    font-weight: 400;
    line-height: 18.2px;
    white-space: nowrap;
  }

  .mypage-inquiry-actions a,
  .mypage-inquiry-actions button {
    appearance: none;
    border: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  .mypage-inquiry-actions a:hover,
  .mypage-inquiry-actions a:focus-visible,
  .mypage-inquiry-actions button:hover,
  .mypage-inquiry-actions button:focus-visible {
    color: var(--mypage-inquiry-accent);
    outline: none;
  }

  .mypage-inquiry-actions button:disabled {
    cursor: progress;
    opacity: .55;
  }

  .mypage-inquiry-reply {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 8px;
    min-height: 114px;
    padding-top: 24px;
    padding-left: 0;
  }

  .mypage-inquiry-reply-arrow {
    color: var(--mypage-inquiry-page-muted);
    font-size: 32px;
    font-weight: 300;
    line-height: 32px;
    transform: translateY(-2px);
  }

  .mypage-inquiry-reply-line {
    display: flex;
    align-items: center;
    position: relative;
    gap: 8px;
    min-height: 32px;
    min-width: 0;
  }

  .mypage-inquiry-reply-badge {
    border-color: var(--mypage-inquiry-answer);
    color: var(--mypage-inquiry-answer);
  }

  .mypage-inquiry-reply-line p {
    margin: 0;
    color: var(--dark1, #222);
    font-size: 18px;
    font-weight: 400;
    line-height: 23.4px;
    word-break: keep-all;
  }

  .mypage-inquiry-reply-actions {
    margin-left: auto;
    color: var(--mypage-inquiry-muted);
    font-size: 12px;
    font-weight: 400;
    line-height: 15.6px;
    white-space: nowrap;
  }

  .mypage-inquiry-reply-body .mypage-inquiry-date {
    margin-top: 16px;
  }

  .mypage-inquiry-footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    margin-top: 0;
  }

  .mypage-inquiry-pagination {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }

  .mypage-inquiry-pagination button {
    appearance: none;
    border: 0;
    padding: 0;
    color: var(--mypage-inquiry-page-muted);
    background: transparent;
    font-size: 18px;
    font-weight: 400;
    line-height: 23.4px;
    cursor: pointer;
  }

  .mypage-inquiry-pagination button[aria-current="page"] {
    color: var(--dark1, #222);
    font-weight: 700;
  }

  .mypage-inquiry-pagination button:disabled:not([aria-current="page"]) {
    cursor: default;
    opacity: .7;
  }

  .mypage-inquiry-pagination button:first-child,
  .mypage-inquiry-pagination button:last-child {
    color: var(--mypage-inquiry-page-muted);
    font-size: 34px;
    font-weight: 300;
    line-height: 24px;
    transform: translateY(-1px);
  }

  .mypage-inquiry-write-button {
    position: absolute;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    min-height: 37px;
    padding: 8px 16px;
    border-radius: 20px;
    color: #fff;
    background: var(--mypage-inquiry-accent);
    font-size: 16px;
    font-weight: 400;
    line-height: 20.8px;
    text-decoration: none;
  }

  .mypage-inquiry-write-button:hover,
  .mypage-inquiry-write-button:focus-visible {
    color: #fff;
    filter: brightness(.96);
    outline: none;
    box-shadow: var(--pj-focus-ring);
  }

  @media (max-width: 767.98px) {
    .mypage-inquiry-panel .mypage-inquiry-title {
      margin-bottom: 1.25rem;
      font-size: 1.35rem;
    }

    .mypage-inquiry-item {
      padding-bottom: 1.5rem;
      margin-bottom: 1.5rem;
    }

    .mypage-inquiry-row,
    .mypage-inquiry-headline,
    .mypage-inquiry-reply-line {
      align-items: flex-start;
    }

    .mypage-inquiry-row {
      flex-direction: column;
      gap: .85rem;
    }

    .mypage-inquiry-headline,
    .mypage-inquiry-reply-line {
      flex-direction: column;
      gap: .65rem;
    }

    .mypage-inquiry-kind,
    .mypage-inquiry-reply-badge {
      min-width: auto;
      min-height: 1.9rem;
      padding: .32rem .9rem;
      font-size: .92rem;
    }

    .mypage-inquiry-question,
    .mypage-inquiry-reply-line p {
      font-size: 1.08rem;
    }

    .mypage-inquiry-product,
    .mypage-inquiry-date {
      font-size: .95rem;
    }

    .mypage-inquiry-actions {
      align-self: flex-end;
      padding-top: 0;
      font-size: .95rem;
    }

    .mypage-inquiry-reply {
      grid-template-columns: 2rem minmax(0, 1fr);
      column-gap: .65rem;
      margin-top: 1.35rem;
      padding-left: 0;
    }

    .mypage-inquiry-reply-arrow {
      font-size: 1.85rem;
    }

    .mypage-inquiry-footer {
      flex-direction: column;
      gap: 1.4rem;
      margin-top: 2.4rem;
    }

    .mypage-inquiry-pagination {
      gap: 1.15rem;
    }

    .mypage-inquiry-write-button {
      position: static;
      width: 100%;
      max-width: 18rem;
    }
  }
}