/* ================= Layout ================= */
.ice_link{
  position:relative;display:flex;flex-direction:column;
  width:100%; min-height:max(650px, 100vh);min-height:max(650px, 100dvh);margin:0 auto;overflow:hidden;
  background:#0b1730 url('/img/ice-rink/ice_rink_bg_m.jpg') center top / cover no-repeat;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
.ice_link *{box-sizing:border-box}

.ice_link{--board-max:352px;--card-max:1;--list-max:352px}
@media (min-width: 768px){
  .ice_link{--board-max:480px;--card-max:1.28;--list-max:480px}
}
@supports (overflow:clip){ .ice_link{overflow:clip} }

.ice_link .ir_head{position:relative;z-index:6;flex:0 0 auto; width: 100%; max-width: 640px; margin-inline: auto; padding:4dvh 20px 0;}
.ice_link .ir_nav{display:flex;justify-content:space-between}
.ice_link .ir_nav_btn{
  display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  background-color: #fff;
  border:1px solid #fff;border-radius:50%; color:#fff;cursor:pointer;
}
.ice_link .ir_nav_btn svg{width:16px;aspect-ratio:8 / 16}
.ice_link .ir_nav_btn.ir_prev svg{transform:translateX(-1.5px)}

.ice_link .tit{
  display: grid;
  justify-items: center;
  position: relative;
  z-index: 5;
  margin: clamp(36px, 10vh, 112px) 0 0;

}

.ice_link .tit_txt {
  grid-area: 1 / 1;
  align-self: start;
  display: block;
  transform-origin: 50% 0;
  color: #FFF;
  text-align: center;
  font-size: 30px;
  font-weight: 300;
  line-height: 150%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}

.ice_link.is_compact .tit{margin-top:clamp(8px, calc((max(700px, 100dvh) - 700px) * .2 + 10px), 36px)}

@media (min-height: 845px){
  .ice_link.is_compact .tit{margin-top:min(84px, calc((100dvh - 844px) * .25 + 36px))}
}
.ice_link.is_compact .tit_intro{display:none}

.ice_link .tit_select,
.ice_link .tit_draw{
  color: #FFF;
font-size: 16px;
font-weight: 500;
line-height: 150%;
text-transform: uppercase;
  letter-spacing: -0.07em;
  opacity: 0;
  visibility: hidden;
}

.ice_link .ir_sub {position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--cy, 0px) + 183px * var(--k, 1));
  z-index: 5;
  margin: 0;
  transform: translateY(-50%);
  text-align: center;
  color: #FFF;
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: 150%;
letter-spacing: -0.07em;
text-transform: uppercase;
  text-transform: uppercase;
  pointer-events: none;

}

.ice_link[data-step="intro"] .ir_sub{opacity:0}

.ice_link .drawing_wrap{position:relative;flex:1 1 auto;min-height:300px;z-index:4}

.ice_link .ir_bottom{position:relative;z-index:5;flex:none;display:flex;justify-content:center;gap:13px;width:100%;max-width:415px;
  margin:0 auto calc(40px + env(safe-area-inset-bottom));padding:0 20px}
.ice_link .ir_bottom .btn{margin:0}
.ice_link .btn_redraw{display:none !important}

.ice_link .ir_bottom.half{margin-top:16px}
.ice_link .ir_bottom.half .btn_redraw{display:flex !important}
.ice_link .ir_bottom.half .btn{flex:1 1 0;width:auto;height:58px;background-size:100% 100%}
.ice_link .ir_bottom.half .btn span{font-size:16px}
.ice_link .ir_bottom.half .btn {background-image:url(/img/ice-rink/ice_rink_btn_gray.svg)}
.ice_link .ir_bottom.half .btn.btn_next{background-image:url(/img/ice-rink/ice_rink_btn_small.svg)}

.ice_link .btn.gray{cursor:default}

