/* ===== 공통 ===== */
:root {
  /* React 원본 색감 */
  --body-bg: #88D8D0;     /* 페이지 배경(React index.html의 bg-[#88D8D0])   */
  --peach:   #FFF8F2;     /* 카드 배경(가이드/예시/입력카드)                */
  --border:  #D8E4EA;     /* 카드 테두리                                    */
  --pink:    #F47CA6;     /* 섹션 제목/배지 포인트                           */

  --text:    #1f2937;     /* 기본 글자색                                      */
  --muted:   #6b7280;     /* 보조 글자색                                      */

  --red-50:  #fef2f2;
  --red-200: #fecaca;
  --green-50:#ecfdf5;
  --green-200:#a7f3d0;

  --radius-lg: 16px;
  --radius-md: 12px;
  --shadow: 0 6px 18px rgba(0,0,0,0.10);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--body-bg);
  color: var(--text);
  font: 16px/1.6 "Noto Sans KR", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 레이아웃 */
.app-container { max-width: 1000px; margin: 0 auto; padding: 24px 16px 64px; padding-top: 240px; }
.app-header { text-align: center; margin-bottom: 24px; }
.app-title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 40px);
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0,0,0,.2);
}
.app-subtitle { margin: 8px 0 0; color: #1f2937; font-weight: 600; }

.maker-preview-fixed {
  padding: 16px;
}

.app-container { --header-offset: 260px; /* 기존 padding-top과 동기 */ }
@media (min-width: 1024px) {
  .maker-layout {
    display: grid;                 /* ← 그리드 복원 */
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
    align-items: start;
    position: relative;            /* fixed 좌표 계산용 */
  }

  .maker-preview-fixed {
    position: fixed;
    top: var(--header-offset);     /* 헤더 오프셋 유지 */
    z-index: 5;
    /* left/width는 JS에서 계속 동적 계산 */
  }

  /* 그리드 안 텍스트 오버플로우 방지(선택 사항) */
  .maker-form, .maker-preview { min-width: 0; }
}

.app-body .header {
  background-color: var(--peach);
}
.back-btn {
  color: var(--pink);
}

.header-content h1 {
  color: var(--pink)
}

.toast-top {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 5000;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: #111827;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  font-weight: 700;
  max-width: min(86vw, 520px);
}
.toast-top[hidden] { display: none; }
.toast-top__text { display: block; }
.toast-top__bar {
  height: 3px;
  margin-top: 6px;
  border-radius: 9999px;
  background: var(--pink);
  transform-origin: left center;
  animation: toastbar 3s linear forwards;
}
@keyframes toastbar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* 탭바 */
.tabbar {
  display: flex; gap: 8px; justify-content: center;
  margin: 18px 0 0;
}
.tab {
  appearance: none;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.9);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: default; /* JS연결 전까지 링크 아님 */
  color: #111827;
  font-weight: 700;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tab.is-active {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
}
.mr { margin-right: 8px; }

/* 패널 */
.app-main { display: block; }
.panel { display: none; }
.panel.is-active { display: block; }
.block { margin: 18px 0 24px; }

/* 카드(피치톤) */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.card--peach { background: var(--peach); }
.card--componant { background: rgb(136 216 208 / 0.2); }
.card-title {
  text-align: center;
  font-weight: 800;
  color: var(--pink);
  font-size: clamp(20px, 2.4vw, 28px);
  margin: 0 0 12px;
  padding-top: 14px;
}
.card-title--pink { composes: card-title; font-size: 1.875rem } /* (빌드 없이 무시됨) 시멘틱용 */
.card-desc {
  text-align: center;
  color: #374151;
  max-width: 720px;
  margin: 0 auto 20px;
  padding: 0 16px;
}
.card-title2 { font-size: 18px; font-weight: 800; margin: 0 0 10px; color: #374151; padding: 14px 20px; }

/* 그리드 */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  padding: 14px 30px 30px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 25px;
  padding-top: 20px;
}
@media (max-width: 960px){
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}

/* ===== 상위 카드 내부 패딩(그리드 + actions 래핑) ===== */
.card__section { padding: 16px; }

/* actions를 카드 내부에서 위 내용과 구분 */
.actions--inside {
  padding-top: 12px;
  padding-bottom: 20px;
  margin-top: 25px;
  justify-content: center;
}

.sticky-buttons {
  display: flex;
  justify-content: center;
  font-size: 13px;;
}

/* ===== textarea 여백/확장감 개선 ===== */
/* 카드 내부에서 좌우/하단 여백을 부여해 "붙어있는 느낌" 제거 */
.field .textarea {
  display: block;
  width: calc(100% - 32px);     /* 좌/우 16px 여백 */
  margin: 8px 16px 16px;        /* 상 8 / 좌우 16 / 하 16 */
}

/* 부모 카드가 textarea 높이에 맞춰 자연스럽게 커지도록(기본 block flow라 자동이지만 명시) */
.field { display: flex; flex-direction: column; }

/* 설명과 헤더 사이 미세 간격 보정(가독) */
.field-desc { margin: 8px 16px 0; }

/* 헤더의 좌/우 정렬 유지 */
.field-head { padding: 14px 16px 0; }

/* 미니 카드(가이드 섹션) */
.mini-card {
  background-color: rgb(136 216 208 / 0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mini-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.mini-title { margin: 0 0 6px; font-weight: 800; color: #374151; }
.mini-desc { margin-bottom: 15px; color: var(--muted); }
.mini-example {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    border-left: 4px;
    --tw-border-opacity: 1;
    border-color: rgb(244 124 166 / var(--tw-border-opacity, 1));
    padding: 0.75rem;
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    border-radius: 0.5rem;
    flex-grow: 1;
}

/* 예시 카드 */
.ex-title {
  text-align: center;
  color: var(--pink);
  font-weight: 800;
  font-size: 22px;
  margin: 16px 16px 10px;
}
.badge-pink {
  background: var(--peach);
  border: 1px solid var(--border);
  color: var(--pink);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  text-align: center;
  font-size: 1.875rem;
  font-weight: 800;
  margin-bottom: 14px;
}
.ex-box {
  border-radius: var(--radius-md);
  padding: 12px;
  margin: 20px 16px;
}
.ex-box--bad { background: var(--red-50); border: 2px solid var(--red-200); }
.ex-box--good { background: var(--green-50); border: 2px solid var(--green-200); }
.ex-text {
    --tw-text-opacity: 1;
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.75rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    border-radius: 0.5rem;
    white-space: pre-wrap;
    margin-bottom: 0.5rem;
    border:#eeeeee 1px solid;
}
.ex-reason { margin: 0; color: rgb(22 101 52 / var(--tw-text-opacity, 1)); }

.ex-head-bad {
    font-weight: 800;
    margin: 0 0 6px;
    --tw-text-opacity: 1;
    color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.ex-head-good {
    font-weight: 800;
    margin: 0 0 6px;
    --tw-text-opacity: 1;
    color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}
.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

/* 폼 공통 */
.field { display: flex; flex-direction: column; gap: 8px; }
.field-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 0; }
.field-label { font-weight: 700; color: #374151; }
.field-desc { color: var(--muted); margin: 6px 16px 0; }
.input, .select, .textarea {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-md);
  background: #fff;
  color: #111827;
  padding: 10px 12px;
  transition: box-shadow .15s ease, border-color .15s ease;
  font: inherit;
}
.textarea {
    min-height: 120px;
    resize: vertical;
    display: block;
    width: calc(100% - 32px);     /* 좌/우 16px 여백 */
    margin: 8px 16px 16px;        /* 상 8 / 좌우 16 / 하 16 */
}
.textarea--preview { min-height: 200px; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--pink);
  box-shadow: 0 0 0 2px rgba(244,124,166,.35);
}

/* 버튼 */
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; }
.btn {
  appearance: none; border: 1px solid rgba(0,0,0,.08);
  background: #fff; color: #111827;
  border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: default;
  transition: transform .1s ease, box-shadow .1s ease, filter .1s ease;
}
.btn:hover { filter: brightness(0.98); }
.btn:active { transform: translateY(1px); }
.btn--primary {
    --tw-bg-opacity: 1;
    background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
    color: #fff;
    font-weight: 780;
}
.btn--light { 
  --tw-bg-opacity: 1;
  background: rgb(216 228 234 / var(--tw-bg-opacity, 1));
  border-color: rgb(216 228 234 / var(--tw-bg-opacity, 1));
 }
.btn--ghost {
    --tw-text-opacity: 1;
    color: rgb(244 124 166 / var(--tw-text-opacity, 1));
    background-color: rgb(244 124 166 / 0.3);
}

/* 칩 */
.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border);
}
.chip {
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  border-radius: 999px; padding: 8px 12px; font-weight: 700; cursor: default;
}
.chip:hover { color: #111827; }

/* 모달 (기본 숨김: aria-hidden=true) */
.modal { position: fixed; inset: 0; display: none; z-index: 11000; }
.modal[aria-hidden="false"] { display: grid; place-items: center; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); z-index: 11000; }
.modal__dialog {
  position: relative; width: min(720px, 92vw);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  z-index: 11010;
}
.modal__header, .modal__footer { padding: 12px 14px; border-bottom: 1px solid var(--border); }
.modal__examples { display: flex; flex-wrap: wrap; }

