/* =========================================================
   프롬프트 레시피 — 디자인 시스템 (2026-11-01)
   구조는 PeTend 디자인 전달본(토큰·하단 탭·시트·토스트)을 따르고, 로고·카피·화면은 프롬프트 레시피 것.
   브랜드 색을 바꾸려면 아래 --pr-brand-* 토큰만 바꾼다.
   ========================================================= */
@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-Regular.woff2") format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-SemiBold.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Pretendard";src:url("/fonts/Pretendard-ExtraBold.woff2") format("woff2");font-weight:800 900;font-display:swap}

:root{
 /* 브랜드 (Violet — 로고 색) */
 --pr-brand-50:#F7F5FF;--pr-brand-100:#EEEAFE;--pr-brand-200:#DDD6FB;--pr-brand-300:#BFB3F2;--pr-brand-400:#8E7BE0;--pr-brand-500:#6D59D6;--pr-brand-600:#5F4FC9;--pr-brand-700:#4A3CA8;--pr-link:#5F4FC9;
 /* 따뜻한 중립색 */
 --pr-cream:#FAF7F2;--pr-paper:#FFFFFF;--pr-sand-50:#F6F1EA;--pr-sand-100:#F1ECE5;--pr-line:#ECE5DA;--pr-sand-300:#D9C9B8;--pr-sand-400:#7A6F63;--pr-sand-600:#645B51;--pr-ink:#2B2622;
 /* 의미색 */
 --pr-success:#1F6B3A;--pr-success-soft:#E0F1E3;--pr-danger:#A42E23;--pr-danger-soft:#FBE8E3;--pr-info:#1F4F7A;--pr-info-soft:#DCEBF7;--pr-warning:#9A6412;--pr-warning-soft:#FFF4E5;
 /* 글꼴·크기 */
 --pr-font:"Pretendard",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
 --pr-fs-h1:22px;--pr-fs-h2:18px;--pr-fs-h3:15px;--pr-fs-body:15px;--pr-fs-sub:13px;--pr-fs-caption:12px;--pr-fs-micro:11px;
 /* 모서리·간격·그림자·모션 */
 --pr-r-sm:8px;--pr-r-md:10px;--pr-r-lg:12px;--pr-r-btn:14px;--pr-r-card:16px;--pr-r-sheet:22px;--pr-r-pill:999px;
 --pr-sh-card:0 1px 3px rgba(0,0,0,.06);--pr-sh-cta:0 4px 14px rgba(95,79,201,.24);--pr-sh-sheet:0 -8px 30px rgba(43,38,34,.14);
 --pr-ease:cubic-bezier(.22,1,.36,1);
 /* 기존 변수를 새 토큰으로 연결 */
 --ink:var(--pr-ink);--ink2:var(--pr-sand-600);--muted:var(--pr-sand-600);--line:var(--pr-line);--paper:var(--pr-cream);--accent:var(--pr-brand-600);--accent-soft:var(--pr-brand-100);--warning:var(--pr-warning);
 --ui-text:var(--pr-ink);--ui-muted:var(--pr-sand-600);--ui-accent:var(--pr-brand-600);--ui-border:var(--pr-line);
 --u-accent:var(--pr-brand-600);--u-ink:var(--pr-ink);--u-line:var(--pr-line);--u-muted:var(--pr-sand-600);
}
html,body{font-family:var(--pr-font);color:var(--pr-ink);background:var(--pr-cream);-webkit-font-smoothing:antialiased;letter-spacing:-.005em}
button,input,select,textarea{font-family:inherit}
h1,h2,h3{letter-spacing:-.02em;color:var(--pr-ink)}
:focus-visible{outline:3px solid var(--pr-brand-300);outline-offset:2px}

/* ── 로고 ── */
.brand{gap:8px}
.brand-mark{display:inline-block!important;width:30px;height:30px;font-size:0;color:transparent;background:url("/assets/logo-mark.svg") center/contain no-repeat;border-radius:0}
.brand span#brandName,.brand #brandName{font-weight:800;letter-spacing:-.04em;font-size:18px;color:var(--pr-ink)}
.login-brand-mark{display:block;width:84px;height:84px;margin:0 auto 12px;font-size:0;color:transparent;background:url("/assets/app-icon.svg") center/contain no-repeat;border-radius:22px;box-shadow:var(--pr-sh-cta)}

