/* U2: display toggles, themes, close buttons and the settings panel. Driven by attributes uiprefs.js puts on <html>. */

/* ── what is switched off (Settings > 표시) ── */
html[data-ui-off~="bands"] #banner,
html[data-ui-off~="bands"] .bl-band,
html[data-ui-off~="hymn"] #hymn-card,
html[data-ui-off~="cards"] #hint,
html[data-ui-off~="cards"] #pg-card,
html[data-ui-off~="cards"] #pg-pill,
html[data-ui-off~="cards"] #pg-talk,
html[data-ui-off~="tables"] #spot-chip[data-feature="games"],
html[data-ui-off~="cards"] .nudge:not(.inline),
html[data-ui-off~="wallet"] #ux-wallet,
html[data-ui-off~="pilgrim"] #ux-pilgrim,
html[data-ui-off~="hud"] .places,
html[data-ui-off~="hud"] .livebar,
html[data-ui-off~="hud"] .top .brand{display:none!important}

/* ── closed just this once (✕), for this visit ── */
html[data-ui-shut~="pilgrim"] #ux-pilgrim,
html[data-ui-shut~="hint"] #hint,
html[data-ui-shut~="banner"] #banner,
html[data-ui-shut~="band"] .bl-band,
html[data-ui-shut~="hymn"] #hymn-card,
html[data-ui-shut~="subs"] #subs{display:none!important}

/* ── the ✕ itself: a 44px hit box at the card's top-right corner, a small 22px disc inside ── */
.ui-x{position:absolute;top:-14px;right:-14px;z-index:2;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:0;background:transparent;
  display:grid;place-items:center;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:var(--ink)}
