/* ─────────────────────────────────────────────────────────────
   띠링 커넥트 (크리에이터 페이지) 디자인
   - 색·글꼴·모서리 같은 디자인 값은 맨 위 "1. 디자인 값"에만 있다. 여기만 고치면 페이지 전체가 바뀐다.
   - 설명서: DESIGN_CONNECT.md
   - 이 파일을 고치면 creator.html 안의 connect.css?v=... 버전도 바꿔야 휴대폰이 새 파일을 받는다.
───────────────────────────────────────────────────────────── */

/* ── 1. 디자인 값 (밝은 화면) ── */
:root{
  /* 바탕·글자 */
  --bg:#FFFFFF;          /* 페이지 바탕 */
  --bg-2:#F6F7F7;        /* 옅은 회색 구역 (기능 소개, 계좌 안내 등) */
  --bg-3:#EEF0F0;        /* 칩·입력칸 바탕 */
  --ink:#1A1B1C;         /* 기본 글자 */
  --muted:#86898C;       /* 설명 글자 */
  --line:#E4E6E7;        /* 구분선·테두리 */

  /* 포인트 색 (감귤 주황): 버튼, 강조 글자, 진행 표시 */
  --accent:#F2711C;
  --accent-ink:#FFFFFF;  /* 포인트 색 버튼 위 글자 */
  --accent-soft:#FFF1E6; /* 포인트 색 연한 바탕 (칩) */

  /* 상태 색 */
  --ok:#1E9E5A;   --ok-soft:#E5F5EC;    /* 판매 중, 입금 확인 */
  --info:#2F6FD1; --info-soft:#E8F0FC;  /* 송금함·확인 중 */
  --bad:#E0483E;  --bad-soft:#FDECEA;   /* 반려, 오류 */

  /* 글꼴 */
  --font:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;  /* 금액·번호 */

  /* 모양 */
  --radius:9px;          /* 카드·상자 모서리 */
  --radius-sm:6px;       /* 버튼·입력칸 모서리 */
  --page-width:960px;    /* 내용 최대 폭 */
  --title-size:26px;     /* 구역 제목 */
  --hero-size:36px;      /* 첫 화면 큰 제목 */
}

/* ── 1-1. 디자인 값 (어두운 화면) ── */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#141516; --bg-2:#1B1D1E; --bg-3:#232627; --ink:#EDEEEF; --muted:#9A9DA0; --line:#2C2F31;
    --accent:#FF8A3D; --accent-ink:#1A0E05; --accent-soft:#3A2414;
    --ok:#4CC488; --ok-soft:#173326; --info:#7FA9F0; --info-soft:#1A2740; --bad:#FF7A70; --bad-soft:#3D1D1A;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#141516; --bg-2:#1B1D1E; --bg-3:#232627; --ink:#EDEEEF; --muted:#9A9DA0; --line:#2C2F31;
  --accent:#FF8A3D; --accent-ink:#1A0E05; --accent-soft:#3A2414;
  --ok:#4CC488; --ok-soft:#173326; --info:#7FA9F0; --info-soft:#1A2740; --bad:#FF7A70; --bad-soft:#3D1D1A;
}

/* ── 2. 기본 ── */
*{box-sizing:border-box;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.6; padding:0 16px;}
h1,h2,h3{line-height:1.3; margin:0; font-weight:700; text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
button{font:inherit; cursor:pointer;}
button:focus-visible, input:focus-visible, a:focus-visible, select:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.wrap{max-width:var(--page-width); margin:0 auto;}
.num, .mono{font-family:var(--mono); font-variant-numeric:tabular-nums;}
.num{white-space:nowrap;}
[hidden]{display:none!important;}

/* ── 3. 맨 위 줄 ── */
header.top{position:sticky; top:env(safe-area-inset-top, 0px); z-index:5; background:var(--bg); border-bottom:1px solid var(--line); margin:0 -16px; padding:0 16px;}
.top-inner{max-width:var(--page-width); margin:0 auto; display:flex; align-items:center; gap:14px; min-height:58px; flex-wrap:wrap;}
.logo{font-weight:700; font-size:16px; letter-spacing:.02em; white-space:nowrap; text-decoration:none;}
.logo b{color:var(--accent);}
nav.tabs{display:flex; gap:2px; flex-wrap:wrap; flex:1;}
nav.tabs button{border:0; background:none; color:var(--muted); font-weight:500; padding:8px 10px; font-size:16px; border-bottom:2px solid transparent;}
nav.tabs button[aria-selected="true"]{color:var(--ink); font-weight:700; border-bottom-color:var(--ink);}
.top-right{display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap;}
.top-link{font-size:16px; color:var(--muted); font-weight:500;}

/* ── 4. 공통 부품 ── */
main section.view{padding-block:32px 72px; display:flex; flex-direction:column; gap:44px;}
.sec{display:flex; flex-direction:column; gap:14px;}
.label{font-size:16px; font-weight:700; color:var(--accent);}
.sec-title{font-size:var(--title-size); margin-top:4px;}
.desc{font-size:16px; color:var(--muted); max-width:62ch;}
.head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap;}

