/* Pineapple brand layer — visual overrides only. */
:root {
  --bg: #fffefa;
  --panel: #ffffff;
  --panel-2: #fbfaf5;
  --text: #30322f;
  --muted: #7a7d77;
  --line: #e9e8e1;
  --accent: #f4d875;
  --accent-2: #dbeaa6;
  --danger: #c95042;
  --ok: #43884d;
  --shadow: 0 12px 34px rgba(45, 48, 39, 0.045);
  --grad: linear-gradient(115deg, #f8dfa0 0%, #f5d77a 70%, #dceba8 100%);
  --green: #78845e;
  --green-dark: #30322f;
  --lime-soft: #f4f7e9;
}

body {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 2%, rgba(250, 224, 145, 0.13), transparent 28rem),
    radial-gradient(circle at 92% 9%, rgba(221, 235, 172, 0.11), transparent 24rem),
    linear-gradient(180deg, #fffefa 0%, #ffffff 48%, #fbfcf8 100%);
  color: var(--text);
  font-family: "Noto Sans KR", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: 0.1;
  background-image: radial-gradient(#aeb59b 0.65px, transparent 0.65px);
  background-size: 20px 20px;
  mask-image: linear-gradient(to bottom, #000, transparent 44%);
}

main {
  width: min(1160px, calc(100vw - 40px));
  padding-top: 30px;
}

header {
  position: relative;
  align-items: center;
  margin-bottom: 18px;
  padding: 10px 6px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.brand-block { min-width: 0; }

.title-row {
  align-items: center;
  gap: 9px;
}

h1 {
  color: #d1ad3d;
  background-image: linear-gradient(100deg, #e5b949 0%, #efd277 67%, #bed77c 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Fredoka", "Arial Rounded MT Bold", sans-serif;
  font-size: clamp(31px, 4vw, 48px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.product-kind {
  align-self: flex-end;
  margin-bottom: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: transparent;
  color: #9b9d94;
  font-family: "Fredoka", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.title-ko {
  color: #999b95;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.subtitle {
  margin: 7px 0 0;
  color: #7f827c;
  font-size: 14px;
  font-weight: 500;
}

.account-bar > span {
  padding: 7px 10px;
  border-radius: 999px;
  background: #f7f7f3;
  color: #81837e;
  font-size: 12px;
  font-weight: 600;
}

.sample-bar {
  margin: 16px 2px 12px;
  padding: 0 4px;
}

.sample-bar::before {
  content: "TIP";
  margin-right: -2px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #f7edc8;
  color: #8a7b45;
  font-family: "Fredoka", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.sample-bar > span { margin-right: auto; }

.field,
.card {
  border-color: var(--line);
  box-shadow: var(--shadow);
}

.field {
  border-radius: 19px;
  background: rgba(251, 250, 245, 0.9);
}

.card {
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
}

.card-head {
  padding: 13px 16px;
  background: linear-gradient(100deg, #fdfbf2, #f8faef);
}

.card-title,
.field-label {
  color: var(--green-dark);
}

.card textarea { background: rgba(255, 255, 255, 0.48); }

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea,
#trialPassword {
  border-color: #e3e2da;
  background: rgba(255, 255, 255, 0.92);
}

.field input:focus,
.field textarea:focus,
#trialPassword:focus {
  border-color: #d9d7ca;
  box-shadow: 0 0 0 3px rgba(232, 218, 157, 0.16);
}

button {
  color: var(--green-dark);
  background-color: var(--accent);
  background-image: var(--grad);
  box-shadow: 0 5px 14px rgba(147, 132, 69, 0.09);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

button:hover:not(:disabled) {
  filter: saturate(1.04) brightness(1.015);
  transform: translateY(-1px);
  box-shadow: 0 7px 17px rgba(129, 126, 91, 0.13);
}

button:active:not(:disabled) { transform: translateY(0); }

button.secondary {
  border-color: #e3e2dc;
  background: rgba(255, 255, 255, 0.78);
  color: var(--green-dark);
  box-shadow: none;
}

.toggle-btn,
.preset-btn,
.level-btn {
  box-shadow: none;
}

.toggle-btn.active,
.preset-btn.active,
.level-btn.active {
  border-color: transparent;
  color: var(--green-dark);
  box-shadow: none;
}

.check-pill input[type="checkbox"]:checked {
  border-color: transparent;
}

.check-pill input[type="checkbox"]:checked::after { border-color: var(--green-dark); }

.actions #translateBtn {
  min-width: 132px;
  box-shadow: 0 8px 20px rgba(149, 135, 78, 0.13);
}

:focus-visible {
  outline: 3px solid rgba(206, 184, 102, 0.5);
  outline-offset: 3px;
}

#accessDialog {
  border: 1px solid #e5e3d8;
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 4%, rgba(221, 233, 175, 0.13), transparent 10rem),
    linear-gradient(165deg, #ffffff, #fffefa);
  color: var(--green-dark);
  box-shadow: 0 30px 100px rgba(48, 51, 45, 0.2);
}

#accessDialog::backdrop {
  background: rgba(54, 57, 51, 0.3);
  backdrop-filter: blur(5px);
}

.dialog-eyebrow {
  color: #9b8a4c;
  font-family: "Fredoka", sans-serif;
  font-weight: 700;
}

#accessTitle {
  font-family: "Fredoka", "Noto Sans KR", sans-serif;
  color: var(--green-dark);
  font-size: 32px;
}

.google-placeholder {
  border-color: #e3e2da;
  background: #fff;
}

.auth-divider::before,
.auth-divider::after { background: #e8e7e0; }

footer {
  border-top-color: #ebeae4;
  background: rgba(250, 250, 247, 0.7);
}

@media (max-width: 860px) {
  header {
    flex-direction: row;
    align-items: center;
  }
  .account-bar {
    align-self: auto;
    flex: 0 0 auto;
  }
}

@media (max-width: 620px) {
  main { width: min(100% - 24px, 1160px); padding-top: 16px; }
  header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 8px 2px;
    border-radius: 0;
  }
  .account-bar { align-self: flex-end; }
  h1 { font-size: 34px; }
  .product-kind { display: none; }
  .title-ko { flex-basis: 100%; margin-top: -4px; }
  .sample-bar::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}