/* 10-29 18:26 대표님: 앱을 처음 켤 때 보이는 로딩 화면(첫 화면 시안 B 배경 느낌). 보안 설정(CSP) 때문에 index.html 안이 아니라 따로 둔 파일. index.html 머리에서 가장 먼저 읽음. */
html,body{background:#f3ece8}
#첫로딩{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(24px + env(safe-area-inset-top)) 24px calc(250px + env(safe-area-inset-bottom));font-family:"Noto Sans KR","Malgun Gothic","Apple SD Gothic Neo",sans-serif;color:#2b2523;text-align:center;opacity:1;transition:opacity .45s ease,visibility .45s;background:#f3ece8}
#첫로딩::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:opacity .45s ease;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-130 -240 260 244%22 preserveAspectRatio=%22xMidYMax meet%22%3E%3Cellipse cx=%22-62%22 cy=%22-2%22 rx=%2240%22 ry=%226%22 fill=%22%23000%22 opacity=%22.12%22/%3E%3Cellipse cx=%2262%22 cy=%22-2%22 rx=%2240%22 ry=%226%22 fill=%22%23000%22 opacity=%22.12%22/%3E%3Cg transform=%22translate(-62,0) scale(1,1)%22%3E%3Cellipse cx=%22-9%22 cy=%22-4%22 rx=%2211%22 ry=%225%22 fill=%22%233a302d%22/%3E%3Cellipse cx=%229%22 cy=%22-4%22 rx=%2211%22 ry=%225%22 fill=%22%233a302d%22/%3E%3Cpath d=%22M-17,-84 L-16,-6 L-3,-6 L0,-60 L3,-6 L16,-6 L17,-84 Z%22 fill=%22%234a3f3b%22/%3E%3Cpath d=%22M-23,-146 Q-33,-140 -33,-120 L-31,-90 L-23,-90 L-22,-120 Z%22 fill=%22%23A72B2A%22/%3E%3Ccircle cx=%22-27%22 cy=%22-86%22 r=%225.5%22 fill=%22%23f2cfb5%22/%3E%3Cpath d=%22M-24,-150 Q-24,-156 -14,-158 L14,-158 Q24,-156 24,-150 L19,-80 L-19,-80 Z%22 fill=%22%23A72B2A%22/%3E%3Crect x=%22-19%22 y=%22-86%22 width=%2238%22 height=%225%22 fill=%22%232b2523%22 opacity=%22.35%22/%3E%3Cpath d=%22M-9,-158 L0,-146 L9,-158 Z%22 fill=%22%23fff%22 opacity=%22.9%22/%3E%3Crect x=%227%22 y=%22-140%22 width=%229%22 height=%226%22 rx=%221%22 fill=%22%23fff%22 opacity=%22.85%22/%3E%3Cpath d=%22M22,-148 Q32,-142 38,-128 L58,-116 L54,-108 L32,-118 L22,-128 Z%22 fill=%22%23A72B2A%22/%3E%3Cellipse cx=%2260%22 cy=%22-112%22 rx=%227%22 ry=%225.5%22 fill=%22%23f2cfb5%22/%3E%3Crect x=%22-6%22 y=%22-166%22 width=%2212%22 height=%2210%22 fill=%22%23f2cfb5%22/%3E%3Cellipse cx=%220%22 cy=%22-180%22 rx=%2215%22 ry=%2217%22 fill=%22%23f2cfb5%22/%3E%3Cellipse cx=%22-14%22 cy=%22-178%22 rx=%223%22 ry=%224.5%22 fill=%22%23f2cfb5%22/%3E%3Cellipse cx=%2214%22 cy=%22-178%22 rx=%223%22 ry=%224.5%22 fill=%22%23f2cfb5%22/%3E%3Ccircle cx=%22-5.5%22 cy=%22-180%22 r=%221.6%22 fill=%22%232b2523%22/%3E%3Ccircle cx=%225.5%22 cy=%22-180%22 r=%221.6%22 fill=%22%232b2523%22/%3E%3Cpath d=%22M-5,-172 Q0,-168 5,-172%22 stroke=%22%232b2523%22 stroke-width=%221.6%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M-15.5,-182 Q-17,-200 -2,-199 Q14,-202 15.5,-184 Q12,-192 4,-191 Q-8,-193 -12,-186 Z%22 fill=%22%232b2523%22/%3E%3C/g%3E%3Cg transform=%22translate(62,0) scale(-1,1)%22%3E%3Cellipse cx=%22-9%22 cy=%22-4%22 rx=%2211%22 ry=%225%22 fill=%22%233a302d%22/%3E%3Cellipse cx=%229%22 cy=%22-4%22 rx=%2211%22 ry=%225%22 fill=%22%233a302d%22/%3E%3Cpath d=%22M-17,-84 L-16,-6 L-3,-6 L0,-60 L3,-6 L16,-6 L17,-84 Z%22 fill=%22%236d625d%22/%3E%3Cpath d=%22M-23,-146 Q-33,-140 -33,-120 L-31,-90 L-23,-90 L-22,-120 Z%22 fill=%22%235b524e%22/%3E%3Ccircle cx=%22-27%22 cy=%22-86%22 r=%225.5%22 fill=%22%23e3b594%22/%3E%3Cpath d=%22M-24,-150 Q-24,-156 -14,-158 L14,-158 Q24,-156 24,-150 L19,-80 L-19,-80 Z%22 fill=%22%23f1ebe7%22/%3E%3Cpath d=%22M-24,-150 Q-24,-156 -14,-158 L-4,-158 L-2,-80 L-19,-80 Z%22 fill=%22%235b524e%22/%3E%3Cpath d=%22M24,-150 Q24,-156 14,-158 L4,-158 L2,-80 L19,-80 Z%22 fill=%22%235b524e%22/%3E%3Crect x=%22-19%22 y=%22-86%22 width=%2238%22 height=%225%22 fill=%22%232b2523%22 opacity=%22.35%22/%3E%3Cpath d=%22M-9,-158 L0,-146 L9,-158 Z%22 fill=%22%23fff%22 opacity=%22.9%22/%3E%3Cpath d=%22M22,-148 Q32,-142 38,-128 L58,-116 L54,-108 L32,-118 L22,-128 Z%22 fill=%22%235b524e%22/%3E%3Cellipse cx=%2260%22 cy=%22-112%22 rx=%227%22 ry=%225.5%22 fill=%22%23e3b594%22/%3E%3Crect x=%22-6%22 y=%22-166%22 width=%2212%22 height=%2210%22 fill=%22%23e3b594%22/%3E%3Cellipse cx=%220%22 cy=%22-180%22 rx=%2215%22 ry=%2217%22 fill=%22%23e3b594%22/%3E%3Cellipse cx=%22-14%22 cy=%22-178%22 rx=%223%22 ry=%224.5%22 fill=%22%23e3b594%22/%3E%3Cellipse cx=%2214%22 cy=%22-178%22 rx=%223%22 ry=%224.5%22 fill=%22%23e3b594%22/%3E%3Ccircle cx=%22-5.5%22 cy=%22-180%22 r=%221.6%22 fill=%22%232b2523%22/%3E%3Ccircle cx=%225.5%22 cy=%22-180%22 r=%221.6%22 fill=%22%232b2523%22/%3E%3Cpath d=%22M-5,-172 Q0,-168 5,-172%22 stroke=%22%232b2523%22 stroke-width=%221.6%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M-15.5,-180 Q-18,-200 0,-199 Q16,-199 15.5,-182 L13,-186 Q4,-196 -9,-188 L-12,-180 Z%22 fill=%22%232b2523%22/%3E%3C/g%3E%3Cellipse cx=%220%22 cy=%22-112%22 rx=%229%22 ry=%227%22 fill=%22%23efc7aa%22/%3E%3Cg fill=%22%23A72B2A%22%3E%3Cpath d=%22M0,-226 l4,10 10,4 -10,4 -4,10 -4,-10 -10,-4 10,-4z%22/%3E%3C/g%3E%3Cg fill=%22%23c9726f%22 opacity=%22.8%22%3E%3Ccircle cx=%22-30%22 cy=%22-210%22 r=%223%22/%3E%3Ccircle cx=%2232%22 cy=%22-214%22 r=%222.5%22/%3E%3C/g%3E%3C/svg%3E") center bottom calc(14px + env(safe-area-inset-bottom))/auto 210px no-repeat,linear-gradient(180deg,transparent calc(100% - 66px - env(safe-area-inset-bottom)),#e7d9d2 calc(100% - 66px - env(safe-area-inset-bottom))),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 700%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22w%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fbf7f5%22/%3E%3Cstop offset=%221%22 stop-color=%22%23efe4df%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%221000%22 height=%22700%22 fill=%22url(%23w)%22/%3E%3Ccircle cx=%22500%22 cy=%22420%22 r=%22330%22 fill=%22%23A72B2A%22 opacity=%22.08%22/%3E%3Ccircle cx=%22500%22 cy=%22420%22 r=%22230%22 fill=%22%23A72B2A%22 opacity=%22.07%22/%3E%3Cg fill=%22none%22 stroke=%22%23746661%22 stroke-opacity=%22.18%22 stroke-width=%222%22%3E%3Crect x=%2260%22 y=%2290%22 width=%22150%22 height=%22210%22 rx=%224%22/%3E%3Cline x1=%22135%22 y1=%2290%22 x2=%22135%22 y2=%22300%22/%3E%3Crect x=%22790%22 y=%22120%22 width=%22150%22 height=%22210%22 rx=%224%22/%3E%3Cline x1=%22865%22 y1=%22120%22 x2=%22865%22 y2=%22330%22/%3E%3C/g%3E%3C/svg%3E") center bottom/cover}
#첫로딩{isolation:isolate}
#첫로딩.끝{opacity:0;visibility:hidden;pointer-events:none}
#첫로딩 .첫로딩카드{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-top:5px solid #A72B2A;border-radius:22px;box-shadow:0 18px 50px rgba(80,50,40,.18);padding:26px 34px 24px;min-width:240px;animation:첫로딩떠오름 .5s ease both}
#첫로딩 img{display:block;width:104px;height:104px;margin:0 auto 10px;border-radius:22px}
#첫로딩 .첫로딩영문{display:block;color:#A72B2A;font-weight:800;font-size:1.25rem;letter-spacing:.3em;padding-left:.3em;line-height:1.2}
#첫로딩 .첫로딩이름{display:block;margin-top:6px;font-weight:700;font-size:1.02rem;color:#4a3f3b;letter-spacing:.02em}
#첫로딩 .첫로딩돌이{width:26px;height:26px;margin:18px auto 0;border-radius:50%;border:3px solid rgba(167,43,42,.18);border-top-color:#A72B2A;animation:첫로딩돌기 .8s linear infinite}
@keyframes 첫로딩돌기{to{transform:rotate(360deg)}}
@keyframes 첫로딩떠오름{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:900px){#첫로딩{padding-bottom:24px}#첫로딩::before{background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-130 -240 260 244%22 preserveAspectRatio=%22xMidYMax meet%22%3E%3Cellipse cx=%22-62%22 cy=%22-2%22 rx=%2240%22 ry=%226%22 fill=%22%23000%22 opacity=%22.12%22/%3E%3Cellipse cx=%2262%22 cy=%22-2%22 rx=%2240%22 ry=%226%22 fill=%22%23000%22 opacity=%22.12%22/%3E%3Cg transform=%22translate(-62,0) scale(1,1)%22%3E%3Cellipse cx=%22-9%22 cy=%22-4%22 rx=%2211%22 ry=%225%22 fill=%22%233a302d%22/%3E%3Cellipse cx=%229%22 cy=%22-4%22 rx=%2211%22 ry=%225%22 fill=%22%233a302d%22/%3E%3Cpath d=%22M-17,-84 L-16,-6 L-3,-6 L0,-60 L3,-6 L16,-6 L17,-84 Z%22 fill=%22%234a3f3b%22/%3E%3Cpath d=%22M-23,-146 Q-33,-140 -33,-120 L-31,-90 L-23,-90 L-22,-120 Z%22 fill=%22%23A72B2A%22/%3E%3Ccircle cx=%22-27%22 cy=%22-86%22 r=%225.5%22 fill=%22%23f2cfb5%22/%3E%3Cpath d=%22M-24,-150 Q-24,-156 -14,-158 L14,-158 Q24,-156 24,-150 L19,-80 L-19,-80 Z%22 fill=%22%23A72B2A%22/%3E%3Crect x=%22-19%22 y=%22-86%22 width=%2238%22 height=%225%22 fill=%22%232b2523%22 opacity=%22.35%22/%3E%3Cpath d=%22M-9,-158 L0,-146 L9,-158 Z%22 fill=%22%23fff%22 opacity=%22.9%22/%3E%3Crect x=%227%22 y=%22-140%22 width=%229%22 height=%226%22 rx=%221%22 fill=%22%23fff%22 opacity=%22.85%22/%3E%3Cpath d=%22M22,-148 Q32,-142 38,-128 L58,-116 L54,-108 L32,-118 L22,-128 Z%22 fill=%22%23A72B2A%22/%3E%3Cellipse cx=%2260%22 cy=%22-112%22 rx=%227%22 ry=%225.5%22 fill=%22%23f2cfb5%22/%3E%3Crect x=%22-6%22 y=%22-166%22 width=%2212%22 height=%2210%22 fill=%22%23f2cfb5%22/%3E%3Cellipse cx=%220%22 cy=%22-180%22 rx=%2215%22 ry=%2217%22 fill=%22%23f2cfb5%22/%3E%3Cellipse cx=%22-14%22 cy=%22-178%22 rx=%223%22 ry=%224.5%22 fill=%22%23f2cfb5%22/%3E%3Cellipse cx=%2214%22 cy=%22-178%22 rx=%223%22 ry=%224.5%22 fill=%22%23f2cfb5%22/%3E%3Ccircle cx=%22-5.5%22 cy=%22-180%22 r=%221.6%22 fill=%22%232b2523%22/%3E%3Ccircle cx=%225.5%22 cy=%22-180%22 r=%221.6%22 fill=%22%232b2523%22/%3E%3Cpath d=%22M-5,-172 Q0,-168 5,-172%22 stroke=%22%232b2523%22 stroke-width=%221.6%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M-15.5,-182 Q-17,-200 -2,-199 Q14,-202 15.5,-184 Q12,-192 4,-191 Q-8,-193 -12,-186 Z%22 fill=%22%232b2523%22/%3E%3C/g%3E%3Cg transform=%22translate(62,0) scale(-1,1)%22%3E%3Cellipse cx=%22-9%22 cy=%22-4%22 rx=%2211%22 ry=%225%22 fill=%22%233a302d%22/%3E%3Cellipse cx=%229%22 cy=%22-4%22 rx=%2211%22 ry=%225%22 fill=%22%233a302d%22/%3E%3Cpath d=%22M-17,-84 L-16,-6 L-3,-6 L0,-60 L3,-6 L16,-6 L17,-84 Z%22 fill=%22%236d625d%22/%3E%3Cpath d=%22M-23,-146 Q-33,-140 -33,-120 L-31,-90 L-23,-90 L-22,-120 Z%22 fill=%22%235b524e%22/%3E%3Ccircle cx=%22-27%22 cy=%22-86%22 r=%225.5%22 fill=%22%23e3b594%22/%3E%3Cpath d=%22M-24,-150 Q-24,-156 -14,-158 L14,-158 Q24,-156 24,-150 L19,-80 L-19,-80 Z%22 fill=%22%23f1ebe7%22/%3E%3Cpath d=%22M-24,-150 Q-24,-156 -14,-158 L-4,-158 L-2,-80 L-19,-80 Z%22 fill=%22%235b524e%22/%3E%3Cpath d=%22M24,-150 Q24,-156 14,-158 L4,-158 L2,-80 L19,-80 Z%22 fill=%22%235b524e%22/%3E%3Crect x=%22-19%22 y=%22-86%22 width=%2238%22 height=%225%22 fill=%22%232b2523%22 opacity=%22.35%22/%3E%3Cpath d=%22M-9,-158 L0,-146 L9,-158 Z%22 fill=%22%23fff%22 opacity=%22.9%22/%3E%3Cpath d=%22M22,-148 Q32,-142 38,-128 L58,-116 L54,-108 L32,-118 L22,-128 Z%22 fill=%22%235b524e%22/%3E%3Cellipse cx=%2260%22 cy=%22-112%22 rx=%227%22 ry=%225.5%22 fill=%22%23e3b594%22/%3E%3Crect x=%22-6%22 y=%22-166%22 width=%2212%22 height=%2210%22 fill=%22%23e3b594%22/%3E%3Cellipse cx=%220%22 cy=%22-180%22 rx=%2215%22 ry=%2217%22 fill=%22%23e3b594%22/%3E%3Cellipse cx=%22-14%22 cy=%22-178%22 rx=%223%22 ry=%224.5%22 fill=%22%23e3b594%22/%3E%3Cellipse cx=%2214%22 cy=%22-178%22 rx=%223%22 ry=%224.5%22 fill=%22%23e3b594%22/%3E%3Ccircle cx=%22-5.5%22 cy=%22-180%22 r=%221.6%22 fill=%22%232b2523%22/%3E%3Ccircle cx=%225.5%22 cy=%22-180%22 r=%221.6%22 fill=%22%232b2523%22/%3E%3Cpath d=%22M-5,-172 Q0,-168 5,-172%22 stroke=%22%232b2523%22 stroke-width=%221.6%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3Cpath d=%22M-15.5,-180 Q-18,-200 0,-199 Q16,-199 15.5,-182 L13,-186 Q4,-196 -9,-188 L-12,-180 Z%22 fill=%22%232b2523%22/%3E%3C/g%3E%3Cellipse cx=%220%22 cy=%22-112%22 rx=%229%22 ry=%227%22 fill=%22%23efc7aa%22/%3E%3Cg fill=%22%23A72B2A%22%3E%3Cpath d=%22M0,-226 l4,10 10,4 -10,4 -4,10 -4,-10 -10,-4 10,-4z%22/%3E%3C/g%3E%3Cg fill=%22%23c9726f%22 opacity=%22.8%22%3E%3Ccircle cx=%22-30%22 cy=%22-210%22 r=%223%22/%3E%3Ccircle cx=%2232%22 cy=%22-214%22 r=%222.5%22/%3E%3C/g%3E%3C/svg%3E") right 8% bottom 10px/auto 60% no-repeat,linear-gradient(180deg,transparent 88%,#e7d9d2 88%),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1000 700%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Cdefs%3E%3ClinearGradient id=%22w%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23fbf7f5%22/%3E%3Cstop offset=%221%22 stop-color=%22%23efe4df%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width=%221000%22 height=%22700%22 fill=%22url(%23w)%22/%3E%3Ccircle cx=%22500%22 cy=%22420%22 r=%22330%22 fill=%22%23A72B2A%22 opacity=%22.08%22/%3E%3Ccircle cx=%22500%22 cy=%22420%22 r=%22230%22 fill=%22%23A72B2A%22 opacity=%22.07%22/%3E%3Cg fill=%22none%22 stroke=%22%23746661%22 stroke-opacity=%22.18%22 stroke-width=%222%22%3E%3Crect x=%2260%22 y=%2290%22 width=%22150%22 height=%22210%22 rx=%224%22/%3E%3Cline x1=%22135%22 y1=%2290%22 x2=%22135%22 y2=%22300%22/%3E%3Crect x=%22790%22 y=%22120%22 width=%22150%22 height=%22210%22 rx=%224%22/%3E%3Cline x1=%22865%22 y1=%22120%22 x2=%22865%22 y2=%22330%22/%3E%3C/g%3E%3C/svg%3E") right center/cover}}
@media(prefers-reduced-motion:reduce){#첫로딩,#첫로딩 .첫로딩카드{transition:none;animation:none}#첫로딩 .첫로딩돌이{animation-duration:2.4s}}
@media(min-width:900px){#첫로딩{align-items:flex-start;padding-left:12%}}

/* 10-29 18:41 대표님: 설치 앱(standalone)으로 열면 안드로이드 시작 화면(가운데 아이콘·같은 배경색)과 똑같이 시작해서,
   아이콘이 카드 안 자리로 옮겨 가는 동안 카드·글자·배경 그림이 서서히 나타난다.
   html.앱실행 은 첫로딩앞.js 가 머리에서 붙이고, 자리잡음·움직임·펼침은 첫로딩.js 가 붙인다. */
html.첫로딩안함 #첫로딩{display:none}
#첫로딩 img{position:relative;z-index:1;transform-origin:50% 50%}
html.앱실행 #첫로딩 .첫로딩카드{animation:none;transition:background-color .45s ease,box-shadow .45s ease,border-color .45s ease}
html.앱실행 #첫로딩:not(.펼침)::before{opacity:0}
html.앱실행 #첫로딩:not(.펼침) .첫로딩카드{background-color:rgba(255,255,255,0);box-shadow:0 18px 50px rgba(80,50,40,0);border-top-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
html.앱실행 #첫로딩 .첫로딩영문,html.앱실행 #첫로딩 .첫로딩이름,html.앱실행 #첫로딩 .첫로딩돌이{transition:opacity .4s ease .12s}
html.앱실행 #첫로딩:not(.펼침) .첫로딩영문,html.앱실행 #첫로딩:not(.펼침) .첫로딩이름,html.앱실행 #첫로딩:not(.펼침) .첫로딩돌이{opacity:0}
html.앱실행 #첫로딩:not(.자리잡음) img{opacity:0}
html.앱실행 #첫로딩.움직임 img{transition:transform .45s cubic-bezier(.3,.7,.3,1),border-radius .45s ease}