.ice_link .btn { position: relative; z-index: 5; flex: none; display: flex; align-items: center; justify-content: center; width: calc(100% - 40px); max-width: 375px; height: 74px; margin: 0 auto calc(40px + env(safe-area-inset-bottom)); padding: 0; border: 0; background: url(/img/ice-rink/ice_rink_btn.svg) no-repeat center/ contain; cursor: pointer; }
.ice_link .btn.gray {
  background-image: url(/img/ice-rink/ice_rink_btn_gray.svg);
}
.ice_link .btn span {
  position: relative;
  color: #FFF;
  font-size: 20px;
  font-weight: 500;
  line-height: 160%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
}
.ice_link .btn:active{transform:scale(.985)}

/* ================= Card (3D) ================= */
.ice_link .card_pos{position:absolute;left:50%;top:calc(50% + var(--cy, 0px));width:0;height:0;perspective:1500px;perspective-origin:0 0;
  filter:drop-shadow(0 0 30px rgba(229,240,255,.80))}
.ice_link .card_scale{position:absolute;left:0;top:0;transform-style:preserve-3d;transform-origin:0 0}
.ice_link .card_shadow{
  position:absolute;left:0;top:0;width:300px;height:34px;margin:-17px 0 0 -150px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(20,45,90,.45),rgba(20,45,90,0) 70%);filter:blur(5px);
  transform:translateY(116px) scaleX(1.1);
}
.ice_link .card_box{
  position:absolute;left:0;top:0;width:278px;height:374px;transform-style:preserve-3d;transform-origin:0 0;cursor:pointer;
  transform:scale(1.187) rotateZ(0deg) rotateX(0deg) translate(-139px,-280.5px);
}
.ice_link .card_panel{position:absolute;left:0;width:278px;height:187px;transform-style:preserve-3d}

.ice_link .p_top{top:0;transform-origin:50% 100%;transform:rotateX(-180deg);
  border: 1px solid #fff;
}
.ice_link .p_bot{top:187px;transform:translateZ(-1px)}

.ice_link .card_face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.ice_link .face_inner{background:#EAF0F7;border:0 solid #fff}

.ice_link .p_top .face_inner{border-width:1px 1px 0}
.ice_link .p_bot .face_inner{border-width:0 1px 1px}
.ice_link .card_full{position:absolute;left:0;top:0;width:278px;height:374px;background:#EAF0F7;border:1px solid #fff;
  transform:translateZ(1px);opacity:0;pointer-events:none}
.ice_link .face_cover{
  background:#b5ccea url('/img/ice-rink/card_cover.jpg') center / 100% 100% no-repeat;
  transform:rotateX(180deg);
}

.ice_link .card_shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:rgb(28,52,98)}
.ice_link .sh_top{opacity:.55}

.ice_link .ir_msg{position:absolute;left:50%;top:50%;width:374px;height:278px;margin:-139px 0 0 -187px;overflow:hidden;
  transform:rotate(-90deg);container-type:size;pointer-events:none}
