/* 뚝딱이 웹앱 — 가게에서 폰으로 쓰는 화면. 손가락 기준으로 크게. */

:root{
  --paper:#FAFAF7;
  --card:#FFFFFF;
  --ink:#1B211D;
  --ink-soft:#5E6B63;
  --ink-faint:#8A968E;
  --rule:#E1E5DF;
  --green:#2F6B4F;
  --green-dark:#245740;
  --green-wash:#EDF4EF;
  --amber:#9A6B1F;
  --amber-wash:#F8F1E2;
  --red:#AC4325;
  --red-wash:#FAEEEA;
  --radius:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#12160F; --card:#191E18; --ink:#E7EDE6; --ink-soft:#A3B0A6;
    --ink-faint:#78857B; --rule:#2C332B; --green:#7FC79C; --green-dark:#9BD8B3;
    --green-wash:#1B2A21; --amber:#D6A75C; --amber-wash:#2A2416;
    --red:#E38063; --red-wash:#2C1B16;
  }
}
:root[data-theme="dark"]{
  --paper:#12160F; --card:#191E18; --ink:#E7EDE6; --ink-soft:#A3B0A6;
  --ink-faint:#78857B; --rule:#2C332B; --green:#7FC79C; --green-dark:#9BD8B3;
  --green-wash:#1B2A21; --amber:#D6A75C; --amber-wash:#2A2416;
  --red:#E38063; --red-wash:#2C1B16;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:34rem;margin:0 auto;padding:0 1rem 4rem}
h1,h2,h3{margin:0;line-height:1.35;text-wrap:balance}
h1{font-size:1.35rem;font-weight:700}
h2{font-size:1.1rem;font-weight:700}
h3{font-size:.95rem;font-weight:700}
p{margin:0}

/* 헤더 */
header{
  position:sticky;top:0;z-index:10;background:var(--card);
  border-bottom:1px solid var(--rule);
}
.bar{
  max-width:34rem;margin:0 auto;padding:.75rem 1rem;
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;
}
.brand{display:flex;align-items:center;gap:.45rem;font-weight:700}
.brand .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--green)}
.bar-right{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--ink-soft)}
.pill{
  background:var(--green-wash);color:var(--green);border-radius:999px;
  padding:.15rem .6rem;font-size:.78rem;font-weight:600;white-space:nowrap;
}

/* 카드 */
.card{
  background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);
  padding:1.15rem;margin-top:1rem;
}
.card > * + *{margin-top:.85rem}
.muted{color:var(--ink-soft);font-size:.88rem}
.faint{color:var(--ink-faint);font-size:.82rem}

/* 입력 */
label{display:block;font-size:.86rem;font-weight:600;margin-bottom:.35rem}
input[type=text],textarea,select{
  width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:10px;padding:.7rem .8rem;
}
textarea{min-height:7rem;resize:vertical;line-height:1.65}
input:focus,textarea:focus,select:focus{outline:2px solid var(--green);outline-offset:1px}
.row{display:flex;gap:.6rem}
.row > *{flex:1;min-width:0}

/* 버튼 — 폰에서 누르기 좋게 */
button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid transparent;
  padding:.8rem 1rem;font-weight:600;font-size:1rem;width:100%}
button:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.btn-primary{background:var(--green);color:#fff}
:root[data-theme="dark"] .btn-primary,
:root:not([data-theme="light"]) .btn-primary{color:#12160F}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) .btn-primary{color:#fff}}
.btn-primary:disabled{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)}
.btn-sm{padding:.5rem .7rem;font-size:.85rem;width:auto}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap}
.btn-row > button,.btn-row > a{flex:1 1 8rem}

a.btn{
  display:inline-block;text-align:center;text-decoration:none;
  border-radius:10px;border:1px solid var(--rule);color:var(--ink);
  padding:.8rem 1rem;font-weight:600;
}

/* 사진 고르기 */
.photo-pick{
  border:2px dashed var(--rule);border-radius:var(--radius);padding:1.4rem 1rem;
  text-align:center;color:var(--ink-soft);cursor:pointer;background:var(--paper);
}
.photo-pick:hover{border-color:var(--green);color:var(--green)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(4.5rem,1fr));gap:.5rem}
.thumbs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;border:1px solid var(--rule)}
.thumb{position:relative}
.thumb .n{
  position:absolute;left:.25rem;top:.25rem;background:rgba(0,0,0,.62);color:#fff;
  border-radius:5px;font-size:.68rem;padding:.05rem .3rem;font-weight:600;
}

/* 상태 */
.status{display:flex;align-items:center;gap:.7rem}
.spinner{
  width:1.15rem;height:1.15rem;border-radius:50%;flex:none;
  border:2px solid var(--rule);border-top-color:var(--green);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation:none}}

