/* ============ DREAM ARK GROUP — 소원수리함 ============ */
:root{
  --navy:#2b3a8f;        /* logo ring */
  --navy-deep:#1f2a6b;
  --teal:#3fa9b5;        /* logo teal */
  --teal-light:#6fc7d1;
  --blue:#2f7fd0;        /* wave blue */
  --ink:#1b2333;
  --muted:#737d92;
  --muted-2:#9aa3b5;
  --bg:#eef2f8;
  --card:#ffffff;
  --line:#e8edf5;
  --line-2:#dfe6f0;
  --danger:#e2574c;
  --ok:#23b07a;
  --shadow:0 6px 24px rgba(31,42,107,.10);
  --shadow-sm:0 2px 10px rgba(31,42,107,.06);
  --radius:18px;
  --radius-sm:13px;
  --app-w:460px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#dfe7f4 0%,#eef2f8 220px,#eef2f8 100%);
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.01em;
  min-height:100dvh;
}

/* app shell: phone-like centered column */
.app{
  position:relative;
  width:100%;
  max-width:var(--app-w);
  min-height:100dvh;
  margin:0 auto;
  background:var(--bg);
  box-shadow:0 0 60px rgba(31,42,107,.08);
  overflow:hidden;
}
@media (min-width:520px){
  body{padding:0;background:#d7e0ef;}
  .app{min-height:100dvh;}
}

/* ---- views ---- */
.view{
  display:none;
  flex-direction:column;
  min-height:100dvh;
  padding:0 22px calc(22px + env(safe-area-inset-bottom));
  animation:fade .28s ease;
}
.view.is-active{display:flex;}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- top bar ---- */
.topbar{
  display:flex;align-items:center;gap:6px;
  height:54px;margin:0 -22px 4px;padding:0 12px;
  padding-top:env(safe-area-inset-top);
  position:sticky;top:0;z-index:5;
  background:rgba(238,242,248,.86);backdrop-filter:saturate(180%) blur(12px);
}
.topbar__title{font-size:17px;font-weight:700;}
.topbar__back{
  border:0;background:transparent;color:var(--ink);
  font-size:30px;line-height:1;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;cursor:pointer;margin-left:-6px;font-weight:300;
}
.topbar__back:active{background:rgba(0,0,0,.05);}
.topbar--admin{justify-content:flex-start;}
.topbar__action{
  margin-left:auto;border:0;background:transparent;color:var(--navy);
  font-size:22px;width:40px;height:40px;border-radius:12px;cursor:pointer;
}
.topbar__action:active{background:rgba(0,0,0,.05);}

/* ---- brand / home ---- */
.brand{text-align:center;padding-top:calc(34px + env(safe-area-inset-top));}
.brand__logo-wrap{
  width:120px;height:120px;margin:0 auto 14px;border-radius:50%;
  background:#fff;display:grid;place-items:center;
  box-shadow:0 10px 30px rgba(43,58,143,.18);
}
.brand__logo{width:104px;height:104px;border-radius:50%;object-fit:cover;}
.brand__name{margin:0;font-weight:800;font-size:15px;letter-spacing:.14em;color:var(--navy);}
.brand__tag{margin:5px 0 0;font-size:11.5px;letter-spacing:.04em;color:var(--muted-2);font-weight:500;}

.hero{text-align:center;margin-top:26px;}
.hero__title{
  margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(120deg,var(--navy),var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{margin:12px 0 0;color:var(--muted);font-size:15px;line-height:1.5;font-weight:500;}

.home__spacer{flex:1;min-height:18px;}

/* ---- cards ---- */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:18px;margin-top:24px;
}
.card--notice{margin-top:28px;}
.notice__row{display:flex;gap:12px;align-items:flex-start;}
.notice__ico{font-size:20px;line-height:1.4;}
.notice__row p{margin:0;font-size:14px;color:#4a5468;line-height:1.55;font-weight:500;}
.notice__row b{color:var(--navy);font-weight:700;}

/* ---- buttons ---- */
.bottom-cta{
  position:sticky;bottom:0;margin:auto -22px 0;padding:14px 22px calc(16px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:9px;
  background:linear-gradient(180deg,rgba(238,242,248,0),var(--bg) 32%);
}
.btn{
  width:100%;height:54px;border:0;border-radius:15px;
  font-family:inherit;font-size:16.5px;font-weight:700;cursor:pointer;
  transition:transform .08s ease,box-shadow .2s ease,opacity .2s ease;
  letter-spacing:-.01em;
}
.btn:active{transform:scale(.985);}
.btn--primary{
  color:#fff;background:linear-gradient(120deg,var(--navy),#3257b3);
  box-shadow:0 8px 20px rgba(43,58,143,.28);
}
.btn--primary:disabled{opacity:.55;box-shadow:none;cursor:default;}
.btn--ghost{background:transparent;color:var(--muted);height:46px;font-size:14.5px;font-weight:600;}
.btn--ghost:active{background:rgba(0,0,0,.04);}
.btn--sm{height:44px;font-size:14.5px;border-radius:12px;}

/* ---- gate (code / password) ---- */
.gate{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:60px;}
.gate__icon{font-size:46px;margin-bottom:8px;}
.gate__title{margin:6px 0 0;font-size:21px;font-weight:800;}
.gate__desc{margin:10px 0 26px;color:var(--muted);font-size:14.5px;line-height:1.5;font-weight:500;}
.codeinput{
  width:200px;height:66px;text-align:center;
  font-size:34px;font-weight:800;letter-spacing:.34em;
  border:2px solid var(--line-2);border-radius:16px;background:#fff;color:var(--ink);
  outline:none;transition:border-color .15s ease,box-shadow .15s ease;
  caret-color:var(--navy);
}
.codeinput::placeholder{color:#cfd6e3;letter-spacing:.28em;}
.codeinput:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(43,58,143,.12);}
.gate .btn{max-width:300px;margin-top:30px;}
.gate.shake .codeinput{animation:shake .4s;}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}

.err{min-height:18px;margin:12px 0 0;color:var(--danger);font-size:13.5px;font-weight:600;}

/* ---- form ---- */
.form{flex:1;padding-top:6px;}
.field__label{display:block;margin:20px 0 9px;font-size:14px;font-weight:700;color:#3a4459;}
.field__label:first-of-type{margin-top:6px;}
.req{color:var(--danger);}
.opt{color:var(--muted-2);font-weight:500;font-size:12.5px;}
.field__input{
  width:100%;border:1.5px solid var(--line-2);border-radius:var(--radius-sm);
  background:#fff;color:var(--ink);font-family:inherit;font-size:16px;font-weight:500;
  padding:15px 16px;outline:none;transition:border-color .15s ease,box-shadow .15s ease;
}
.field__input::placeholder{color:#aab2c2;font-weight:500;}
.field__input:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(43,58,143,.10);}
.field__textarea{resize:none;line-height:1.6;min-height:150px;}
.field__count{margin:7px 2px 0;text-align:right;font-size:12.5px;color:var(--muted-2);font-weight:500;}

.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  border:1.5px solid var(--line-2);background:#fff;color:var(--muted);
  font-family:inherit;font-size:14px;font-weight:600;
  padding:10px 16px;border-radius:999px;cursor:pointer;transition:all .15s ease;
}
.chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(43,58,143,.22);}
.chip:active{transform:scale(.96);}
.form__note{margin:16px 2px 4px;font-size:12.5px;color:var(--muted-2);text-align:center;font-weight:500;}

/* ---- done ---- */
.done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:40px;}
.done__check svg{display:block;}
.done__check circle{stroke:var(--ok);stroke-width:2;stroke-dasharray:166;stroke-dashoffset:166;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards;}
.done__check path{stroke:var(--ok);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .35s .55s cubic-bezier(.65,0,.45,1) forwards;}
@keyframes stroke{to{stroke-dashoffset:0;}}
.done__title{margin:22px 0 0;font-size:22px;font-weight:800;}
.done__sub{margin:12px 0 0;color:var(--muted);font-size:15px;line-height:1.55;font-weight:500;}

/* ---- admin list ---- */
.list__head{display:flex;align-items:center;justify-content:space-between;padding:6px 2px 12px;}
.list__count{font-size:14px;color:var(--muted);font-weight:600;}
.list__count b{color:var(--navy);font-weight:800;}
.list{flex:1;display:flex;flex-direction:column;gap:12px;padding-bottom:24px;}

.wish{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:16px 16px 14px;animation:fade .3s ease;
}
.wish__top{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.badge{
  font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:rgba(43,58,143,.08);color:var(--navy);
}
.badge--칭찬{background:rgba(35,176,122,.12);color:var(--ok);}
.badge--제안{background:rgba(47,127,208,.10);color:var(--blue);}
.badge--건의{background:rgba(63,169,181,.14);color:#2f8a96;}
.badge--고민{background:rgba(214,158,46,.16);color:#bf8513;}
.badge--기타{background:rgba(115,125,146,.12);color:var(--muted);}
.wish__date{font-size:12.5px;color:var(--muted-2);font-weight:500;}
.wish__del{
  margin-left:auto;border:0;background:transparent;color:var(--muted-2);
  font-size:17px;width:32px;height:32px;border-radius:9px;cursor:pointer;
}
.wish__del:active{background:rgba(226,87,76,.1);color:var(--danger);}
.wish__content{margin:0;font-size:15px;line-height:1.62;color:var(--ink);white-space:pre-wrap;word-break:break-word;font-weight:500;}
.wish__meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);}
.wish__meta span{font-size:13px;color:var(--muted);font-weight:500;}
.wish__meta b{color:#48536a;font-weight:600;}

.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--muted-2);text-align:center;padding:60px 0;}
.empty__ico{font-size:42px;margin-bottom:14px;opacity:.7;}
.empty p{margin:0;font-size:15px;font-weight:500;}

.skeleton{height:96px;border-radius:var(--radius);background:linear-gradient(100deg,#eef1f7 30%,#f6f8fc 50%,#eef1f7 70%);background-size:200% 100%;animation:sk 1.2s infinite;}
@keyframes sk{to{background-position:-200% 0;}}

/* ---- toast ---- */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  background:rgba(27,35,51,.94);color:#fff;font-size:14px;font-weight:600;
  padding:13px 20px;border-radius:13px;opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;z-index:50;max-width:88%;text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0);}

/* spinner inside button */
.btn.is-loading{color:transparent;position:relative;pointer-events:none;}
.btn.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;
  border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---- home: visitor counters ---- */
.visits{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:22px;padding:15px 18px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);
}
.visit{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;}
.visit__num{font-size:23px;font-weight:800;color:var(--navy);letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.visit__label{font-size:12px;font-weight:600;color:var(--muted-2);}
.visit__sep{width:1px;height:30px;background:var(--line-2);}

/* ---- admin: toolbar ---- */
.admintools{display:flex;flex-direction:column;gap:10px;margin:2px 0 8px;}
.searchbar{
  display:flex;align-items:center;gap:8px;height:44px;padding:0 13px;
  background:#fff;border:1.5px solid var(--line-2);border-radius:12px;
}
.searchbar__ico{font-size:14px;opacity:.55;}
.searchbar input{flex:1;border:0;outline:none;background:transparent;font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);}
.searchbar input::placeholder{color:#aab2c2;}
.filterchips{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
.filterchips::-webkit-scrollbar{display:none;}
.fchip{
  flex:none;border:1.5px solid var(--line-2);background:#fff;color:var(--muted);
  font-family:inherit;font-size:13.5px;font-weight:600;padding:7px 13px;border-radius:999px;
  cursor:pointer;white-space:nowrap;transition:all .15s;
}
.fchip span{opacity:.6;font-weight:700;margin-left:1px;}
.fchip.is-on{background:var(--navy);border-color:var(--navy);color:#fff;}
.fchip.is-on span{opacity:.85;}
.toolbtns{display:flex;gap:7px;}
.toolbtn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:5px;height:42px;
  border:1.5px solid var(--line-2);background:#fff;border-radius:12px;
  font-family:inherit;font-size:13px;font-weight:700;color:#3a4459;cursor:pointer;transition:all .12s;
}
.toolbtn span{font-size:14px;}
.toolbtn:active{transform:scale(.97);background:#f3f6fb;}
.list__sort{
  border:0;background:transparent;color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;padding:4px 6px;border-radius:8px;
}
.list__sort:active{background:rgba(0,0,0,.04);}
.wish__no{font-size:12px;font-weight:800;color:var(--muted-2);min-width:18px;font-variant-numeric:tabular-nums;}

/* ---- print-only header ---- */
.printhead{display:none;}

/* ---- print layout (인쇄/취합) ---- */
@media print{
  @page{margin:14mm;}
  html,body{background:#fff !important;}
  .app{max-width:none;box-shadow:none;background:#fff;}
  .topbar,.admintools,.list__head,.wish__del,.bottom-cta,.toast{display:none !important;}
  .view{display:none !important;padding:0;min-height:0;}
  .view--list.is-active{display:block !important;}
  .printhead{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-bottom:13px;border-bottom:2px solid #2b3a8f;}
  .printhead img{width:52px;height:52px;border-radius:50%;}
  .printhead h1{margin:0;font-size:17px;color:#1b2333;font-weight:800;}
  .printhead__txt p{margin:4px 0 0;font-size:12px;color:#555;}
  .list{display:block;}
  .wish{border:1px solid #ccc !important;box-shadow:none !important;page-break-inside:avoid;margin-bottom:9px;padding:11px 13px;}
  .wish__content{color:#000 !important;}
  .badge{border:1px solid #bbb;color:#000 !important;background:#f3f3f3 !important;}
  .wish__date,.wish__no,.wish__meta span,.wish__meta b{color:#333 !important;}
}