.ice_link .ir_msg > *{opacity:0}
.ice_link .ir_msg_bg{position:absolute;inset:0;background:linear-gradient(160deg,#DCEBFA 0%,#CBE1F6 55%,#C2DCF4 100%)}
.ice_link .ir_msg .ir_msg_scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.ice_link .ir_msg_light{position:absolute;left:50%;top:55%;width:120%;height:120%;margin:-60% 0 0 -60%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(235,246,255,.55) 45%,rgba(210,232,255,0) 100%)}
.ice_link .ir_msg_art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:1}
.ice_link .ir_tree_fill{fill:rgba(220,236,251,.92);opacity:0}
.ice_link .ir_tree_halo path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;filter:blur(2.5px)}
.ice_link .ir_tree_core path{fill:none;stroke:#fff;stroke-width:3.1;stroke-linecap:round;stroke-linejoin:round}
.ice_link .ir_write_halo path{fill:none;stroke:rgba(255,255,255,.55);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;filter:blur(2px)}
.ice_link .ir_write_core path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ice_link .ir_write_halo path.is_heart{stroke-width:6.2}
.ice_link .ir_write_core path.is_heart{stroke-width:2.75}

.ice_link .ir_lit{position:absolute;inset:-1px;pointer-events:none;mix-blend-mode:screen}
.ice_link .ir_lit i{position:absolute;inset:0;opacity:0}
.ice_link .ir_lit_core{background:#fff;
  box-shadow:0 0 24px 14px #fff,0 0 70px 34px rgba(235,246,255,.9),0 0 140px 60px rgba(190,225,255,.55)}
.ice_link .ir_lit_edge{
  box-shadow:inset 0 0 22px 9px #fff,inset 0 0 56px 12px rgba(255,255,255,.4),
    0 0 16px 5px rgba(255,255,255,.9),0 0 50px 20px rgba(230,244,255,.7),0 0 110px 40px rgba(185,222,255,.45)}

.ice_link .ir_msg.is_copy{left:0;top:0;width:100%;height:100%;margin:0;transform:none}
.ice_link .ir_msg.is_copy > *{opacity:1}
.ice_link .ir_msg.is_copy .ir_msg_light{opacity:0}
.ice_link .ir_msg.is_copy .ir_msg_scene{opacity:.75}
.ice_link .ir_msg.is_copy path{stroke-dashoffset:0 !important}
.ice_link .ir_msg.is_copy .ir_tree_fill{opacity:1}

/* ================= 2단계 : 카드 선택 ================= */
.ice_link .ir_select{
  position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding-bottom:3%;
  visibility:hidden;container-type:size;

  bottom:auto;height:min(100%, calc((var(--list-max) - 16px) * 147 / 179 + 77px + 128px + 3%));
}
.ice_link .ir_list {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 20px;
  width: calc(100% - 40px);
  max-width: var(--list-max);

  max-width: min(var(--list-max), calc((100cqh - 101px) * 179 / 147 + 16px));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ice_link .ir_opt{display:block;width:100%;padding:0;border:0;background:none;color:#fff;text-align:center;cursor:pointer}
.ice_link .ir_thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 179 / 147;
  overflow: hidden;
  background: #EAF0F7;
  box-shadow: 0 0 30px 0 rgba(229, 240, 255, 0.80);
  transition: transform .15s;
}
.ice_link .ir_opt:active .ir_thumb{transform:scale(.97)}
.ice_link .ir_thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ice_link .ir_thumb .ir_icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.ice_link .ir_ring{position:absolute;inset:0;border:3px solid #3F6DA8;opacity:0;transition:opacity .2s}
.ice_link .ir_check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: url(/img/ice-rink/ice_rink_check.svg) no-repeat center / contain;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.ice_link .ir_opt.is_on .ir_ring{opacity:1}
.ice_link .ir_opt.is_on .ir_check{opacity:1;transform:scale(1)}
.ice_link .ir_label{display:block;margin-top:6px; color: #FFF; text-align: center; font-family: "Noto Sans CJK KR", sans-serif; font-size: 15px; font-weight: 500; line-height: 150%; text-transform: uppercase; }

.ice_link .ir_glow{
  position:absolute;left:50%;top:50%;width:calc(var(--list-max) * 478 / 352);height:calc(var(--list-max) * 478 / 352);
  border-radius:50%;background:rgba(41,85,120,.60);filter:blur(40px);
  transform:translate(-50%,-50%);opacity:0;pointer-events:none;
}

.ice_link .ir_ghost{position:absolute;z-index:6;overflow:hidden;background:#EAF0F7;border:1px solid #fff;pointer-events:none}
.ice_link .ir_ghost img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* ================= 3단계 : 그리기 ================= */
.ice_link .ir_draw{
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;padding-top:10px;
  visibility:hidden;container-type:size;
}

.ice_link .ir_board{width:min(var(--board-max), calc(100cqw - 38px), calc((100cqh - 183px - var(--tp, 0px)) * 374 / 278))}

.ice_link.is_compact .ir_draw{padding-top:27px}

@media (min-height: 845px){
  .ice_link.is_compact .ir_draw{padding-top:min(52px, calc((100dvh - 844px) * .12 + 27px))}
}

.ice_link .ir_tools,
.ice_link .ir_textpanel{--panel-w:max(min(352px, calc(100cqw - 38px)), min(var(--board-max), calc(100cqw - 38px), calc((100cqh - 183px - var(--tp, 0px)) * 374 / 278)))}

.ice_link .ir_tools{width:var(--panel-w);container-type:inline-size}
.ice_link .ir_board{
  position:relative;flex:none;aspect-ratio:374 / 278;overflow:hidden;
  background:#EAF0F7;border:1px solid #fff;box-shadow:0 0 30px rgba(229,240,255,.8);
}

.ice_link .ir_board_bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}

.ice_link .ir_hint{position:absolute;left:50%;top:50%;z-index:3;margin:0;padding:12px 18px;border-radius:14px;
  background:rgba(23,43,85,.82);box-shadow:0 0 24px rgba(229,240,255,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  font:500 14px/1.55 "Noto Sans CJK KR",sans-serif;color:#fff;letter-spacing:-0.03em;text-align:center;white-space:nowrap;
  pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-50%) scale(.94)}
.ice_link .ir_hint.is_on{visibility:visible;animation:irHintIn .45s cubic-bezier(.2,.8,.2,1) forwards}
.ice_link .ir_hint.is_out{animation:irHintOut .35s ease-in forwards}
@keyframes irHintIn{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes irHintOut{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-46%) scale(.98)}}
.ice_link .ir_canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}

.ice_link .ir_tools{flex:none;margin-top:11px;padding:12px 12px 10px;border-radius:18px;background:#fff}
.ice_link .ir_tool_row{display:flex;align-items:center;justify-content:space-between;height:47px}
.ice_link .ir_tool{
  position:relative;flex:none;display:flex;align-items:flex-start;height:47px;padding:0 4px;overflow:hidden;
  border:0;border-radius:10px;background:transparent;cursor:pointer;
  transition:background-color .25s,padding .3s;
}
.ice_link .ir_tool img{flex:none;width:26px;height:47px;margin-top:3px;object-fit:contain;object-position:top;pointer-events:none;transition:transform .25s}
.ice_link .ir_tool_name{
  align-self:flex-end;max-width:0;margin:0 0 9px 0;overflow:hidden;opacity:0;white-space:nowrap;
  font:500 12px/1 "Noto Sans CJK KR",sans-serif;color:#3F6DA8;letter-spacing:-0.02em;
  transition:max-width .3s,margin .3s,opacity .2s;
}
.ice_link .ir_tool.is_on{padding:0 10px 0 14px;background:#D2E1F9}
.ice_link .ir_tool.is_on .ir_tool_name{max-width:72px;margin-left:16px;opacity:1}
.ice_link .ir_tool:not(.is_on):active img{transform:translateY(2px)}
.ice_link .ir_sep{flex:none;width:1px;height:26px;background:#CCC}
.ice_link .ir_tool_text {
  flex: none;
  width: 30px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(63, 109, 168, 0.40);
  background: #fff;
  cursor: pointer;
  font: 500 21px/1.5 "Noto Serif KR", serif;
  color: #3F6DA8;
  transition: background-color .2s;
}
.ice_link .ir_tool_text.is_on{background:#D2E1F9}
.ice_link .ir_act{flex:none;display:flex;padding:3px;border:0;background:none;cursor:pointer}
.ice_link .ir_act:active{opacity:.6}
.ice_link .ir_act:disabled{opacity:.3;cursor:default}

.ice_link .ir_colors{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding:12px 2px 0;border-top:1px solid #DEDEDE}

.ice_link .ir_color{
  flex:none;width:26px;height:26px;padding:0;border:1.5px solid transparent;border-radius:50%;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:border-color .2s;
}
.ice_link .ir_color::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ice_link .ir_color.is_on{border-color:#3F6DA8}

.ice_link .ir_autofill{
  flex:none;display:flex;align-items:center;justify-content:center;width:113px;height:34px;margin-top:16px;padding:0;border:0;cursor:pointer;
  background:url(/img/ice-rink/ice_rink_btn_dark.svg) center / 100% 100% no-repeat;
}
.ice_link .ir_autofill span{font:500 14px/1 "Noto Sans CJK KR",sans-serif;color:#fff;letter-spacing:-0.02em}
.ice_link .ir_autofill:active{transform:scale(.97)}
.ice_link .ir_autofill.is_busy{pointer-events:none}
.ice_link .ir_autofill.is_busy span{opacity:.5}

.ice_link .ir_textpanel{display:none;flex:none;width:var(--panel-w);container-type:inline-size;
  margin-top:11px;padding:0 14px;border-radius:18px;background:#E5EBF3}
.ice_link .ir_draw.is_text .ir_textpanel{display:block;animation:irPanelIn .35s cubic-bezier(.2,.8,.2,1)}
.ice_link .ir_draw.is_text .ir_autofill{display:none}
@keyframes irPanelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.ice_link .ir_tp_row{display:flex;align-items:center;gap:8px;height:50px}
.ice_link .ir_tp_row + .ir_tp_row{border-top:1px solid #C9D2DE}
.ice_link .ir_tp_label{flex:none;width:66px;font:700 14px/1 "Noto Sans CJK KR",sans-serif;color:#1B2C45;letter-spacing:-0.03em;white-space:nowrap}

.ice_link .ir_tp_input{
  flex:1;min-width:0;height:38px;padding:0 12px;border:1px solid #B7C8DE;border-radius:6px;outline:0;background:#fff;
  font:400 16px "Noto Sans CJK KR",sans-serif;color:#1B2C45;-webkit-user-select:text;user-select:text;
}
.ice_link .ir_tp_input::placeholder{color:#979797}
.ice_link .ir_tp_input:focus{border-color:#3F6DA8}

.ice_link .ir_tp_select{
  position:relative;flex:none;width:118px;height:38px;
  border:1px solid #B7C8DE;border-radius:6px;background:#fff;
}
.ice_link .ir_tp_font{
  position:absolute;inset:0;display:flex;align-items:center;width:100%;height:100%;margin:0;padding:0 28px 0 12px;
  border:0;border-radius:6px;background:none;color:#1B2C45;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.ice_link .ir_tp_font[aria-expanded="true"]{box-shadow:0 0 0 1px #3F6DA8}
.ice_link .ir_tp_preview{overflow:hidden;white-space:nowrap;font-size:16px;line-height:1.2;color:#1B2C45}
.ice_link .ir_tp_select svg{position:absolute;right:10px;top:50%;margin-top:-4px;pointer-events:none;transition:transform .2s}
.ice_link .ir_tp_font[aria-expanded="true"] svg{transform:rotate(180deg)}
.ice_link .ir_tp_list{
  position:absolute;left:-1px;right:-1px;bottom:calc(100% + 6px);z-index:10;margin:0;padding:5px;list-style:none;
  border:1px solid #B7C8DE;border-radius:8px;background:#fff;box-shadow:0 6px 20px rgba(23,43,85,.18);
  animation:irListIn .18s ease-out;
}
.ice_link .ir_tp_list[hidden]{display:none}
@keyframes irListIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.ice_link .ir_tp_opt{display:flex;align-items:center;height:38px;padding:0 9px;border-radius:5px;
  font-size:16px;line-height:1.2;color:#1B2C45;white-space:nowrap;cursor:pointer}
.ice_link .ir_tp_opt + .ir_tp_opt{margin-top:2px}
.ice_link .ir_tp_opt.is_on{background:#D2E1F9;color:#3F6DA8}

.ice_link .ir_tp_select .font_sans {font-family:"Sackers Gothic Std","Spoqa Han Sans Neo",sans-serif;font-weight:500;letter-spacing:-0.02em}
.ice_link .ir_tp_select .font_pen  {font-family:"Caveat","Nanum Pen",sans-serif;font-weight:400;font-size:19px}
.ice_link .ir_tp_select .font_serif{font-family:"Lora","Gowun Batang",sans-serif;font-weight:500;letter-spacing:-0.02em}
.ice_link .ir_tp_size_label{flex:none;font:500 14px/1 "Noto Sans CJK KR",sans-serif;color:#3F6DA8}
.ice_link .ir_tp_size{
  -webkit-appearance:none;appearance:none;flex:1;min-width:50px;height:4px;margin:0;border-radius:2px;cursor:pointer;
  background:linear-gradient(to right,#3F6DA8 var(--pct,50%),#CCC var(--pct,50%));
}
.ice_link .ir_tp_size::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border:0;border-radius:50%;background:#3F6DA8}
.ice_link .ir_tp_size::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:50%;background:#3F6DA8}

@container (max-width: 300px){
  .ice_link .ir_tool.is_on{padding:0 6px}
  .ice_link .ir_tool.is_on .ir_tool_name{max-width:0;margin-left:0;opacity:0}
  .ice_link .ir_colors{padding-left:0;padding-right:0}
  .ice_link .ir_color{width:24px;height:24px}
  .ice_link .ir_color::before{width:16px;height:16px}
  .ice_link .ir_tp_row{gap:7px}
  .ice_link .ir_tp_label{width:auto;font-size:13px}
  .ice_link .ir_tp_select{width:100px}
  .ice_link .ir_tp_font{padding:0 24px 0 9px}
  .ice_link .ir_tp_select svg{right:8px}
  .ice_link .ir_tp_size{min-width:36px}
}

.ice_link .ir_modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(5,14,32,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:irFadeIn .2s ease-out}
.ice_link .ir_modal[hidden]{display:none}
.ice_link .ir_modal.is_out{animation:irFadeOut .2s ease-in forwards}
.ice_link .ir_modal_box{width:100%;max-width:310px;padding:28px 20px 20px;border-radius:18px;background:#fff;text-align:center;
  box-shadow:0 0 30px rgba(229,240,255,.5);animation:irPopIn .28s cubic-bezier(.2,.8,.2,1)}
.ice_link .ir_modal_msg{margin:0 0 22px;font:500 15px/1.6 "Noto Sans CJK KR",sans-serif;color:#1B2C45;letter-spacing:-0.03em;word-break:keep-all}
.ice_link .ir_modal_btns{display:flex;gap:8px}
.ice_link .ir_modal_btns button{flex:1 1 0;height:46px;padding:0;border:0;border-radius:10px;cursor:pointer;
  font:500 15px/1 "Noto Sans CJK KR",sans-serif;letter-spacing:-0.02em}
.ice_link .ir_modal_cancel{background:#E5EBF3;color:#3F6DA8}
.ice_link .ir_modal_ok{background:#3F6DA8;color:#fff}
.ice_link .ir_modal_btns button:active{transform:scale(.97)}
@keyframes irFadeIn{from{opacity:0}to{opacity:1}}
@keyframes irFadeOut{from{opacity:1}to{opacity:0}}
@keyframes irPopIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .ice_link .ir_ring,.ice_link .ir_check{transition:none}
}

/* ================= 4단계 : 편지 쓰기 ================= */

.ice_link .ir_letter{
  --lt-top:clamp(14px, 6cqh, 64px);--lt-gap:clamp(14px, 3.5cqh, 26px);
  position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;padding-top:var(--lt-top);
  visibility:hidden;container-type:size;
}

.ice_link .ir_fonts{display:flex;justify-content:center;gap:9px;flex:none}
.ice_link .ir_font{
  display:flex;align-items:center;justify-content:center;min-width:88px;height:36px;padding:0 16px;margin:0;
  border:1px solid rgba(255,255,255,.7);border-radius:18px;background:rgba(11,23,48,.35);color:#fff;
  font-size:15px;line-height:1;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .25s, border-color .25s, box-shadow .25s;
}
.ice_link .ir_font.is_on{background:rgba(255,255,255,.22);border-color:#fff;box-shadow:0 0 14px rgba(229,240,255,.55)}

.ice_link .ir_font.font_sans{font-family:"Sackers Gothic Std","Spoqa Han Sans Neo",sans-serif;font-weight:400;letter-spacing:-0.02em}
.ice_link .ir_font.font_pen{font-family:"Caveat","Nanum Pen",sans-serif;font-size:18px}
.ice_link .ir_font.font_serif{font-family:"Lora","Gowun Batang",sans-serif;font-weight:400;letter-spacing:-0.02em}

.ice_link .ir_paper{
  position:relative;flex:none;box-sizing:border-box;margin-top:var(--lt-gap);aspect-ratio:374 / 278;
  width:min(var(--board-max), calc(100cqw - 38px), calc((100cqh - var(--lt-top) - 36px - var(--lt-gap) - 12px) * 374 / 278));
  container-type:inline-size;border:1px solid rgba(255,255,255,.75);
}
.ice_link .ir_paper::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:url(/img/ice-rink/letter_bg.png) center / 100% 100% no-repeat}
.ice_link .ir_paper_txt {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  height: calc(257 * 100cqw / 374 + 1px);

  padding: calc(2 * 100cqw / 374) calc(16 * 100cqw / 374) 0;

  transform: translateY(var(--lt-y, 0px));

  font-family: var(--lt-family);
  font-weight: var(--lt-weight);
  font-size: var(--lt-size);
  letter-spacing: var(--lt-ls);
  line-height: calc(51 * 100cqw / 374);

  color: #00122D;
  background: transparent;
  text-align: left;
  text-transform: none;
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow: hidden;
}
.ice_link .ir_paper_txt{display:block;resize:none;outline:none;-webkit-appearance:none;appearance:none;-webkit-user-select:text;user-select:text}
.ice_link .ir_paper_txt::placeholder{color:#00122D;opacity:1}

.ice_link .ir_paper.font_sans {
  --lt-family: "Sackers Gothic Std", "Spoqa Han Sans Neo", sans-serif;
  --lt-weight: 500;
  --lt-size: max(16px, 4.5cqw);
  --lt-ls: -0.02em;
  --lt-y: 0px
}
.ice_link .ir_paper.font_pen {
  --lt-family: "Caveat", "Nanum Pen", sans-serif;
  --lt-weight: 400;
  --lt-size: max(16px, 6cqw);
  --lt-ls: 0em;
  --lt-y: 1px
}
.ice_link .ir_paper.font_serif {
  --lt-family: "Lora", "Gowun Batang", sans-serif;
  --lt-weight: 500;
  --lt-size: max(16px, 4.5cqw);
  --lt-ls: -0.02em;
  --lt-y: 0px
}

@media screen and (min-width: 450px) {
  .ice_link {background-image: url(/img/ice-rink/ice_rink_bg_pc.jpg);}
}
/* ================= 첫 진입 애니메이션 ================= */
/* 로고 → 뒤로가기 → 타이틀 → 접힌 카드 → 하단 버튼 순서로 등장 (JS INTRO_ENTER_MS = 1s 와 맞춤)
   등장이 끝난 뒤에 카드 펼침이 시작됨 / fill-mode 는 backwards 만 사용 → 끝나면 원래 스타일 그대로
   로고는 위치 transform 에 영향을 주지 않도록 투명도만 사용 */
.ice_link.ir_intro_wait .logo,
.ice_link.ir_intro_wait .ir_nav_btn,
.ice_link.ir_intro_wait .tit_intro,
.ice_link.ir_intro_wait .card_pos,
.ice_link.ir_intro_wait .ir_bottom{opacity:0}

.ice_link.ir_intro .logo{animation:irIntroFade .5s ease backwards}
.ice_link.ir_intro .ir_nav_btn{animation:irIntroDown .5s cubic-bezier(.2,.7,.2,1) .04s backwards}
.ice_link.ir_intro .tit_intro{animation:irIntroText .6s cubic-bezier(.2,.7,.2,1) .08s backwards}
.ice_link.ir_intro .card_pos{animation:irIntroCard .7s cubic-bezier(.2,.8,.2,1) .18s backwards}
.ice_link.ir_intro .ir_bottom{animation:irIntroUp .6s cubic-bezier(.2,.7,.2,1) .35s backwards}

@keyframes irIntroFade{from{opacity:0}}
@keyframes irIntroDown{from{opacity:0;transform:translateY(-12px)}}
@keyframes irIntroText{from{opacity:0;transform:translateY(10px) scale(1.06);filter:blur(6px)}}
@keyframes irIntroCard{from{opacity:0;transform:translateY(28px) scale(.92)}}
@keyframes irIntroUp{from{opacity:0;transform:translateY(30px)}}