/* OX 팩토리 — 「만들어 보기」 → 「내 걸로 하기」(대표님 T22 · 10/28) · 🎨 디자인 #1 · 클래스 모두 ty-
   근거 docs/market/try-then-own.md(📈 #4 추천안 · 🔐 #2 약관 1번) · 짝 파일 try.js · 미리보기 주소 안의 띠는 band.js
   설명 문장 없음 · 단추 = 동사 + 코인 · 주황 단추는 화면에 늘 하나 */

.ty{max-width:440px;margin:0 auto;background:#fff;border-radius:26px;padding:16px 16px 18px;box-shadow:0 1px 0 var(--line,#E4DED3),0 0 0 1px rgba(28,28,30,.04)}
.ty-name{margin:14px 2px 12px;font-size:25px;font-weight:850;letter-spacing:-.035em;line-height:1.25;color:var(--ink,#1D1F23);word-break:keep-all}

/* ① 미리보기 그림 — 따뜻한 바탕 위 휴대폰 한 대, 화면 맨 위에 띠 · 아래 「▶ 써 보기」 */
.ty-pv{position:relative;display:block;width:100%;height:330px;border:0;padding:0;border-radius:20px;overflow:hidden;cursor:pointer;
 background:radial-gradient(120% 90% at 50% 0%,#FBF8F2 0%,#F1EADF 70%,#EADFCF 100%)}
.ty-ph{position:absolute;left:50%;top:22px;width:208px;height:420px;transform:translateX(-50%);border-radius:34px;background:#1C1C1E;padding:7px;
 box-shadow:0 24px 40px -22px rgba(60,40,10,.55),0 2px 0 rgba(255,255,255,.4) inset}
.ty-scr{position:relative;display:block;width:100%;height:100%;border-radius:27px;overflow:hidden;background:#fff}
.ty-scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0}
.ty-go{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 18px 0 14px;border-radius:99px;
 background:#fff;color:var(--ink,#1D1F23);font-size:16px;font-weight:850;letter-spacing:-.01em;box-shadow:0 10px 24px -10px rgba(40,25,5,.45),0 0 0 1px rgba(28,28,30,.06);white-space:nowrap}
.ty-go i{width:24px;height:24px;border-radius:50%;background:var(--o,#FF5A1F);display:grid;place-items:center}
.ty-go i::before{content:'';margin-left:2px;border-left:8px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.ty-pv:active .ty-go{transform:translateX(-50%) scale(.97)}

/* 띠 — 썸네일 · 보기 창 · 미리보기 주소(band.js)가 같은 모양: 그래파이트 · 「미리보기 · 예시 자료」 · 「N일 남음」 칩 */
.ty-band{display:flex;align-items:center;gap:7px;background:#1C1C1E;color:#fff;font-size:12.5px;font-weight:750;letter-spacing:-.01em;white-space:nowrap}
.ty-scr .ty-band{position:absolute;inset:0 0 auto 0;z-index:2;height:24px;padding:0 9px;font-size:9.5px;gap:5px}
.ty-band b{font-weight:800}
.ty-band .ty-ox{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--o,#FF5A1F);font-size:9px;font-weight:900;letter-spacing:-.04em;color:#fff}
.ty-scr .ty-band .ty-ox{width:14px;height:14px;border-radius:4px;font-size:6.5px}
.ty-d{flex:none;margin-left:auto;padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font-size:.92em;font-weight:800;font-variant-numeric:tabular-nums}
.ty-d.ty-soon{background:var(--o,#FF5A1F)}
.ty-d.ty-end{background:#5B5F66}
.ty-scr .ty-band .ty-d{padding:1px 6px}

/* 만드는 중 · 대기 — 고른 시안 그림이 흐려진 채 빛이 한 줄 지나가고, 로봇이 모서리에서 만든다 */
.ty-pv.ty-mk{cursor:default}
.ty-pv.ty-mk>img.ty-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.55) brightness(1.06);opacity:.55}
.ty-pv.ty-mk::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);background-size:250% 100%;animation:ty-scan 2.4s linear infinite}
.ty-pv.ty-wait::after{animation-duration:4.5s;opacity:.6}
.ty-bot{position:absolute;right:6px;bottom:-4px;width:150px;height:150px;object-fit:contain;z-index:2;animation:ty-bob 2.2s ease-in-out infinite}
.ty-pv.ty-wait .ty-bot{animation:none;filter:saturate(.8)}
@keyframes ty-scan{from{background-position:130% 0}to{background-position:-130% 0}}
@keyframes ty-bob{50%{transform:translateY(-5px) rotate(-2deg)}}
/* 끝남 — 그림 회색 */
.ty-pv.ty-off{cursor:default}
.ty-pv.ty-off .ty-ph{filter:grayscale(1) opacity(.55)}

/* 상태 줄 — rq-q 와 같은 모양(대기 명단과 한 식구) */
.ty-q{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:13px 14px;border-radius:15px;background:#F4F1EB;font-size:18px;font-weight:850;letter-spacing:-.02em;color:var(--ink,#1D1F23)}
.ty-q.ty-on{background:#FFF0E7;color:var(--o,#FF5A1F)}
.ty-q.ty-on em{width:10px;height:10px;border-radius:50%;background:currentColor;flex:none;animation:ty-blink 1.2s ease-in-out infinite}
.ty-q.ty-soft{font-size:16px;font-weight:800;color:#5B5F66}
.ty-line{display:inline-flex;align-items:center;gap:4px;flex:none}
.ty-line i{width:12px;height:12px;border-radius:50%;background:#CFC8BC}
.ty-line u{text-decoration:none;font-size:13px;font-weight:900;color:#A9A297;margin:0 1px}
.ty-line b{width:16px;height:16px;border-radius:50%;background:var(--o,#FF5A1F);box-shadow:0 0 0 3px rgba(255,90,31,.18)}
@keyframes ty-blink{50%{opacity:.25}}
.ty-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:2px 0 4px}
.ty-steps span{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:750;color:#A9A297;text-align:center}
.ty-steps i{display:block;height:8px;border-radius:99px;background:#F1ECE3}
.ty-steps .ok{color:#5B5F66}.ty-steps .ok i{background:var(--x,#1C1C1E)}
.ty-steps .on{color:var(--o,#FF5A1F);font-weight:850}.ty-steps .on i{background:var(--o,#FF5A1F);animation:ty-blink 1.6s ease-in-out infinite}

/* 단추 — 주황 하나 + 흰 하나 · 코인 칩(rq-cc 와 같은 모양) */
.ty-btn{display:flex;align-items:center;justify-content:center;gap:2px;width:100%;height:60px;border:0;border-radius:17px;background:var(--o,#FF5A1F);color:#fff;font:inherit;font-size:18.5px;font-weight:850;letter-spacing:-.01em;cursor:pointer;
 box-shadow:0 12px 26px -14px rgba(255,90,31,.8);transition:filter .15s,transform .1s}
.ty-btn:active{filter:brightness(.94);transform:scale(.99)}
.ty-btn:disabled{opacity:.7}
.ty-btn.ty-w{height:54px;margin-top:10px;background:#fff;color:var(--ink,#1D1F23);font-size:17px;font-weight:800;box-shadow:inset 0 0 0 1.5px var(--line,#E4DED3)}
.ty-btn.ty-w:active{background:#FAF8F4}
.ty-btn i.ty-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:ty-spin .7s linear infinite}
@keyframes ty-spin{to{transform:rotate(360deg)}}
.ty-cc{display:inline-flex;align-items:center;gap:4px;margin-left:8px;padding:2px 9px 2px 4px;border-radius:99px;background:rgba(127,127,127,.16);font-size:.84em;font-weight:850;line-height:1.45;font-variant-numeric:tabular-nums}
.ty-cc::before{content:'';width:1em;height:1em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF1A8,#F2B527 55%,#B87A06)}
.ty-btn:not(.ty-w) .ty-cc{background:rgba(255,255,255,.24)}
.ty-nb{margin:8px 0 0;text-align:center;font-size:13px;line-height:1.4;color:var(--sub,#5B5F66)}
.ty-cx{display:block;margin:10px auto -4px;border:0;background:none;padding:6px 10px;font:inherit;font-size:14px;font-weight:700;color:#A9A297;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#DDD6CA}
.ty-sure{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:12px;border-radius:15px;background:#F7F4EE;animation:ty-pop .35s cubic-bezier(.3,1.4,.5,1) both}
.ty-sure span{flex:1 0 100%;font-size:15.5px;font-weight:800;color:var(--ink,#1D1F23);margin:0 2px 2px}
.ty-sure button{flex:1;height:46px;border:0;border-radius:14px;font:inherit;font-size:15.5px;font-weight:800;cursor:pointer;background:#fff;color:var(--ink,#1D1F23);box-shadow:inset 0 0 0 1.5px #E4DED3}
.ty-sure button.ty-yes{background:var(--x,#1C1C1E);color:#fff;box-shadow:none}
@keyframes ty-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}

/* 만들기 전 값 줄 — 「내 걸로 하기 🪙2,000 · 매달 운영 🪙200」(작게, 회색) */
.ty-next{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px 0;margin:12px 0 0;font-size:14.5px;font-weight:750;color:#6B6F76}
.ty-next .ty-cc{margin-left:5px;background:#F4F1EB;color:#3E4148}
.ty-next span{display:inline-flex;align-items:center;margin-left:8px}
.ty-next+.ty-nb{margin-top:6px}
/* 더 생기는 것 — 「내 걸로 하기」 단추 바로 아래 낱말 목록(🔐 #2: 빼면 안 됨 · 시작 뒤 환불 거절의 조건) */
.ty-adds{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;margin:10px 0 0;padding:0;list-style:none}
.ty-adds li{display:inline-flex;align-items:center;gap:2px;height:28px;padding:0 9px 0 7px;border-radius:99px;background:#F4F1EB;font-size:13px;font-weight:750;color:#3E4148;white-space:nowrap}
.ty-adds li::before{content:'+';color:var(--o,#FF5A1F);font-size:14px;font-weight:900;line-height:1}
.ty-sh .ty-adds{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 16px}
.ty-sh .ty-adds li{height:44px;gap:7px;border-radius:13px;padding:0 10px;font-size:15px;font-weight:800;color:var(--ink,#1D1F23);background:#F7F4EE}
.ty-sh .ty-adds li::before{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--o,#FF5A1F);color:#fff;font-size:16px}
.ty-sh .ty-adds li:last-child:nth-child(odd){grid-column:1 / -1}

/* 코인 줄 — 넉넉하면 「2,030 → 80」, 모자라면 막대 + 「1,720 더」 */
.ty-coins{display:flex;align-items:center;gap:7px;margin:0 2px 14px;font-size:16px;font-weight:800;color:#8D867B;font-variant-numeric:tabular-nums}
.ty-coins b{font-size:18px;font-weight:900;color:var(--ink,#1D1F23)}
.ty-coins .ty-ar{color:#C9C2B6;font-weight:900}
.ty-coin{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE58A,#F2B527 60%,#C98A0B);box-shadow:inset 0 0 0 1.5px rgba(150,95,0,.35);flex:none}
.ty-more{margin-left:auto;font-style:normal;font-size:13px;font-weight:850;color:var(--o,#FF5A1F);background:#FFF0E7;border-radius:99px;padding:4px 10px}
.ty-bar{position:relative;height:14px;margin:0 0 9px;border-radius:99px;background:#F1ECE3;overflow:hidden}
.ty-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);min-width:14px;border-radius:99px;background:linear-gradient(90deg,#FFD866,#F2B527 55%,#E39A0A);box-shadow:inset 0 -2px 0 rgba(150,95,0,.18)}

/* ② 「내 걸로 하기」 확인 시트(카드 · 보기 창 둘 다 여기로) */
.ty-sh{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.ty-dim{position:absolute;inset:0;background:rgba(20,21,24,.5);opacity:0;transition:opacity .25s}
.ty-sh.ty-in .ty-dim{opacity:1}
.ty-box{position:relative;width:100%;max-width:440px;max-height:94dvh;overflow:auto;background:#fff;border-radius:28px 28px 0 0;padding:14px 18px calc(18px + env(safe-area-inset-bottom));
 transform:translateY(100%);transition:transform .42s cubic-bezier(.2,1,.3,1);box-shadow:0 -10px 40px -18px rgba(0,0,0,.35)}
.ty-sh.ty-in .ty-box{transform:none}
.ty-sh.ty-out .ty-box{transform:translateY(100%);transition:transform .28s cubic-bezier(.5,0,.75,.3)}
.ty-sh.ty-out .ty-dim{opacity:0}
.ty-grab{width:40px;height:5px;border-radius:5px;background:#E6E0D6;margin:0 auto 12px}
.ty-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:50%;background:#F4F1EB;color:#5B5F66;font-size:18px;line-height:36px;cursor:pointer;z-index:2}
.ty-hd{display:flex;align-items:center;gap:12px;margin:2px 44px 16px 0}
.ty-hd img{width:52px;height:52px;border-radius:13px;object-fit:cover;object-position:50% 0;flex:none;box-shadow:0 0 0 1px rgba(28,28,30,.08)}
.ty-hd b{font-size:20px;font-weight:850;letter-spacing:-.03em;color:var(--ink,#1D1F23);line-height:1.25;word-break:keep-all}
.ty-hd span{display:block;margin-top:2px;font-size:13.5px;font-weight:750;color:#8D867B}

/* ③ 보기 창 — 띠(위) · 미리보기(가운데) · 「내 걸로 하기」(아래). 앱 아래 메뉴를 가리지 않게 iframe 은 둘 사이에만 */
.ty-vw{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:#1C1C1E;opacity:0;transform:translateY(16px);transition:opacity .22s,transform .32s cubic-bezier(.2,1,.3,1)}
.ty-vw.ty-in{opacity:1;transform:none}
.ty-vw>.ty-band{flex:none;height:52px;padding:0 6px 0 14px;font-size:14px;gap:9px}
.ty-vw .ty-band .ty-d{margin-left:4px}
.ty-vw .ty-ib{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:none;color:#fff;display:grid;place-items:center;cursor:pointer}
.ty-vw .ty-ib:first-of-type{margin-left:auto}
.ty-vw .ty-ib svg{width:22px;height:22px}
.ty-stage{position:relative;flex:1;min-height:0;display:flex;align-items:stretch;justify-content:center;background:#fff}
.ty-stage iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.ty-seg{display:none}
.ty-foot{flex:none;display:flex;gap:10px;justify-content:center;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -1px 0 #ECE7DE}
.ty-foot .ty-btn{max-width:440px;height:56px}

/* 탭 「제작」 옆 · 내 기획 칩 */
.ty-tag{display:inline-block;margin-left:6px;font-style:normal;font-size:11.5px;font-weight:800;color:#fff;background:var(--o,#FF5A1F);border-radius:99px;padding:2px 7px;vertical-align:2px;letter-spacing:0;position:relative}
.ty-tag.ty-k{background:var(--x,#1C1C1E)}
.ty-tag.ty-g{background:#EEEAE2;color:#5B5F66}
.ty-tag.ty-dot::after{content:'';position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#E5243B;box-shadow:0 0 0 2px #fff}

@media (min-width:861px){
 /* PC — 미리보기가 다 됐을 때는 카드를 넓혀 왼쪽 휴대폰 · 오른쪽 「내 걸로 하기」 */
 .ty.ty-wide{max-width:920px;display:grid;grid-template-columns:1fr 380px;grid-template-rows:repeat(8,auto) 1fr;gap:0 30px;align-items:start;padding:20px}
 .ty.ty-wide>*:not(.ty-pv){grid-column:2}
 .ty.ty-wide .ty-pv{height:540px;grid-column:1;grid-row:1 / span 9}
 .ty.ty-wide .ty-name{padding-top:36px}
 .ty.ty-wide .ty-ph{width:262px;height:530px;top:30px;border-radius:40px;padding:8px}
 .ty.ty-wide .ty-scr{border-radius:32px}
 .ty.ty-wide .ty-scr .ty-band{height:28px;font-size:11px}
 .ty.ty-wide .ty-name{margin:10px 2px 16px;font-size:30px}
 .ty-sh{align-items:center}
 .ty-box{border-radius:28px;padding:18px 22px 22px;transform:translateY(24px) scale(.96);opacity:0;transition:transform .4s cubic-bezier(.2,1.2,.3,1),opacity .2s}
 .ty-sh.ty-in .ty-box{transform:none;opacity:1}
 .ty-sh.ty-out .ty-box{transform:scale(.96);opacity:0}
 .ty-grab{display:none}
 /* PC 보기 창 — 휴대폰 틀 가운데 + 「휴대폰 · PC」 */
 .ty-stage{background:#2A2B2F;align-items:center;padding:18px 0}
 .ty-stage.ty-m iframe{width:390px;height:min(820px,100%);border-radius:28px;box-shadow:0 0 0 9px #111,0 30px 60px -20px rgba(0,0,0,.6)}
 .ty-stage.ty-p{padding:18px 24px}
 .ty-stage.ty-p iframe{width:100%;max-width:1280px;border-radius:12px}
 .ty-seg{display:inline-flex;margin-left:auto;padding:3px;border-radius:99px;background:rgba(255,255,255,.12)}
 .ty-seg button{height:32px;padding:0 14px;border:0;border-radius:99px;background:none;color:#C9CBD0;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
 .ty-seg button.on{background:#fff;color:#1C1C1E}
 .ty-vw .ty-seg+.ty-ib{margin-left:6px}
 .ty-foot{background:#2A2B2F;box-shadow:none;padding:4px 14px 18px}
 .ty.ty-wide .ty-adds{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){.ty *,.ty-sh *,.ty-vw,.ty-vw *{animation:none!important;transition-duration:.12s!important}}