.modal__dialog { position: relative; }
.modal__header { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal__title  { margin: 0;
    font-weight: 800;
    --tw-text-opacity: 1;
    color: rgb(244 124 166 / var(--tw-text-opacity, 1));
}
.modal__body   { padding: 16px 18px 30px; }

.modal__desc { margin: 0 0 20px; color: var(--muted); }

/* ====== 유틸리티(세로 간격) ====== */
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

/* ====== 유틸리티(트랜지션) ====== */
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* ====== 유틸리티(여백/색/보더/라운드/커서) ====== */
.p-3 { padding: 0.75rem; }

/* 클래스명 안의 특수문자는 CSS에서 이스케이프 필요 */
.bg-\[\#88D8D0\]\/30 { background-color: rgb(136 216 208 / 0.3); }
.border-\[\#88D8D0\]  { border-color: rgb(136 216 208 / 0.3); }
.border-l-4 { border-left-width: 4px; }
.rounded-r-lg {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
.cursor-pointer { cursor: pointer; }

.text-gray-400 { color: rgb(156 163 175 / 1); }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }

/* 버튼 리셋(브라우저 기본 스타일 제거) */
button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}
[role=button], button { cursor: pointer; }
button, select { text-transform: none; }

/* ====== 모달: X 버튼(심플) ====== */
.modal__x{
  position:absolute; top:10px; right:10px;
  border: none;
  background: transparent;
  line-height: 1;
  padding: 4px;
}
.modal__x:hover { filter: brightness(0.95); }

/* ====== 모달: 예시 항목 버튼 기본형(전체 폭, 왼쪽 강조선) ====== */
.ex-suggestion{
  display: block;
  width: 100%;
  text-align: left;
  border-radius: 0 0.5rem 0.5rem 0 ;           /* rounded-lg 정도 */
  border-width: 0;
  border-color: transparent;
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.ex-suggestion:hover { filter: brightness(0.98); }

.border-sollid {
  border-style: solid;
}

/* 모달 바디 색감 살짝 보강(선택 사항) */
.modal__desc { color: var(--muted); }

/* 콜아웃 */
.callout{
  margin-top: 12px;
  padding: 12px 14px;
  background: rgb(136 216 208 / 0.15); /* bg-[#88D8D0]/15 느낌 */
  border: 1px solid rgb(136 216 208 / 1);
  border-left-width: 4px;              /* border-l-4 */
  border-radius: 10px;                  /* rounded-r-lg 느낌 */
}

/* System Prompt 영역 위 여백 */
.system { margin-top: 12px; }

/* 모든 버튼 hover 시 커서 포인터 */
button:hover, .btn:hover, .chip:hover, .nav-tab:hover, .tab:hover { cursor: pointer; }

/* 탭(데스크톱/모바일 동일) hover 애니메이션: 색상 강조 + 살짝 확대 */
.nav-tab {
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; color: var(--pink)
}
.nav-tab:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  background: #f7fafc;
}

/* btn--ghost hover 색 강화 (기존 #F47CA6 보다 진하게) */
:root { --pink-strong: #d53f74; } /* 강조 핑크 */
.btn--ghost { color: #374151; border-color: #d1d5db; }
.btn--ghost:hover { color: var(--pink-strong); border-color: var(--pink-strong); }

/* btn--primary 비활성(요건 미충족) 상태 */
/* Primary: 비활성=회색, 활성=핑크(공통) */
.btn--primary { color: #fff; font-weight: 780; }
.btn--primary.is-disabled,
.btn--primary[disabled] {
  background-color: rgb(156 163 175 / 1); /* gray-400 */
  border-color: transparent;
}
.btn--primary:not(.is-disabled):not([disabled]) {
  background-color: var(--pink);
  border-color: var(--pink);
}

/* Copy 버튼: 비활성=회색, 활성=노랑(두 패널 공통 적용) */
#panel-maker [data-action="copy"][disabled],
#panel-chatbot [data-action="copy-system"][disabled],
.btn--copy[disabled] {
  background: rgb(229 231 235 / 1); /* gray-200 */
  border-color: rgb(229 231 235 / 1);
  color: #9ca3af;                   /* gray-400 */
}
#panel-maker [data-action="copy"]:not([disabled]),
#panel-chatbot [data-action="copy-system"]:not([disabled]),
.btn--copy:not([disabled]) {
  --tw-bg-opacity: 1;
  background: rgb(255 214 90 / var(--tw-bg-opacity, 1)); /* 노랑 */
  border-color: rgb(255 214 90 / var(--tw-bg-opacity, 1));
  color: #111827;
}

/* Clear 버튼: Maker에서 항상 하늘색 유지 */
#panel-maker [data-action="clear"],
#panel-maker .btn--clear {
  --tw-bg-opacity: 1;
  background: rgb(216 228 234 / var(--tw-bg-opacity, 1));
  border-color: rgb(216 228 234 / var(--tw-bg-opacity, 1));
}

/* 공통 hover 처리 */
#panel-maker [data-action="copy"]:not([disabled]):hover,
#panel-maker .btn--copy:not([disabled]):hover,
#panel-maker [data-action="clear"]:hover,
#panel-maker .btn--clear:hover,
#panel-chatbot [data-action="copy-system"]:not([disabled]):hover,
.btn--primary:not(.is-disabled):not([disabled]):hover {
  filter: brightness(0.98);
}


/* 모바일 오버레이 탭도 동일한 hover 감각 */
.nav-overlay .nav-tab { transition: transform .18s ease, background-color .18s ease; color: var(--pink) }
.nav-overlay .nav-tab:hover { transform: translateY(-1px) scale(1.03); color: var(--pink-strong)}

/* X 햄버거 전환/오버레이는 navigation.css에서 제공됨 */

.btn.is-disabled,
.btn[disabled] {
  opacity: .55;
  cursor: not-allowed !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

/* disabled 상태에선 hover 애니메이션 제거 */
.btn.is-disabled:hover,
.btn[disabled]:hover {
  transform: none;
  box-shadow: none;
}

#panel-maker .maker-form .grid-2 {
  display: grid;
  grid-template-columns: 1fr !important; /* 전역 grid-2 규칙보다 우선 */
  gap: 16px;
}

.hamburger-btn span {
  background: var(--pink);
}

/* 기본: 햄버거 숨김 */
.hamburger-btn { display: none; }

.hamburger-btn span:nth-child(1) { transform: translateY(-1px); }
.hamburger-btn span:nth-child(2) { transform: translateY(0); }
.hamburger-btn span:nth-child(3) { transform: translateY(1px); }

/* is-active일 때 X 모양 */
.hamburger-btn.is-active span:nth-child(1) {   transform: rotate(45deg) translate(6px, 6px); }
.hamburger-btn.is-active span:nth-child(2) { opacity: 0; }
.hamburger-btn.is-active span:nth-child(3) {   transform: rotate(-45deg) translate(6px, -6px); }

/* 데스크톱 탭 hover 미묘한 애니메이션 */
.tab {
  position: relative;
  transition: transform .18s ease, color .18s ease, background-color .18s ease;
}
.tab:hover { transform: translateY(-1px) scale(1.03); }
.tab::after {
  content: "";
  position: absolute; left: 50%; bottom: -6px;
  width: 0; height: 2px; background: var(--pink);
  transition: width .2s ease, left .2s ease;
}
.tab:hover::after { width: 60%; left: 20%; }

/* ===== 모바일(≤900px) ===== */
@media (max-width: 900px) {
  /* 탭바 숨기고 햄버거만 표시 */
  .tabbar { display: none !important; }
  .hamburger-btn { display: inline-flex; }

  /* 헤더가 줄어든 만큼 컨테이너 상단 패딩 축소 */
  .app-container { padding-top: 180px !important; }
}

/* ===== 오버레이 강제 오버라이드: 두 클래스 모두 허용 ===== */
.nav-overlay {
  position: fixed; inset: 0;
  z-index: 9999;               /* 최상단 */
  display: none;                /* 기본 숨김 */
  background: rgba(17,24,39,.6);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.nav-overlay.is-open .nav-overlay.is-open {          /* menu.js가 어떤 걸 쓰든 켜지도록 */
  display: block;
}

/* 내부 레이아웃(모바일 전체 화면에서 세로 3행) */
.nav-overlay .nav-overlay-content {
  position: absolute; inset: 0;
  display: flex; align-items: center;
  padding: 24px;
  background-color: var(--peach);
}
.nav-overlay .nav-list {
  width: min(92vw, 520px);
  display: flex; flex-direction: column; gap: 12px;
}
.nav-overlay .nav-tab {
  font-size: 1.125rem;
  padding: 14px 18px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  text-align: left;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.nav-overlay .nav-tab:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  background-color: #fafafa;
}

@media (max-width: 700px) {
  .app-container :where(h1,.app-title)              { font-size: 1.75rem !important; line-height: 1.15; }
  .app-container :where(h2,.section-title)          { font-size: 1.375rem !important; line-height: 1.20; }
  .app-container :where(h3,.card-title2)            { font-size: 1.125rem !important; line-height: 1.25; }

  .app-container :where(
    p,li,span,a,button,.btn,label,
    input,select,textarea,.input,.select,.textarea,
    .nav-tab,.tab,.chip,.field-label,.callout,.ex-text,.text-sm,.text-xs
  ){ font-size: 0.95rem !important; }

  /* 간격도 살짝 줄이기(선택): 카드 내부 패딩/그리드 갭/버튼 패딩 */
  .app-container :where(.card__section)             { padding: 12px !important; }
  .app-container :where(.grid-2,.grid-3)            { gap: 12px !important; }
  .app-container :where(.btn)                       { padding: 8px 12px !important; }
  .app-container :where(.input,.select,.textarea)   { padding: 8px 10px !important; }
}

/* ≤480px: 더 강하게 축소 */
@media (max-width: 480px) {
  .app-container :where(h1,.app-title)              { font-size: 1.3rem !important; padding-top: 15px; }
  .app-container :where(h2,.section-title)          { font-size: 1.1rem !important; }
  .app-container :where(h3,.card-title2)            { font-size: 1rem !important; }

  
  .app-container :where(
    p,li,span,a,button,.btn,label,
    input,select,textarea,.input,.select,.textarea,
    .nav-tab,.tab,.chip,.field-label,.callout,.ex-text,.text-sm,.text-xs
    ){ font-size: 0.8rem !important; word-break: auto-phrase;}
    
    .back-btn { font-size: 0.7rem !important; }
    .app-container { padding-top: 140px !important; }
    .badge-pink { font-size: 1.1rem !important; word-break: auto-phrase;}
    
  .app-container :where(.card__section)             { padding: 10px !important; }
  .app-container :where(.grid-2,.grid-3)            { gap: 10px !important; }
  .app-container :where(.btn)                       { padding: 7px 10px !important; }
  .app-container :where(.input,.select,.textarea)   { padding: 7px 9px !important; }
}