.note{border-radius:10px;padding:.75rem .9rem;font-size:.88rem;line-height:1.65}
.note-warn{background:var(--amber-wash);color:var(--ink);border:1px solid var(--rule)}
.note-err{background:var(--red-wash);color:var(--ink);border:1px solid var(--rule)}
.note-ok{background:var(--green-wash);color:var(--ink);border:1px solid var(--rule)}

/* 결과 */
.result-body{
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:.9rem;white-space:pre-wrap;word-break:break-word;font-size:.93rem;
  max-height:22rem;overflow-y:auto;line-height:1.8;
}
.tags{display:flex;flex-wrap:wrap;gap:.35rem}
.tag{background:var(--green-wash);color:var(--green);border-radius:999px;
  padding:.1rem .55rem;font-size:.8rem;font-weight:600}
.photo-list{display:flex;flex-direction:column;gap:.5rem}
.photo-row{
  display:flex;align-items:center;gap:.7rem;border:1px solid var(--rule);
  border-radius:10px;padding:.5rem;
}
.photo-row img{width:3rem;height:3rem;object-fit:cover;border-radius:7px;flex:none}
.photo-row .name{flex:1;font-size:.86rem;color:var(--ink-soft)}

/* 최근 작업 */
.job-item{
  display:flex;align-items:center;gap:.7rem;padding:.6rem 0;
  border-top:1px solid var(--rule);cursor:pointer;
}
.job-item:first-child{border-top:none}
.job-item .t{flex:1;min-width:0;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.job-item .s{font-size:.76rem;color:var(--ink-faint);white-space:nowrap}

/* 로그인 코드 */
.code-box{
  background:var(--green-wash);border:1px solid var(--rule);border-radius:10px;
  padding:.9rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.95rem;word-break:break-all;user-select:all;line-height:1.6;
}

/* 광고 자리 */
.ad-slot{margin-top:1rem;min-height:0}
.ad-slot:empty{display:none}

.hidden{display:none !important}
footer{max-width:34rem;margin:0 auto;padding:1.5rem 1rem 3rem;color:var(--ink-faint);font-size:.78rem;line-height:1.7}

/* ── 설정 화면: 잠긴 유료 항목 ─────────────────────────────────────── */
.lock-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.lock-badge{
  background:var(--amber-wash);color:var(--amber);border-radius:999px;
  padding:.15rem .6rem;font-size:.75rem;font-weight:600;white-space:nowrap;
}
/* 잠긴 카드는 흐릿하게 + 조작 불가. 값은 보이게 둔다(뭘 사면 되는지 알아야 하니까). */
.locked{position:relative;opacity:.55}
.locked input,.locked textarea,.locked select,.locked button{pointer-events:none}
.locked .lock-badge{opacity:1}

.ref-list{display:flex;flex-direction:column;gap:.5rem}
.ref-item{
  display:flex;align-items:flex-start;gap:.6rem;border:1px solid var(--rule);
  border-radius:10px;padding:.6rem .7rem;font-size:.85rem;line-height:1.6;
}
.ref-item .txt{flex:1;min-width:0;color:var(--ink-soft);word-break:break-word}
.ref-item button{width:auto;flex:none;padding:.3rem .6rem;font-size:.8rem}

/* 토글 목록 */
.toggles{display:flex;flex-direction:column;gap:.55rem}
.tog{display:flex;align-items:flex-start;gap:.6rem;font-weight:500;font-size:.9rem;cursor:pointer;margin:0}
.tog input{width:1.1rem;height:1.1rem;margin-top:.2rem;flex:none;accent-color:var(--green)}
.card .row input[type=text]{min-width:0}

/* 요금표 */
.pricing{display:flex;flex-direction:column;gap:.5rem}
.plan{display:grid;grid-template-columns:1fr auto;gap:.2rem .8rem;border:1px solid var(--rule);border-radius:10px;padding:.7rem .9rem}
.plan.mine{border-color:var(--green);background:var(--green-wash)}
.plan .pn{font-weight:700}
.plan .pp{font-weight:700;text-align:right;white-space:nowrap}
.plan .pd{grid-column:1/-1;font-size:.84rem;color:var(--ink-soft)}
/* 올리기 절차 */
.steps{margin:0;padding-left:1.3rem;font-size:.92rem;line-height:1.8}
.steps li{margin:.1rem 0}
.more summary{cursor:pointer;color:var(--ink-soft);font-size:.9rem}
/* 안내 글자 최소 크기(50대 폰) */
.faint{font-size:.9rem}
.muted{font-size:.93rem}