.btn{border:0; border-radius:var(--radius-sm); padding:12px 20px; font-weight:700; background:var(--accent); color:var(--accent-ink);}
.btn.line{background:var(--bg); color:var(--ink); border:1px solid var(--line);}
.btn.sm{padding:7px 12px; font-size:16px;}
.btn.block{width:100%;}
.btn:disabled{opacity:.45; cursor:default;}

.chip{display:inline-block; font-size:16px; font-weight:500; padding:3px 10px; border-radius:999px; background:var(--bg-3); color:var(--ink); white-space:nowrap;}
.chip.accent{background:var(--accent-soft); color:var(--accent);}
.chip.ok{background:var(--ok-soft); color:var(--ok);}
.chip.info{background:var(--info-soft); color:var(--info);}
.chip.bad{background:var(--bad-soft); color:var(--bad);}
.chip.gray{color:var(--muted);}

.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:16px; font-weight:500; color:var(--muted);}
.field input, .field textarea{width:100%; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:var(--radius-sm); padding:11px 12px; font:inherit; font-size:16px;}
.check{display:flex; gap:8px; align-items:flex-start; font-size:16px; color:var(--muted);}
.check input{width:18px; height:18px; margin:2px 0 0; flex:none;}
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.msg{font-size:16px; border-radius:var(--radius-sm); padding:10px 12px;}
.msg.ok{background:var(--ok-soft); color:var(--ok);}
.msg.bad{background:var(--bad-soft); color:var(--bad); font-weight:500;}
.empty{color:var(--muted); font-size:16px; padding:14px 0;}
.box{border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;}
.box-head{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap;}
.box-head h3{font-size:16px;}
.box-head span{font-size:16px; color:var(--muted);}

/* ── 5. 첫 화면 (로그인 전) ── */
.hero{display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:center;}
.hero .kicker{font-size:16px; font-weight:700; color:var(--muted);}
.hero h1{font-size:clamp(28px, 4vw, var(--hero-size)); margin:10px 0 12px;}
.hero h1 em{font-style:normal; color:var(--accent);}
.hero p{font-size:16px; color:var(--muted);}
.login{border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:12px; background:var(--bg);}
.login h2{font-size:18px;}
.login .foot{display:flex; justify-content:space-between; font-size:16px; color:var(--muted); gap:8px; flex-wrap:wrap;}
.login .foot a, .login .foot button{color:var(--ink); font-weight:700; background:none; border:0; padding:0; text-decoration:underline;}

ol.steps4{display:grid; grid-template-columns:repeat(4, 1fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:0; padding:0;}
.steps4 li{list-style:none; padding:20px 18px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:6px;}
.steps4 li:last-child{border-right:0;}
.steps4 .n{font-family:var(--mono); font-weight:600; font-size:22px; color:var(--accent);}
.steps4 b{font-size:16px;}
.steps4 span{font-size:16px; color:var(--muted);}

.way-tabs{display:flex; gap:24px; border-bottom:1px solid var(--line);}
.way-tabs button{border:0; background:none; padding:10px 0; font-size:16px; font-weight:500; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px;}
.way-tabs button[aria-selected="true"]{color:var(--ink); font-weight:700; border-bottom-color:var(--accent);}
.way{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; padding-top:8px;}
.way h3{font-size:22px; margin:8px 0 10px;}
.tags{display:flex; gap:10px; flex-wrap:wrap; font-size:16px; color:var(--muted);}
.flow{background:var(--bg-2); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:10px;}
.flow-row{display:flex; align-items:center; gap:10px; font-size:16px;}
.flow-row .dot{width:26px; height:26px; border-radius:50%; background:var(--bg); border:1px solid var(--line); display:grid; place-items:center; font-family:var(--mono); font-size:16px; flex:none;}
.flow-row.money{font-weight:700;}
.flow-row.money .dot{background:var(--accent); color:var(--accent-ink); border-color:var(--accent);}

.features{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;}
.feature{background:var(--bg-2); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:6px;}
.feature b{font-size:16px;}
.feature span{font-size:16px; color:var(--muted);}

/* ── 6. 상품 카드 (진열대·상품 찾기) ── */
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(208px, 1fr)); gap:14px;}
.card{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; background:var(--bg);}
.thumb{aspect-ratio:4 / 3; max-width:100%; display:flex; align-items:flex-end; padding:12px; color:#fff; font-weight:700; font-size:18px; word-break:keep-all;}
.card .body{padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1;}
.card .farm{font-size:16px; color:var(--muted);}
.card .name{font-size:16px; font-weight:700;}
.card .row{display:flex; justify-content:space-between; gap:8px; font-size:16px; color:var(--muted); margin-top:4px;}
.card .row strong{color:var(--ink); font-family:var(--mono); font-size:16px;}
.card .act{margin-top:10px; display:flex; flex-direction:column; gap:6px;}
.card .note{font-size:16px; color:var(--bad);}
.pick-check{display:flex; align-items:center; gap:8px; font-size:16px; font-weight:500; cursor:pointer; padding:4px 0;}
.pick-check input{width:18px; height:18px; accent-color:var(--accent);}
.pick-bar{position:sticky; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:5; display:flex; justify-content:flex-end; gap:8px; padding:10px 12px; margin-top:14px; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); box-shadow:0 4px 14px rgba(0,0,0,.06);}
.pick-bar[hidden]{display:none;}
/* 농가 카드 (진열대 첫 화면: 농가 → 누르면 상품) */
button.card{font:inherit; color:inherit; text-align:left; padding:0; cursor:pointer;}
button.card:hover{border-color:var(--accent);}
.card .more{margin-top:8px; font-size:16px; font-weight:700; color:var(--accent);}
.farm-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.back{border:0; background:none; color:var(--muted); font-weight:500; padding:4px 0; font-size:16px;}

