/* style.css for Cocone Manual */

/* Page reset */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:sans-serif;background:#fff;color:#222;line-height:1.6;}

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.5rem 1rem;
  border-bottom:1px solid #eee;
  max-height:20vh;
}

/* Logo placeholder */
.logo{
  font-size:1.25rem;
  font-weight:bold;
}

/* Language buttons */
.langs{display:flex;gap:.5rem;}
.lang-btn{
  width:60px;
  height:60px;
  border-radius:8px;
  font-size:.7rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:inherit;
  background:#fdfdfd;
  border:1px solid #ddd;
  overflow:hidden;
  position:relative;
}

/* Elements inside */
.lang-btn span{margin-top:2px;}

/* JAPAN */
.jp::before{
  content:"";
  width:18px;height:18px;
  background:#d00;
  border-radius:50%;
  display:block;
}

/* KOREA - Taegeuk simplified */
.kr::before{
  content:"";
  width:22px;height:22px;
  border-radius:50%;
  display:block;
  background:
    radial-gradient(circle at 50% 35%, #d22 60%, transparent 61%),
    radial-gradient(circle at 50% 65%, #05a 60%, transparent 61%);
}

/* USA - simplified flag */
.en::before{
  content:"";
  width:100%;
  height:40%;
  background:
    linear-gradient(to bottom,#0d47a1 50%,transparent 50%),
    linear-gradient(to right,#bf0a30 50%,#fff 50%);
  background-size:100% 100%,100% 100%;
  display:block;
}

/* China */
.cn{
  background:#DE2910;
  color:#FFDE00;
}
.cn::before{
  content:"★";
  font-size:1rem;
  line-height:1;
}

/* Main content */
main{
  max-width:700px;
  margin:2rem auto;
  padding:0 1rem;
}

/* Responsive */
@media(max-width:600px){
  .lang-btn{width:48px;height:48px;font-size:.6rem;}
  .logo{font-size:1rem;}
}