.ui-x.l{right:auto;left:-14px}
.ui-x.il{top:0;left:0;right:auto}
.ui-x.in{position:relative;top:auto;right:auto;flex:none;margin:-8px -6px -8px -4px}
.ui-x::after{content:"";width:22px;height:22px;border-radius:50%;background:rgba(10,12,24,.78) center/10px 10px no-repeat;border:1px solid var(--line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7' stroke='%23efe8d8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.ui-x:focus-visible::after{outline:2px solid var(--gold);outline-offset:2px}
.ui-x-host{position:relative}
/* #hint is a one-line pill with overflow:hidden (for the ellipsis), which clipped the corner ✕ down to a ~30px sliver: let it wrap instead so the ✕ sits fully outside the pill */
#hint{overflow:visible;white-space:normal;text-overflow:clip;border-radius:18px}

/* "다시 보지 않기" chip after a ✕: top edge (y < 15% of the view), because the bottom band is the joystick zone + action buttons + dock and the middle is play area */
#ui-undo{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 8px);display:flex;align-items:center;gap:6px;
  padding:4px 4px 4px 12px;border-radius:999px;font:500 12.5px var(--f-body);color:var(--ink);max-width:calc(100% - 32px);white-space:nowrap}
#ui-undo[hidden]{display:none!important}
#ui-undo button{min-height:36px;border:0;border-radius:999px;padding:0 12px;font:700 12.5px var(--f-body);cursor:pointer;background:var(--gold);color:var(--gold-ink)}
#ui-undo button.ghost{background:transparent;color:var(--muted);padding:0 10px}

/* ── themes: only the shared tokens move; scenes and 3D stay as they are ── */
html[data-ui-theme] .glass{background:var(--glass)}
html[data-ui-theme="bright"]{--glass:rgba(58,66,98,.58);--sheet:rgba(40,46,72,.92);--ink:#fffaf0;--muted:#cfd0dd;--line:rgba(255,255,255,.22)}
html[data-ui-theme="dark"]{--glass:rgba(3,4,9,.84);--sheet:rgba(3,4,9,.96);--line:rgba(239,232,216,.1)}
html[data-ui-theme="warm"]{--glass:rgba(40,24,12,.68);--sheet:rgba(34,20,10,.93);--ink:#f7e8cf;--muted:#c9b393;--line:rgba(255,214,160,.2)}
html[data-ui-contrast]{--ink:#ffffff;--muted:#ecebf3;--line:rgba(255,255,255,.5)}
html[data-ui-contrast] .glass{background:rgba(2,3,8,.9);border-color:rgba(255,255,255,.5)}
html[data-ui-contrast] .sheet{background:rgba(2,3,8,.97)}

/* ── settings panel (Me sheet) ── */
.ui-set{margin:6px 0 4px}
.ui-tabs{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line);margin:8px 0 10px}
.ui-tabs button{flex:1;min-height:44px;border:0;border-radius:999px;background:transparent;color:var(--muted);font:600 13.5px var(--f-body);cursor:pointer}
.ui-tabs button[aria-selected="true"]{background:var(--gold-soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--gold)}
.ui-pane[hidden]{display:none!important}
.ui-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:4px 2px;border-bottom:1px solid var(--line)}
.ui-row:last-child{border-bottom:0}
.ui-row .ui-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.ui-row .ui-l b{font:600 14.5px var(--f-body);color:var(--ink)}
.ui-row .ui-l small{font-size:12px;color:var(--muted);line-height:1.35}
.ui-sw{flex:none;position:relative;width:52px;height:32px;min-height:32px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.12);cursor:pointer;padding:0;transition:background .15s}
.ui-sw::before{content:"";position:absolute;inset:-7px -3px} /* inset is from the padding box (1px border): -7px gives a 44px-tall hit area around the 32px visual */
.ui-sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#d9d6e2;transition:transform .15s}
.ui-sw[aria-checked="true"]{background:var(--gold);border-color:var(--gold)}
.ui-sw[aria-checked="true"]::after{transform:translateX(20px);background:#fff}
.ui-swatches{display:flex;flex-wrap:wrap;gap:8px}
.ui-swatches button{width:44px;height:44px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;background-clip:content-box;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.ui-swatches button[aria-pressed="true"]{border-color:var(--ink)}
.ui-themes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.ui-themes button{min-height:52px;border-radius:12px;border:1px solid var(--line);cursor:pointer;font:600 13.5px var(--f-body);display:flex;align-items:center;gap:8px;padding:0 10px;color:#efe8d8}
.ui-themes button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--gold)}
.ui-themes i{flex:none;width:18px;height:18px;border-radius:50%;border:1px solid rgba(255,255,255,.35)}
.ui-sub{display:block;margin:14px 0 6px;font:700 12px var(--f-body);letter-spacing:.06em;color:var(--muted)}
.ui-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
/* text-size chips and the reset button are plain .chip/.btn (29-33px tall): give them a 44px touch target inside the settings panel */
.ui-set .chips{gap:6px}
.ui-set .chips .chip,.ui-set #ui-reset{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
/* the "고요한 의식" edge pill (z 28) hops to any free HUD edge spot and could land on top of the open sheet, eating taps on the switches: hide it while a sheet is open */
body.sheet-open .rt-pill{display:none}

/* the ✕ chip sits over the dock for its 6 seconds: the only strip that is neither the view, the stick, the action buttons nor the top bar */
#ui-undo{min-height:52px;box-sizing:border-box;background:var(--sheet)}

/* X3 report: in an in-app browser at 360px the centred "open in browser" bar ran into the gate's sound button, and after entry into the title
   and the minimap. On phones: on the gate it sits in the free top-right strip (right of the sound button); in the church it takes the title's
   slot (the title steps aside while the bar is there, and comes back when the bar is closed), ending before the ⛶ button and the minimap.
   Its ✕ gets a 44px hit box everywhere. */
@media (max-width:600px){
  body.gated #inapp-bar{left:auto;right:max(6px,env(safe-area-inset-right,0px));transform:none;max-width:calc(100% - 178px)}
  body:not(.gated) #inapp-bar{left:var(--sal,12px);top:calc(env(safe-area-inset-top,0px) + 17px);transform:none;max-width:calc(100% - var(--sal,12px) - var(--sar,12px) - var(--mm,96px) - 54px)}
  body:not(.gated):has(#inapp-bar) .top .brand{visibility:hidden}
}
#inapp-bar .ia-x{position:relative}
#inapp-bar .ia-x::before{content:"";position:absolute;inset:-9px}

/* phones: the right-hand button column (people, language, voice, music) sat on top of an open sheet and covered its close button.
   While a sheet is open the column steps aside; voice and music stay reachable in Settings › 소리. */
@media (max-width:600px){body.sheet-open .top-ctrl{visibility:hidden}}

/* live check 2026-11-01 (390x700): the hymn lyrics card slid under the right-hand button column (people, language, voice, music) and lost the
   end of every line. On portrait phones it now ends left of that column. */
@media (max-width:700px) and (orientation:portrait){#hymn-card.hymn-card{right:calc(var(--sar,12px) + 56px)}}

/* Q2 dogfood (desktop 1440x900): the right-hand sheet (Settings etc.) sat under the button column and the hand/prayer buttons and hid the
   sound tab, switches and slider ends. While a sheet is open they step aside at every width (sound stays reachable in Settings › 소리). */
body.sheet-open :is(.top-ctrl,.fab,#emote-btn,#act-btn){visibility:hidden!important;pointer-events:none!important}

/* Q2 dogfood (desktop): the pilgrimage header sat under the act panel's close button, and the rites pill under chat lines. They step aside while those panels are open. */
body.act-open #ux-pilgrim,body.chat-open #rt-pill{visibility:hidden;pointer-events:none}
@media (max-width:600px){body.act-open .livebar{visibility:hidden;pointer-events:none}} /* Q2: the act panel's close button lies on the LIVE bar on phones */
body .rt-pill{top:calc(36vh + 8px)} /* Q2: 4px overlap with the pilgrimage card */