/* ── 7. 내 홈 ── */
.stats{display:grid; grid-template-columns:repeat(4, 1fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.stat{padding:16px 18px; border-right:1px solid var(--line);}
.stat:last-child{border-right:0;}
.stat .l{font-size:16px; color:var(--muted);}
.stat .v{font-family:var(--mono); font-size:22px; font-weight:600;}
.stat .v small{font-family:var(--font); font-size:16px; color:var(--muted); font-weight:400; margin-left:3px;}
.two{display:grid; grid-template-columns:1.2fr 1fr; gap:16px;}
.li{display:grid; grid-template-columns:1fr auto; gap:2px 12px; padding:12px 0; border-bottom:1px solid var(--line); align-items:center;}
.li:last-child{border-bottom:0;}
.li .t{font-weight:700; font-size:16px;}
.li .m{font-size:16px; color:var(--muted); grid-column:1;}
.li .r{grid-row:1 / span 2; grid-column:2; display:flex; gap:6px; align-items:center; justify-content:flex-end; flex-wrap:wrap;}
.linkbox{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.linkbox code{flex:1; min-width:0; font-family:var(--mono); font-size:16px; background:var(--bg-2); padding:9px 12px; border-radius:var(--radius-sm); word-break:break-all;}

/* ── 8. 농장 고르기 ── */
.farm-panel{border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:flex; flex-direction:column; gap:10px; background:var(--bg);}
.farm-list{display:flex; gap:8px; flex-wrap:wrap;}
.farm-list button{border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px; padding:7px 14px; font-weight:500;}
.farm-list button[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:700;}

/* ── 9. 주문 올리기·묶음 ── */
.upload{border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; display:flex; flex-direction:column; gap:12px;}
.upload input[type=file]{font-size:16px;}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-sm);}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:16px;}
th, td{text-align:left; padding:8px; border-bottom:1px solid var(--line); vertical-align:top;}
th{font-size:16px; color:var(--muted); background:var(--bg-2); font-weight:500;}
tr.err td{background:var(--bad-soft);}
.note-err{font-size:16px; color:var(--bad); font-weight:500;}
.note-warn{font-size:16px; color:var(--info);}
.right{text-align:right;}
.batches{display:flex; flex-direction:column; gap:12px;}
.batch{border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; display:grid; grid-template-columns:1fr auto; gap:10px 16px; position:relative;}
.batch::before{content:""; position:absolute; left:-1px; top:14px; bottom:14px; width:3px; border-radius:2px; background:var(--line);}
.batch[data-state="remit_pending"]::before{background:var(--accent);}
.batch[data-state="remitted"]::before{background:var(--info);}
.batch[data-state="confirmed"]::before{background:var(--ok);}
.batch[data-state="rejected"]::before{background:var(--bad);}
.b-title{font-weight:700;}
.b-meta{font-size:16px; color:var(--muted);}
.b-amt{text-align:right;}
.b-amt .big{font-family:var(--mono); font-size:19px; font-weight:600;}
.b-body{grid-column:1 / -1; display:flex; flex-direction:column; gap:10px;}
.reason{background:var(--bad-soft); color:var(--bad); border-radius:var(--radius-sm); padding:10px 12px; font-size:16px; font-weight:500;}
.btn-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.pay{background:var(--bg-2); border-radius:var(--radius-sm); padding:12px 14px; display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; font-size:16px; margin:0;}
.pay dt{color:var(--muted);}
.pay dd{margin:0; font-weight:700; word-break:break-all;}
.pay dd.key{color:var(--accent);}
.remit{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.remit label{font-size:16px; color:var(--muted);}
.remit input{border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:var(--radius-sm); padding:8px 10px; font-family:var(--mono); font-size:16px; width:150px;}

/* ── 9-1. 바로 입력 (화면에서 주문 적기) ── */
.direct-rows{display:flex; flex-direction:column; gap:10px;}
.direct-row{border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; position:relative;}
.direct-row .no{grid-column:1 / -1; font-size:16px; font-weight:700; color:var(--muted);}
.direct-row .full{grid-column:1 / -1;}
.direct-row .half{grid-column:span 2;}
.direct-row input, .direct-row select{width:100%; border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:var(--radius-sm); padding:9px 10px; font:inherit; font-size:16px;}
.direct-row .rm{position:absolute; top:6px; right:6px; border:0; background:none; color:var(--muted); font-size:16px; padding:4px 8px;}
.direct-row .opt{color:var(--muted);}
.direct-row .extra{grid-column:1 / -1; display:grid; grid-template-columns:auto minmax(0, 1fr) 72px auto; gap:8px; align-items:center;}
.direct-row .extra .plus{color:var(--accent); font-weight:700;}
.direct-row .add-item{grid-column:1 / -1; justify-self:start; border:1px dashed var(--line); background:none; color:var(--accent); font:inherit; font-size:16px; font-weight:500; padding:6px 10px; border-radius:var(--radius-sm);}

.direct-row .addr{display:flex; gap:6px;}
.direct-row .addr input{flex:1; min-width:0;}
.direct-row .addr .btn{white-space:nowrap;}
/* 주소 찾기로 고른 주소: 회색 고정칸 + ✕, 아래 상세주소 */
.direct-row .addr-wrap{display:flex; flex-direction:column; gap:6px;}
.direct-row .addr-fixed{position:relative;}
.dd-figma-page .direct-row div input.locked[readonly],
.direct-row input.locked[readonly]{background:var(--bg-3); color:var(--muted); border-color:var(--line); cursor:default; padding-right:44px;}
.direct-row .addr-clear{position:absolute; top:50%; right:6px; transform:translateY(-50%); width:32px; height:32px; border:0; border-radius:999px; background:none; color:var(--muted); font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;}
.direct-row .addr-clear:hover{background:var(--line); color:var(--ink);}
.direct-row .pick-btn{margin-left:8px; border:0; background:none; color:var(--accent); font:inherit; font-size:16px; font-weight:500; padding:0;}
.direct-row .pick{grid-column:1 / -1; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px; background:var(--bg-2);}
.direct-row .pick input{margin-bottom:6px;}
.pick-list{display:flex; flex-direction:column; max-height:240px; overflow:auto;}
.pick-item{text-align:left; border:0; border-bottom:1px solid var(--line); background:none; color:var(--ink); font:inherit; font-size:16px; padding:8px 4px;}
.pick-item:last-child{border-bottom:0;}
.pick-item span{color:var(--muted);}
.pick-item small{display:block; color:var(--muted); font-size:16px; margin-top:2px;}

/* ── 9-3. 주소 찾기 창 ── */
.addr-layer{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:16px;}
.addr-panel{background:var(--bg); width:100%; max-width:520px; height:min(560px, 85vh); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.addr-head{display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); color:var(--ink);}
.addr-head button{border:0; background:none; color:var(--muted); font:inherit; font-size:16px; padding:4px 6px;}
.addr-frame{flex:1; min-height:0;}

/* ── 9-2. 새 소식 표시 ── */
.dot{display:inline-block; min-width:18px; padding:0 5px; margin-left:5px; border-radius:999px; background:var(--bad); color:#fff; font-size:16px; font-weight:700; line-height:18px; text-align:center; vertical-align:2px;}
.dot[hidden]{display:none;}
.li.read .t{font-weight:500; color:var(--muted);}

/* ── 10. 휴대폰 화면 ── */
@media (max-width:820px){
  .hero, .way, .two{grid-template-columns:1fr;}
  ol.steps4{grid-template-columns:1fr 1fr;}
  .steps4 li:nth-child(2){border-right:0;}
  .steps4 li:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .features{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .stat:nth-child(2){border-right:0;}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .direct-row{grid-template-columns:1fr 1fr;}
  .direct-row .half{grid-column:1 / -1;}
}