/* ── 상단 바 ── */
.app-header{background:var(--pr-paper);border-bottom:1px solid var(--pr-line);box-shadow:none}
.app-header select#locale{min-width:88px;border:1px solid var(--pr-line);border-radius:var(--pr-r-pill);background:var(--pr-paper);min-height:36px;padding:0 10px;color:var(--pr-sand-600);font-weight:600}
.app-header #loginButton{border-radius:var(--pr-r-pill);border:1px solid var(--pr-line);background:var(--pr-paper);color:var(--pr-sand-600);font-weight:700;min-height:36px;padding:0 14px}

/* ── 버튼 ── */
button{border-radius:var(--pr-r-lg);border:1px solid var(--pr-line);background:var(--pr-paper);color:var(--pr-ink);font-weight:600;transition:background-color .12s,border-color .12s,box-shadow .12s}
button:hover:not(:disabled){background:var(--pr-brand-50);border-color:var(--pr-brand-300)}
button:disabled{color:var(--pr-sand-400);background:var(--pr-sand-50);border-color:var(--pr-line);cursor:not-allowed}
button.primary,.primary{background:var(--pr-brand-600);border-color:var(--pr-brand-600);color:#fff;font-weight:800;border-radius:var(--pr-r-btn);min-height:48px;padding:0 20px;box-shadow:var(--pr-sh-cta)}
button.primary:hover:not(:disabled){background:var(--pr-brand-700);border-color:var(--pr-brand-700)}
button.primary:disabled{background:var(--pr-sand-100);border-color:var(--pr-line);color:var(--pr-sand-400);box-shadow:none}
a.link-button{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--pr-line);border-radius:var(--pr-r-lg);background:var(--pr-paper);color:var(--pr-link);font-weight:700;text-decoration:none}

/* ── 입력 ── */
input[type=text],input[type=search],input[type=email],input[type=password],textarea,select{border:1px solid var(--pr-line);border-radius:var(--pr-r-lg);background:var(--pr-paper);color:var(--pr-ink);font-size:15px}
input:focus,textarea:focus,select:focus{border-color:var(--pr-brand-500);box-shadow:0 0 0 3px var(--pr-brand-100);outline:none}
::placeholder{color:var(--pr-sand-400)}

/* ── 카드·목록 ── */
.panel,.saved-row,.unified-page .u-card,.u-card,.empty-card,.login-card,.connect-card,.run-card,.builder-answer-form,.builder-settings,.builder-preview{border-radius:var(--pr-r-card)}
.saved-row,.u-card,.panel.account-block{background:var(--pr-paper);border:1px solid var(--pr-line);box-shadow:var(--pr-sh-card)}
.saved-row h3{font-size:16px;font-weight:800}
.saved-row-actions button{min-height:40px;font-weight:700;color:var(--pr-link)}
.badge{background:var(--pr-brand-100);color:var(--pr-brand-700);border:0;border-radius:var(--pr-r-pill);font-weight:700;font-size:12px;padding:3px 10px}
.run-card{background:var(--pr-brand-50);border:1px solid var(--pr-brand-200)}
.field-hint,.hint,.field-help{color:var(--pr-sand-600)}
.required-label{color:var(--pr-danger);font-weight:700}.optional-label{color:var(--pr-sand-400)}

