/* ============================================================
   css/practice.css - 실습 놀이터: 키오스크 주문, 사진 보정
   ============================================================ */

/* ---------- 시나리오 고르기 ---------- */
.kp-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; }
.kp-picker[hidden] { display: none; }
.kp-pick {
  display: flex; align-items: center; gap: 14px; padding: 20px; min-height: 100px; text-align: left;
  border: 3px solid #e2e8f0; border-radius: 16px; background: #fff; cursor: pointer; font-family: inherit;
}
.kp-pick:hover { border-color: #7c3aed; background: #faf5ff; }
.kp-pick__icon { font-size: 44px; line-height: 1; }
.kp-pick strong { display: block; font-size: 22px; color: #111; }
.kp-pick span.d { display: block; font-size: 16px; color: #555; margin-top: 2px; }

/* ---------- 연습 화면 배치 ---------- */
.kp-app[hidden] { display: none; }
.kp-app { --k: #7c3aed; display: grid; grid-template-columns: 1fr 440px; gap: 24px; align-items: start; }
.kp-side { position: sticky; top: calc(var(--header-h, 150px) + 12px); }
.kp-mission { background: #fff; border: 3px solid var(--k); border-radius: 16px; padding: 18px 20px; }
.kp-mission__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.kp-mission__icon { font-size: 34px; }
.kp-mission__title { font-size: 22px; font-weight: 800; }
.kp-mission__label { display: inline-block; background: var(--k); color: #fff; font-weight: 700; font-size: 15px; padding: 2px 10px; border-radius: 12px; }
.kp-mission__text { font-size: 20px; line-height: 1.7; margin: 8px 0 0; font-weight: 700; }
.kp-tools { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.kp-hint, .kp-other, .kp-again {
  flex: 1 1 140px; min-height: 56px; font-size: 18px; font-weight: 700; border-radius: 14px; cursor: pointer; font-family: inherit;
}
.kp-hint { background: #fff7ed; border: 3px solid #fb923c; color: #9a3412; }
.kp-other, .kp-again { background: #f1f5f9; border: 2px solid #cbd5e1; color: #333; }
.kp-again { background: var(--k); border-color: var(--k); color: #fff; }
.kp-done[hidden] { display: none; }
.kp-done { margin-top: 14px; background: #f0fdf4; border: 3px solid #4ade80; border-radius: 16px; padding: 16px 18px; }
.kp-done strong { display: block; font-size: 22px; color: #166534; }
.kp-done__msg { font-size: 18px; margin: 6px 0 0; }

/* ---------- 키오스크 기계 ---------- */
.kiosk { background: #1f2937; border-radius: 28px; padding: 14px 14px 18px; box-shadow: 0 14px 30px rgba(0,0,0,.25); }
.k-screen { position: relative; background: #fff; border-radius: 16px; overflow: hidden; min-height: 600px; display: flex; flex-direction: column; }
.k-head { display: flex; justify-content: space-between; align-items: center; background: var(--k); color: #fff; padding: 12px 16px; }
.k-store { font-size: 18px; font-weight: 800; }
.k-step { font-size: 15px; background: rgba(255,255,255,.2); padding: 2px 10px; border-radius: 10px; }
.k-body { flex: 1; padding: 18px 16px; }
.k-foot { display: flex; gap: 8px; padding: 10px 12px; background: #f1f5f9; border-top: 1px solid #e2e8f0; align-items: center; }
.k-foot button { min-height: 50px; padding: 0 14px; font-size: 17px; font-weight: 700; border-radius: 12px; border: 2px solid #cbd5e1; background: #fff; cursor: pointer; font-family: inherit; }
.k-foot button:disabled { opacity: .4; cursor: default; }
.k-cartbar { margin-left: auto; font-size: 16px; font-weight: 700; color: #334155; }
.k-cartbar[hidden] { display: none; }
.kiosk__slot { height: 10px; width: 46%; margin: 14px auto 0; background: #0f172a; border-radius: 6px; }

.k-title { font-size: 24px; font-weight: 800; margin: 0 0 6px; text-align: center; line-height: 1.4; }
.k-sub { font-size: 17px; color: #555; text-align: center; margin: 0 0 14px; }

.k-start {
  width: 100%; min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  border: 0; background: linear-gradient(160deg, #fff, #f1f5f9); cursor: pointer; border-radius: 12px; font-family: inherit;
}
.k-start__store { font-size: 26px; font-weight: 800; color: var(--k); }
.k-start__hand { font-size: 70px; animation: kTap 1.4s ease-in-out infinite; }
.k-start__text { font-size: 22px; font-weight: 700; color: #111; }
@keyframes kTap { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

.k-opts { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.k-opts--grid { display: grid; grid-template-columns: 1fr 1fr; }
.k-opt {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 92px; padding: 10px; border: 3px solid #e2e8f0; border-radius: 16px; background: #fff; cursor: pointer; font-family: inherit;
}
.k-opt:hover { border-color: var(--k); }
.k-opt__icon { font-size: 34px; line-height: 1; }
.k-opt__label { font-size: 21px; font-weight: 800; color: #111; }
.k-opt__sub { font-size: 16px; color: #555; }
.k-opt.is-soldout { background: #f1f5f9; opacity: .6; }
.k-opt.is-soldout .k-opt__sub { color: #dc2626; font-weight: 700; }

.k-qty { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 30px 0; }
.k-qty__btn { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--k); background: #fff; font-size: 40px; font-weight: 800; color: var(--k); cursor: pointer; position: relative; }
.k-qty__num { font-size: 56px; font-weight: 800; min-width: 60px; text-align: center; }
.k-main, .k-sec { position: relative; width: 100%; min-height: 66px; font-size: 22px; font-weight: 800; border-radius: 16px; cursor: pointer; font-family: inherit; }
.k-main { background: var(--k); color: #fff; border: 0; }
.k-sec { background: #fff; color: #333; border: 3px solid #cbd5e1; }
.k-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 16px; }

.k-cart { list-style: none; padding: 0; margin: 10px 0; border: 2px solid #e2e8f0; border-radius: 12px; }
.k-cart li { display: flex; justify-content: space-between; gap: 10px; padding: 14px; font-size: 19px; border-bottom: 1px solid #f1f5f9; }
.k-cart li:last-child { border-bottom: 0; }
.k-cart small { color: #555; }
.k-total { text-align: right; font-size: 20px; margin: 4px 4px 0; }
.k-total b { font-size: 26px; color: var(--k); }

.k-keyed { display: flex; justify-content: center; gap: 8px; margin: 6px 0 16px; }
.k-keyed span { width: 44px; height: 56px; border: 3px solid #cbd5e1; border-radius: 10px; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.k-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.k-key { position: relative; min-height: 64px; font-size: 26px; font-weight: 800; border: 2px solid #cbd5e1; border-radius: 12px; background: #fff; cursor: pointer; font-family: inherit; }
.k-key--ok { background: var(--k); color: #fff; border-color: var(--k); font-size: 22px; }

.k-cardzone { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 16px; }
.k-slot { width: 82%; padding: 16px; text-align: center; background: #0f172a; color: #e2e8f0; border-radius: 12px; font-size: 18px; font-weight: 700; }
.k-slot small { font-weight: 400; color: #94a3b8; }
.k-card {
  position: relative; width: 210px; height: 132px; border-radius: 14px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; font-size: 20px; font-weight: 800;
  display: flex; align-items: flex-end; justify-content: flex-end; padding: 14px; box-shadow: 0 8px 18px rgba(0,0,0,.25);
  transition: transform .6s ease, opacity .6s ease; font-family: inherit;
}
.k-card__chip { position: absolute; left: 18px; top: 22px; width: 38px; height: 28px; border-radius: 6px; background: #facc15; }
.k-card.is-inserting { transform: translateY(-150px) scale(.8); opacity: 0; }

.k-proc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; min-height: 420px; }
.k-spin { width: 70px; height: 70px; border: 8px solid #e2e8f0; border-top-color: var(--k); border-radius: 50%; animation: kSpin 1s linear infinite; }
@keyframes kSpin { to { transform: rotate(360deg); } }
.k-donebox { text-align: center; margin-top: 40px; }
.k-big { font-size: 72px; font-weight: 900; color: var(--k); margin: 0; line-height: 1.2; }
.k-note { font-size: 19px; line-height: 1.7; margin-top: 18px; }

/* 힌트: 다음에 누를 곳 */
.k-hint { outline: 5px solid #f97316 !important; outline-offset: 3px; animation: kPulse 1s ease-in-out infinite; z-index: 2; }
.k-hint::after {
  content: '👆 여기'; position: absolute; right: -6px; top: -16px; background: #f97316; color: #fff;
  font-size: 15px; font-weight: 800; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
@keyframes kPulse { 0%,100% { outline-color: #f97316; } 50% { outline-color: #fdba74; } }

/* 틀렸을 때 안내 */
.k-toast {
  position: absolute; left: 12px; right: 12px; bottom: 80px; background: rgba(17,24,39,.92); color: #fff;
  font-size: 18px; line-height: 1.6; padding: 14px 16px; border-radius: 14px; opacity: 0; transform: translateY(10px);
  transition: opacity .2s, transform .2s; pointer-events: none; z-index: 5;
}
.k-toast.is-on { opacity: 1; transform: translateY(0); }

/* ---------- 사진 보정 ---------- */
.ph-app { display: grid; grid-template-columns: 1fr 360px; gap: 20px; align-items: start; }
.ph-stage { background: #0f172a; border-radius: 16px; padding: 12px; text-align: center; position: relative; }
.ph-canvas { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto; background: #1e293b; touch-action: none; }
.ph-badge { position: absolute; top: 18px; left: 18px; background: rgba(0,0,0,.6); color: #fff; font-size: 16px; font-weight: 700; padding: 4px 12px; border-radius: 12px; }
.ph-badge[hidden] { display: none; }
.ph-stagebar { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ph-stagebar button, .ph-stagebar label {
  flex: 1 1 140px; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 17px; font-weight: 700; border-radius: 12px; border: 2px solid #475569; background: #1e293b; color: #fff; cursor: pointer; font-family: inherit;
}
.ph-stagebar input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.ph-panel { background: #fff; border: 2px solid #e2e8f0; border-radius: 16px; padding: 16px; }
.ph-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.ph-tab { min-height: 64px; border: 2px solid #e2e8f0; border-radius: 12px; background: #f8fafc; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-family: inherit; }
.ph-tab span { font-size: 24px; line-height: 1; }
.ph-tab.is-on { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.ph-tool[hidden] { display: none; }
.ph-tool h3 { font-size: 20px; margin: 0 0 8px; }
.ph-tool p { font-size: 17px; color: #555; margin: 0 0 10px; }
.ph-slider { display: flex; align-items: center; gap: 10px; }
.ph-slider button { width: 56px; height: 56px; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; font-size: 26px; font-weight: 800; cursor: pointer; flex-shrink: 0; }
.ph-slider input[type=range] { flex: 1; height: 40px; accent-color: #7c3aed; }
.ph-val { text-align: center; font-size: 18px; font-weight: 700; margin-top: 6px; }
.ph-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-choice { min-height: 60px; border: 2px solid #e2e8f0; border-radius: 12px; background: #fff; font-size: 18px; font-weight: 700; cursor: pointer; font-family: inherit; }
.ph-choice.is-on { border-color: #7c3aed; background: #f5f3ff; color: #5b21b6; }
.ph-big { width: 100%; min-height: 60px; font-size: 19px; font-weight: 800; border-radius: 14px; cursor: pointer; font-family: inherit; }
.ph-big--main { background: #7c3aed; color: #fff; border: 0; }
.ph-big--line { background: #fff; color: #5b21b6; border: 2px solid #c4b5fd; }
.ph-mission { margin-top: 14px; background: #faf5ff; border: 2px solid #e9d5ff; border-radius: 14px; padding: 14px 16px; }
.ph-mission h3 { font-size: 19px; margin: 0 0 6px; }
.ph-mission ol { margin: 0; padding-left: 0; list-style: none; }
.ph-mission li { font-size: 18px; padding: 5px 0 5px 34px; position: relative; }
.ph-mission li::before { content: ''; position: absolute; left: 0; top: 7px; width: 22px; height: 22px; border: 2px solid #c4b5fd; border-radius: 6px; background: #fff; }
.ph-mission li.is-done { color: #166534; font-weight: 700; }
.ph-mission li.is-done::before { content: '✔'; background: #16a34a; border-color: #16a34a; color: #fff; font-size: 15px; text-align: center; line-height: 20px; }
.ph-save[hidden] { display: none; }
.ph-save { margin-top: 12px; background: #f0fdf4; border: 2px solid #86efac; border-radius: 14px; padding: 14px; font-size: 18px; }
.ph-save a { display: inline-block; margin-top: 8px; font-weight: 800; }

@media (max-width: 1020px) {
  .kp-app, .ph-app { grid-template-columns: 1fr; }
  .kp-side { position: static; }
  .kiosk { max-width: 460px; margin: 0 auto; width: 100%; }
}
@media (max-width: 768px) {
  .kp-picker { grid-template-columns: 1fr; }
  .k-screen { min-height: 540px; }
  .k-title { font-size: 22px; }
  .k-start { min-height: 460px; }
  .kiosk { padding: 10px 10px 14px; border-radius: 22px; }
}