/* ── 하단 탭 (PeTend TabBar 구조: 흰 바, 헤어라인, 11px 라벨, 활성 = 브랜드색) ── */
body .bottom-nav{background:var(--pr-paper);border-top:1px solid var(--pr-line);box-shadow:none;min-height:64px;padding:6px 6px calc(10px + env(safe-area-inset-bottom));gap:0;grid-template-columns:repeat(3,minmax(0,1fr))!important;justify-content:stretch}
body .bottom-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:4px 0;border:0;border-radius:var(--pr-r-lg);background:transparent;box-shadow:none;color:var(--pr-sand-400);font-size:11px;font-weight:600}
body .bottom-nav button:hover{background:var(--pr-brand-50);color:var(--pr-brand-700)}
body .bottom-nav button[aria-current="page"]{background:transparent;color:var(--pr-link);font-weight:700;box-shadow:none}
body .bottom-nav button::before{content:"";display:block;width:24px;height:24px;margin:0;background-position:center;background-repeat:no-repeat;background-size:contain;font-size:0;line-height:0}
body .bottom-nav #toggleRecipes::before{background-image:url("/assets/icons/grid-off.svg")}
body .bottom-nav #navSaved::before{background-image:url("/assets/icons/bookmark-off.svg")}
body .bottom-nav #navMore::before{background-image:url("/assets/icons/user-off.svg");filter:none}
body .bottom-nav #toggleRecipes[aria-current="page"]::before{background-image:url("/assets/icons/grid-on.svg")}
body .bottom-nav #navSaved[aria-current="page"]::before{background-image:url("/assets/icons/bookmark-on.svg")}
body .bottom-nav #navMore[aria-current="page"]::before{background-image:url("/assets/icons/user-on.svg");filter:none}
/* ── 시트(대화상자): 모바일은 아래에서 올라오는 시트, 넓은 화면은 가운데 카드 ── */
dialog:not(.detail-dialog):not(.menu-dialog){border:0;border-radius:var(--pr-r-sheet);padding:20px 20px 24px;background:var(--pr-paper);color:var(--pr-ink);box-shadow:var(--pr-sh-sheet);max-width:min(520px,calc(100vw - 24px))}
dialog::backdrop{background:rgba(43,38,34,.42)}
dialog[open]:not(.detail-dialog):not(.menu-dialog){animation:pr-sheet 300ms var(--pr-ease)}
@keyframes pr-sheet{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media(max-width:600px){dialog[open]:not(.detail-dialog):not(.menu-dialog){margin:auto 0 0 0;width:100%;max-width:100%;border-radius:var(--pr-r-sheet) var(--pr-r-sheet) 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}}
dialog .actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:16px}
dialog .saved-check{color:var(--pr-success);font-weight:800;margin:0 0 6px}
dialog h2{font-size:20px;font-weight:800;margin:0 0 8px}

/* ── 토스트 (확인 창 대신 가벼운 피드백) ── */
.completion-toast{background:var(--pr-ink);color:#fff;border-radius:14px;padding:12px 14px;font-weight:600;box-shadow:var(--pr-sh-sheet);border:0}

/* ── 레시피 작성·폼 수정 ── */
.recipe-builder{font-family:var(--pr-font)}
.builder-toolbar button{min-height:40px;font-weight:700}
.builder-tabs button{border-radius:var(--pr-r-lg);font-weight:700}
.builder-tabs button[aria-pressed="true"],.builder-tabs button.active{background:var(--pr-brand-100);border-color:var(--pr-brand-300);color:var(--pr-brand-700)}
.form-question{background:var(--pr-paper);border:1px solid var(--pr-line);border-radius:var(--pr-r-card);padding:14px;margin-bottom:10px}
.form-question .question-heading strong{color:var(--pr-brand-700);font-weight:800}
.question-controls.simple{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:8px 0}
.question-controls.simple label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:13px}
.question-controls.simple .answer-choice{flex-direction:row;align-items:center;gap:8px}
details.field-more{margin:6px 0 4px}
details.field-more>summary{cursor:pointer;color:var(--pr-link);font-weight:700;font-size:13px;min-height:36px;display:flex;align-items:center}
details.field-more .question-controls{margin-top:6px}
.ai-help-fab{background:var(--pr-brand-600);border-color:var(--pr-brand-600);color:#fff;font-weight:800;border-radius:var(--pr-r-pill);box-shadow:var(--pr-sh-cta)}
.new-recipe-fab{background:var(--pr-brand-600);border-color:var(--pr-brand-600);color:#fff;font-weight:800;border-radius:var(--pr-r-pill);box-shadow:var(--pr-sh-cta)}

/* ── 로그인 ── */
.login-card{background:var(--pr-paper);border:1px solid var(--pr-line);box-shadow:var(--pr-sh-card);text-align:center}
.login-eyebrow{color:var(--pr-brand-600);font-weight:800;letter-spacing:.14em}
.login-steps li span{background:var(--pr-brand-100);color:var(--pr-brand-700)}
/* 2026-11-10 로그인 버튼 통일: Google(지침 기본 반지름 4px·테두리 #747775)과 Apple 공식 아트워크(320×44, 모서리 4px)를 같은 크기·모서리로 둔다. 테마의 54px·둥근 모서리는 여기엔 적용하지 않는다. */.social-signin.provider-google{border:1px solid #747775;border-radius:4px;background:#fff;min-height:44px;height:44px}

/* ── 마켓 ── */
.u-eyebrow{color:var(--pr-brand-600);font-weight:800}
.u-topics button{border-radius:var(--pr-r-pill);border:1px solid var(--pr-line);background:var(--pr-paper);font-weight:700}
.u-topics button[aria-pressed="true"],.u-topics button.active{background:var(--pr-brand-100);border-color:var(--pr-brand-300);color:var(--pr-brand-700)}

/* ── 화면 점검 반영 (2026-11-01) ── */
/* 작성 중 화면이 따로 없으므로 "← 작성 중인 화면으로"는 두지 않는다 */
#closeDetail{display:none!important}
/* 베타 안내 줄은 로그인 전 화면에서만 */
body:not(.auth-locked) #betaBanner{display:none}
/* 페이지 이름 줄: 별도 띠 없이 페이지 배경과 같게 */
.surface-heading{background:transparent;border:0;box-shadow:none}
.surface-heading>span{font-size:13px;font-weight:700;color:var(--pr-sand-600)}
/* AI 도움 버튼이 저장 버튼을 가리지 않도록 아래 여백 */
.recipe-builder{padding-bottom:132px}
.ai-help-fab{bottom:calc(84px + env(safe-area-inset-bottom))}
/* 프롬프트 미리보기: 접힌 한 줄 */
.builder-preview{background:transparent;border:0;padding:0;margin-top:8px}
.builder-preview summary{cursor:pointer;color:var(--pr-link);font-weight:700;min-height:40px;display:flex;align-items:center}
/* 접힘 영역 공통 */
details.pref-advanced,details.more-ai{margin:12px 0;border-top:1px solid var(--pr-line);padding-top:6px}
details.pref-advanced>summary,details.more-ai>summary{cursor:pointer;color:var(--pr-link);font-weight:700;min-height:40px;display:flex;align-items:center}
/* 기본설정: 한 줄 입력은 한 줄 높이 */
#preferencesForm input[type=text]{min-height:46px;padding:0 12px;width:100%;box-sizing:border-box}
#preferencesForm label{display:block;margin-top:14px;font-weight:700}
#preferencesForm textarea{width:100%;box-sizing:border-box}

/* 접힘 영역 화살표 유지, 페이지 이름 줄 배경 통일, 상세 제목 중복 제거 */
details.pref-advanced>summary,details.more-ai>summary,details.field-more>summary,.builder-preview summary{display:list-item;list-style:revert}
body .surface-heading,#detailSurface .surface-heading,#detailDock .surface-heading{background:transparent!important}
#builderHeading{display:none}
details.more-ai{margin:12px 0 0}
details.more-ai .connect-key{margin-top:8px}

/* 회원 탈퇴 */
.danger-link{color:#c0392b;font-size:13px}
button.danger{background:#c0392b;border-color:#c0392b;color:#fff}
#deleteAccountDialog{max-width:min(92vw,420px)}

/* 요금제 카드 · 첫 로그인 안내 */
.plan-cards{display:grid;gap:10px;margin:12px 0}
.plan-card{border:1px solid var(--pr-line,#e8e6ef);border-radius:14px;padding:12px 14px}
.plan-card.current{border-color:var(--pr-brand-500,#6050c8);background:rgba(96,80,200,.06)}
.plan-card h3{margin:0 0 2px;font-size:16px}
.plan-card .plan-price{margin:0 0 6px;font-weight:800;font-size:18px}
.plan-card ul{margin:0;padding-left:18px;font-size:14px}
#welcomeSheet{max-width:min(94vw,460px);max-height:88vh;overflow:auto}

/* paste-import (2026-11-02) */
.paste-import-link{display:block;margin:12px 0 80px;padding:10px 14px;border:1px dashed var(--line,#cfc6e6);border-radius:12px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.raw-detail textarea{width:100%;font-family:inherit}
.raw-detail .back-link{border:0;background:none;padding:0 0 8px;color:inherit;font:inherit;cursor:pointer}
label.check{display:flex;gap:8px;align-items:center;margin:10px 0 4px}
label.check input{width:auto}.raw-detail label:not(.check){display:block;margin:14px 0 4px;font-weight:600}
.raw-detail input:not([type=checkbox]){width:100%;box-sizing:border-box}
.raw-detail textarea{box-sizing:border-box}
.raw-detail label.check{display:flex}
.raw-detail input[type=checkbox],#pasteImportDialog input[type=checkbox]{accent-color:#5b45c6}.dialog-heading .heading-actions{display:flex;gap:8px;align-items:center}
.raw-detail .raw-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.create-choices{display:grid;gap:12px}
.create-choice{display:grid;gap:4px;text-align:left;padding:16px;border:1px solid var(--line,#cfc6e6);border-radius:14px;background:transparent;color:inherit;font:inherit;cursor:pointer}
.create-choice span{font-size:.9em;opacity:.8}